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的文章！