使用easyUI 动态改变datagrid的columns
2012-08-10 10:10 java线程例子 阅读(406) 评论(0) 编辑 收藏 举报@author YHC
DataGrid 列可以使用'columns' 属性简单的定义,如果你想动态的改变columns,那根本没有问题,改变columns
,你可以重新调用datagrid 方法和传递一个新的columns 属性,就o了.
创建DataGrid
<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} ]] });运行你的web页面,你将看见:
可是有时候你想改变columns,所以你需要写一些代码:
$('#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 示例代码: