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