使用easyUI 为datagrid冻结列
2012-08-10 09:59
465 查看
@author YHC
这个示例演示如何冻结一些列,冻结列不能滚动到视图的外部,当用户移动水平滚动条他将穿过grid.
![](http://my.csdn.net/uploads/201208/10/1344564473_5220.png)
查看 Demo
冻结列你需要定义frozenColumns 属性,frozenColumn 属性和columns
属性一样.
代码,这样你就能创建一个datagrid 组件,就像这样:
easyui-datagrid-demo.zip
这个示例演示如何冻结一些列,冻结列不能滚动到视图的外部,当用户移动水平滚动条他将穿过grid.
![](http://my.csdn.net/uploads/201208/10/1344564473_5220.png)
查看 Demo
冻结列你需要定义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
代码,这样你就能创建一个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>
下载 EasyUI 示例代码:
easyui-datagrid-demo.zip
相关文章推荐
- 使用easyUI 为datagrid冻结列
- 在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n
- easyui datagrid列中使用tooltip
- 使用EasyUi框架的datagrid组件显示时间问题
- EasyUI 之datagrid 使用
- EasyUI DataGrid的loadFilter属性使用
- 关于easyui的datagrid相关使用
- 使用easyUI 添加toolbar到datagrid
- easyui datagrid使用
- EasyUi Datagrid的基础使用
- easyui的数据表格(datagrid)使用时formatter的技巧
- EasyUI datagrid使用JS删除多行rows的解决方案
- easyui datagrid列使用按钮的一些心得 .
- easyui datagrid列使用按钮的一些心得
- EasyUi Datagrid的基础使用
- jquery easyui datagrid view detailview 使用
- 使用easyui在ie浏览器下,treegrid,datagrid加载数据很慢,ie浏览器卡住原因
- 使用easyUI datagrid的filter时,当value是空时候如何过滤
- easyui datagrid列中使用tooltip
- EasyUI DataGrid使用Json加载不了数据