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