jQuery EasyUI使用教程之設置數據網格的凍結列

<jQuery EasyUI最新試用版免費下載>

本教程演示瞭如何凍結一些列，當用戶在網格上水平移動滾動條時，凍結列不能滾動到視圖的外部。

查看jQuery EasyUI演示

想要定義凍結列，首先您應該定義frozenColumns屬性。frozenColumn屬性和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}

]]

});

您不須要編寫任何javascript代碼，以下所示，就能建立一個數據網格組件：

< 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的文章！