jEasyUI 設(shè)置凍結(jié)列

本實例演示如何凍結(jié)一些列，當(dāng)用戶在網(wǎng)格上移動水平滾動條時，凍結(jié)列不能滾動到視圖的外部。

為了凍結(jié)列，您需要定義 frozenColumns 屬性。frozenColumn 屬性和 columns 屬性一樣。

????$('#tt').datagrid({
????????title:'Frozen Columns',
????????iconCls:'icon-save',
????????width:500,
????????height:250,
????????url:'data/datagrid_data.json',
????????frozenColumns:[[
????????????{field:'itemid',title:'Item ID',width:80},
????????????{field:'productid',title:'Product ID',width:80},
????????]],
????????columns:[[
????????????{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}
????????]]
????});

您不需要寫任何的 javascript 代碼，這樣您就能創(chuàng)建一個數(shù)據(jù)網(wǎng)格（datagrid）組件，如下所示：

????<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"
????????????url="data/datagrid_data.json"
????????????singleSelect="true" iconCls="icon-save">
????????<thead frozen="true">
????????????<tr>
????????????????<th field="itemid" width="80">Item ID</th>
????????????????<th field="productid" width="80">Product ID</th>
????????????</tr>
????????</thead>
????????<thead>
????????????<tr>
????????????????<th field="listprice" width="80" align="right">List Price</th>
????????????????<th field="unitcost" width="80" align="right">Unit Cost</th>
????????????????<th field="attr1" width="150">Attribute</th>
????????????????<th field="status" width="60" align="center">Stauts</th>
????????????</tr>
????????</thead>
????</table>

上一篇：jEasyUI 創(chuàng)建復(fù)雜工具欄下一篇：jEasyUI 動態(tài)改變列