jQuery EasyUI使用教程之设置数据网格的冻结列

<jQuery EasyUI最新试用版免费下载>

本教程演示了如何冻结一些列，当用户在网格上水平移动滚动条时，冻结列不能滚动到视图的外部。

查看jQuery EasyUI演示

想要定义冻结列，首先您应该定义frozenColumns属性。frozenColumn属性和columns属性是一样的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$( '#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代码，如下所示，就能创建一个数据网格组件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< 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 >

下载该EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！