jQuery EasyUI DataGrid - Setting Frozen Columns
This example demonstrates how to freeze some columns so that when the user moves the horizontal scrollbar on the grid, the frozen columns do not scroll out of view.
To freeze columns, you need to define the frozenColumns property. The frozenColumns property is similar to the columns property.
$('#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 }
]]
});
You do not need to write any JavaScript code to create a DataGrid component as shown below:
<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">Status</th>
</tr>
</thead>
</table>