jQuery EasyUI使用教程之为数据网格建立复杂工具栏

<jQuery EasyUI最新试用版免费下载>

数据网格的工具栏不只能够包含按钮，还能包含任何其余组件。用户能够经过已存在的div标签轻松定义工具栏布局，该div标签将成为数据网格工具栏的内容。本教程将向您展现如何为数据网格组件建立复杂的工具栏。

查看jQuery EasyUI演示

建立工具栏

< div id = "tb" style = "padding:5px;height:auto" >

< div style = "margin-bottom:5px" >

< a href = "#" class = "easyui-linkbutton" iconcls = "icon-add" plain = "true" ></ a >

< a href = "#" class = "easyui-linkbutton" iconcls = "icon-edit" plain = "true" ></ a >

< a href = "#" class = "easyui-linkbutton" iconcls = "icon-save" plain = "true" ></ a >

< a href = "#" class = "easyui-linkbutton" iconcls = "icon-cut" plain = "true" ></ a >

< a href = "#" class = "easyui-linkbutton" iconcls = "icon-remove" plain = "true" ></ a >

</ div >

< div >

Date From: < input class = "easyui-datebox" style = "width:80px" >

To: < input class = "easyui-datebox" style = "width:80px" >

Language:

< input class = "easyui-combobox" style = "width:100px" url = "data/combobox_data.json" valuefield = "id" textfield = "text" >

< a href = "#" class = "easyui-linkbutton" iconcls = "icon-search" >Search</ a >

</ div >

</ div >

建立数据网格

< table class = "easyui-datagrid" style = "width:600px;height:250px" url = "data/datagrid_data.json" title = "DataGrid - Complex Toolbar" toolbar = "#tb" singleselect = "true" fitcolumns = "true" >

< thead >

< tr >

< th field = "itemid" width = "60" >Item ID</ th >

< th field = "productid" width = "80" >Product ID</ th >

< th field = "listprice" align = "right" width = "70" >List Price</ th >

< th field = "unitcost" align = "right" width = "70" >Unit Cost</ th >

< th field = "attr1" width = "200" >Address</ th >

< th field = "status" width = "50" >Status</ th >

</ tr >

</ thead >

</ table >

正如您看到的那样，数据网格的工具栏相似于对话框。咱们无需编写任何的JavaScript代码，便可建立具备复杂工具栏的数据网格。

下载该EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友能够点击查看更多有关jQuery EasyUI的文章！