easyUI Datagrid資料網格
阿新 • • 發佈:2018-12-07
資料網格(datagrid)以表格格式顯示資料,併為選擇、排序、分組和編輯資料提供了豐富的支援。資料網格(datagrid)的設計目的是為了減少開發時間,且不要求開發人員具備指定的知識。它是輕量級的,但是功能豐富。它的特性包括單元格合併,多列頁首,凍結列和頁尾,等等。
用法
1.從已有的表格元素建立資料網格(datagrid),在 html 中定義列、行及資料。
<table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name</th> <th data-options="field:'price'">Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> </tbody> </table>
2.通過
標記建立資料網格(datagrid)。巢狀的<th> 標籤定義表格中的列。<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th> </tr> </thead> </table>
3.可以使用 javascript 建立資料網格(datagrid)。
<table id="dg"></table> <srcipt> $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); </script>
資料網格(DataGrid)屬性
該屬性擴充套件自面板(panel),下面是為資料網格(datagrid)新增的屬性。
列屬性
資料網格(DataGrid) 的列(Column)是一個數組物件,它的每個元素也是一個數組。元素陣列的元素是一個配置物件,它定義了每個列的欄位。
程式碼例項:
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]