使用easyUI 動態改變datagrid的columns

@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頁面,你將看見:

查看 Demo

可是有時候你想改變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 示例代碼:

easyui-datagrid-demo.zip