1. Home
  2. jQuery EasyUI Data Grid - Set Freeze Columns

The best jQuery EasyUI Data Grid - Set Freeze Columns Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,

jQuery EasyUI Data Grid - Set Freeze Columns

This example demonstrates how to freeze some of the columns when the user moves the horizontal scroll bar on the grid, frozen columns can not scroll to the view outside.

To freeze a column, you need to define frozenColumns property. frozenColumn properties and attributes as columns. 

	$ ( '# 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, so that you can create a data grid (datagrid) components as follows: 

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

Download jQuery EasyUI examples

jeasyui-datagrid-datagrid5.zip

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery EasyUI Data Grid - Set Freeze Columns
10/30