jQuery EasyUI 數(shù)據(jù)網(wǎng)格 – 動(dòng)態(tài)改變列

2022-06-08 16:09 更新

jQuery EasyUI 數(shù)據(jù)網(wǎng)格 - 動(dòng)態(tài)改變列

jQuery EasyUI數(shù)據(jù)網(wǎng)格(DataGrid)的列可以使用'columns'屬性簡(jiǎn)單地定義。你也可以動(dòng)態(tài)地改變列,為了改變列,您可以重新調(diào)用datagrid方法,并傳遞一個(gè)新的 columns屬性。

創(chuàng)建數(shù)據(jù)網(wǎng)格(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}
      ]]
    });

運(yùn)行網(wǎng)頁(yè),您將看見(jiàn):

可是有時(shí)候您想改變列,所以您需要寫一些代碼:

 $('#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}
      ]]
    });

請(qǐng)記住,我們已經(jīng)定義了其他屬性,比如:url、width、height等等。我們不需要再一次定義它們,我們定義那些我們需要改變的。

下載 jQuery EasyUI 實(shí)例

jeasyui-datagrid-datagrid6.zip

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)