datagrid在MVC中的运用06-固定连续列

本文主要体验datagrid的frozenColumns属性。

frozenColumns效果:
在frozenColumns的列将保持不动,而其他列横向滚动。
9

□ frozenColumns效果实现的前提:
1、给所有的列表上宽度,比如width:80
2、frozenColumns中的列必须是从左侧开始,并且是连续的
3、必须把datagrid的fitColumns属性设置为false

            $('#tt').datagrid({
                url: 'Home/GetData',
                width: 380,
                height: 350,
                title: 'Book列表',
                iconCls: 'icon-save',
                //fitColumns: true,
                rownumbers: true, //是否加行号
                pagination: true, //是否显式分页
                pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
                pageNumber: 2, //默认显示第几页
                pageList: [15, 30, 45],//分页中下拉选项的数值
                frozenColumns: [[ //保持不动的列
                    { field: 'ItemId', title: '主键', sortable: true, width:100},
                    { field: 'ProductId', title: '产品编号', width:100 }
                ]],
                columns: [[
                    //book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1                   
                    { field: 'Attr1', title: '属性', width:80 },
                    { field: 'UnitCost', title: '成本价', width: 80 },
                    { field: 'ListPrice', title: '零售价', width: 80 },
                    { field: 'Status', title: '状态', width: 80 }
                ]],
                toolbar: '#tb,#tb1',//搜索div
                queryParams: params //搜索json
posted @ 2014-02-28 23:48  Darren Ji  阅读(799)  评论(0编辑  收藏  举报

我的公众号:新语新世界,欢迎关注。