使用easyUI 为datagrid冻结列

转自http://www.cnblogs.com/javaexam2/archive/2012/08/10/2632648.html

这个示例演示如何冻结一些列,冻结列不能滚动到视图的外部,当用户移动水平滚动条他将穿过grid.

查看 Demo

冻结列你需要定义frozenColumns 属性,frozenColumn 属性和columns 属性一样.

1. $(‘#tt‘).datagrid({
2. title:‘Frozen Columns‘,
3. iconCls:‘icon-save‘,
4. width:500,
5. height:250,
6. url:‘data/datagrid_data.json‘,
7. frozenColumns:[[
8. {field:‘itemid‘,title:‘Item ID‘,width:80},
9. {field:‘productid‘,title:‘Product ID‘,width:80},
10. ]],
11. columns:[[
12. {field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘},
13. {field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘},
14. {field:‘attr1‘,title:‘Attribute‘,width:100},
15. {field:‘status‘,title:‘Status‘,width:60}
16. ]]
17. });

你不需要写任何的javascript 代码,这样你就能创建一个datagrid 组件,就像这样:

1. <table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"
2. url="data/datagrid_data.json"
3. singleSelect="true" iconCls="icon-save">
4. <thead frozen="true">
5. <tr>
6. <th field="itemid" width="80">Item ID</th>
7. <th field="productid" width="80">Product ID</th>
8. </tr>
9. </thead>
10. <thead>
11. <tr>
12. <th field="listprice" width="80" align="right">List Price</th>
13. <th field="unitcost" width="80" align="right">Unit Cost</th>
14. <th field="attr1" width="150">Attribute</th>
15. <th field="status" width="60" align="center">Stauts</th>
16. </tr>
17. </thead>
18. </table>

下载 EasyUI 示例代码:

easyui-datagrid-demo.zip