jQuery EasyUI使用教程之動態改變數據網格列

<jQuery EasyUI最新試用版免費下載>

使用'columns'屬性能夠很容易地定義數據網格列。若是您想要動態地改變列，這也很是容易。爲了更改列，您能夠從新調用datagrid方法並傳遞一個新的column屬性。

建立數據網格

< table id = "tt" title = "Frozen Columns" class = "easyui-datagrid" style = "width:550px;height:250px" url = "data/datagrid_data.json" singleselect = "true" iconcls = "icon-save" >

</ table >

$( '#tt' ).datagrid({

columns:[[

{field: 'itemid' ,title: 'Item ID' ,width:80},

{field: 'productid' ,title: 'Product ID' ,width:80},

{field: 'attr1' ,title: 'Attribute' ,width:200},

{field: 'status' ,title: 'Status' ,width:80}

]]

});

運行該網頁，您將會看到：

查看jQuery EasyUI演示

當您想要更改列時，能夠編寫一些代碼：

$( '#tt' ).datagrid({

columns:[[

{field: 'itemid' ,title: 'Item ID' ,width:80},

{field: 'productid' ,title: 'Product ID' ,width:80},

{field: 'listprice' ,title: 'List Price' ,width:80,align: 'right' },

{field: 'unitcost' ,title: 'Unit Cost' ,width:80,align: 'right' },

{field: 'attr1' ,title: 'Attribute' ,width:100},

{field: 'status' ,title: 'Status' ,width:60}

]]

});

請記住咱們已經定義了其餘屬性，例如URL、width、height等，所以不須要再一次定義它們，您只須要定義那些須要改變的便可。

下載該EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！