Frozen Columns for DataGrid
Tutorial » Frozen Columns for DataGrid
This example demostrates how to freeze some columns,The frozen columns do not scroll out of view when users moving horizontally across the grid.
To freeze columns you should defines the frozenColumns property.
The frozenColumn property is same as 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 don't need to write any javascript code, so you can create datagrid component just like this:
Item ID
Product ID
List Price
Unit Cost
Attribute
Stauts
Download the EasyUI example: