jQuery EasyUI 数据网格 - 设置冻结列
本实例演示如何冻结一些列，当用户在网格上移动水平滚动条时，冻结列不能滚动到视图的外部。
为了冻结列，您需要定义 frozenColumns 属性。frozenColumn 属性和 columns 属性一样。
$(&qpos;#tt&qpos;).datagrid({
title:&qpos;Frozen Columns&qpos;,
iconCls:&qpos;icon-save&qpos;,
width:500,
height:250,
url:&qpos;data/datagrid_data.json&qpos;,
frozenColumns:[[
{field:&qpos;itemid&qpos;,title:&qpos;Item ID&qpos;,width:80},
{field:&qpos;productid&qpos;,title:&qpos;Product ID&qpos;,width:80},
]],
columns:[[
{field:&qpos;listprice&qpos;,title:&qpos;List Price&qpos;,width:80,align:&qpos;right&qpos;},
{field:&qpos;unitcost&qpos;,title:&qpos;Unit Cost&qpos;,width:80,align:&qpos;right&qpos;},
{field:&qpos;attr1&qpos;,title:&qpos;Attribute&qpos;,width:100},
{field:&qpos;status&qpos;,title:&qpos;Status&qpos;,width:60}
]]
});
您不需要写任何的 javascript 代码，这样您就能创建一个数据网格（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>
