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