ExtJs懒人笔记(3) 动态Grid的实现

ExtJs学习目录

引言

使用过.NET 服务端控件的童鞋都应该会对它的方便性记忆犹新，像GridView的使用是非常普遍的，它的好处我就不在多说了。GridVew控件是极其强大的，

我这里只想强调它的一个常见功能——动态列。我们唯一要做的就是为它绑定数据，而不用关心列数的变化，一切都是自适应的。

缘由

最近在使用Extjs制作页面，在使用ExrJs Grid控件时需要实现动态列的效果，也就是列名和数据都是从后台动态获取的。一个简单的功能到了客户端控件，

怎么就这样麻烦呢？在网上查了一番，可能是手气太差，没找到一个较为完整的实例。经过一番研究，自己也琢磨出了一个方法，我想可能是最笨的办法了，

仍然希望和大家分享以便能够得到高人的指点。

原理

对于初学Ext的童鞋来说，以下Grid的使用方法是大家最为熟悉的：

字段设置：

View Code

        var store = new Ext.data.JsonStore({
                        fields:
            [{ name: 'ID', type: 'int' },
            { name: 'Name', type: 'string' },
            { name: 'En_Name', type: 'string' },
            { name: 'HomePage', type: 'string' }
            ]
                    });

View Code

     columns: [
            {
                id: 'id',
                header: 'ID',
                width: 75,
                sortable: true,
                dataIndex: 'ID'
            },
            {
                header: '姓名',
                width: 75,
                sortable: true,
                dataIndex: 'Name'
            },
            {
                header: '英文名',
                width: 75,
                sortable: true,
                dataIndex: 'En_Name'
            },
            {
                header: '网站',
                width: 250,
                sortable: true,
                dataIndex: 'HomePage'
            }

但是这种写法就限定了字段的数量，而不能做到动态Grid的效果。

但是从ExtJs Grid的使用方法中，我们也能够得到一些启示，如果以上字段和数据信息都从后台获取，问题得以解决，但是在真正实施中在构造json数据方面

遇到不少麻烦，特别是后台数据含有\r\n之类就会影响到json，以至前台无法正常显示。

效果

按照规矩，先上图

实例

这里使用了一个插件，DynamicGrid.js

View Code

Ext.grid.DynamicGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function () {
        //创建store   
        var ds = new Ext.data.Store({
            url: this.storeUrl,
            reader: new Ext.data.JsonReader()
        });

        //设置默认配置   
        var config = {
            viewConfig: {
                forceFit: true
            },
            enableColLock: false,
            loadMask: true,
            border: true,
            stripeRows: true,
            ds: ds,
            columns: []
        };

        //给分页PagingToolbar绑定store   
        this.bbar.bindStore(ds, true);

        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
        Ext.grid.DynamicGrid.superclass.initComponent.apply(this, arguments);
    },

    onRender: function (ct, position) {
        this.colModel.defaultSortable = true;
        Ext.grid.DynamicGrid.superclass.onRender.call(this, ct, position);

        this.el.mask('Loading...');
        this.store.on('load', function () {
            if (typeof (this.store.reader.jsonData.columns) === 'object') {
                var columns = [];

                if (this.rowNumberer) {
                    columns.push(new Ext.grid.RowNumberer());
                }

                if (this.checkboxSelModel) {
                    columns.push(new Ext.grid.CheckboxSelectionModel());
                }

                Ext.each(this.store.reader.jsonData.columns,
                    function (column) {
                        columns.push(column);
                    }
                );

                this.getColumnModel().setConfig(columns);
            }

            this.el.unmask();
        }, this);

        this.store.load();
    }
});

Ext.grid.DynamicGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function () {
        //创建store
        var ds = new Ext.data.Store({
            url: this.storeUrl,
            reader: new Ext.data.JsonReader()
        });

        //设置默认配置
        var config = {
            viewConfig: {
                forceFit: true
            },
            enableColLock: false,
            loadMask: true,
            border: true,
            stripeRows: true,
            ds: ds,
            columns: []
        };

        //给分页PagingToolbar绑定store
        this.bbar.bindStore(ds, true);

        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
        Ext.grid.DynamicGrid.superclass.initComponent.apply(this, arguments);
    },

    onRender: function (ct, position) {
        this.colModel.defaultSortable = true;
        Ext.grid.DynamicGrid.superclass.onRender.call(this, ct, position);

        this.el.mask('Loading...');
        this.store.on('load', function () {
            if (typeof (this.store.reader.jsonData.columns) === 'object') {
                var columns = [];

                if (this.rowNumberer) {
                    columns.push(new Ext.grid.RowNumberer());
                }

                if (this.checkboxSelModel) {
                    columns.push(new Ext.grid.CheckboxSelectionModel());
                }

                Ext.each(this.store.reader.jsonData.columns,
     function (column) {
         columns.push(column);
     }
    );

                this.getColumnModel().setConfig(columns);
            }

            this.el.unmask();
        }, this);

        this.store.load();
    }
});

页面(View)

View Code

<head runat="server">
    <title>ExtJs动态Grid实例</title>
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/ext-3.4.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://www.cnblogs.com/Content/ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script src="http://www.cnblogs.com/Content/ext-3.4.0/ext-all.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/Widget/DynamicGrid1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        Ext.onReady(function () {

            var dynamicGrid = new Ext.grid.DynamicGrid({
                title: '测试动态列',
                renderTo: 'dynamic-grid',
                storeUrl: '/DyGrid/GetJson1',
                width: 600,
                height: 200,
                rowNumberer: true,
                checkboxSelModel: true,
                sm: new Ext.grid.CheckboxSelectionModel(),
                bbar: new Ext.PagingToolbar({
                    pageSize: 5,
                    displayInfo: true,
                    displayMsg: '显示第{0}到{1}条数据,共{2}条',
                    emptyMsg: "没有数据",
                    beforePageText: "第",
                    afterPageText: '页 共{0}页'
                })
            });



        })

    </script>
</head>
<body>
    <div id="dynamic-grid">
    </div>
</body>

Controller:

View Code

/// <summary>
        /// 构造动态grid的数据
        /// </summary>
        /// <returns></returns>
        public string GetJson1()
        {
            string strGridData = "";
            //1.构造Grid字段
            List<string> lstColumns = new List<string>();
            lstColumns.Add("id");
            lstColumns.Add("name");

            string Coloumns = "";
            Coloumns += "[";
            for (int i = 0; i < lstColumns.Count;i++ )
            {
                Coloumns += "{\"name\":\"" + lstColumns[i] + "\"},";
            }
            Coloumns = Coloumns.Remove(Coloumns.LastIndexOf(','));//注意去掉最后一个多余的逗号
            Coloumns += "]";

            //2.构造Grid数据
            string strResult = "";

            strResult += "[";
            for (int i = 0; i < 10; i++)
            {
                //strResult += "[\"" + i + "\",\"" + i + "\",\"" + i + "\",\"" + i + "\"],";

                strResult += "{\"id\":\"" + i + "\",\"name\":\"" + i + "\"},";
            }
            strResult = strResult.Remove(strResult.LastIndexOf(','));//注意去掉最后一个多余的逗号
            strResult += "]";


            //3.构造header列名
            //List<string> lstHeaders = new List<string>();
            string strHeaders = "";
            strHeaders = "[";
            for (int j = 0; j < lstColumns.Count;j++ )
            {
                strHeaders += "{\"header\":\"" + lstColumns[j] + "\",\"dataIndex\":\"" + lstColumns[j] + "\"},";
            }
            strHeaders = strHeaders.Remove(strHeaders.LastIndexOf(','));//注意去掉最后一个多余的逗号
            strHeaders += "]";

            //4
            strGridData = "{ ";
            strGridData += "'metaData': {'totalProperty': 'total','root': 'records','id': 'id','fields':"+Coloumns+"}";
            strGridData += ",";

            strGridData += "'success': true,";
            strGridData += " 'total': 50,";
            strGridData += " 'records': "+strResult+",";
            strGridData += "'columns':" + strHeaders + "";
            strGridData += "} ";

            return strGridData;
        }

以上源码均有较为详尽的注释，不再说明。

交流

由于这里只是一个实例，实际的项目无法带出公司，但是项目中后台数据来自excel导入的到mongdb数据库，获取到的字符串中含有换行之类的，

影响了构成json,导致了Grid的无法正常呈现数据，同时，由于mongdb的一个集合中都可以存储不同的字段数目。这就导致此种方案失效，

有没有一种更加成熟和通用的方案呢？

转载请注明出处：http://www.cnblogs.com/lucky_hu/archive/2012/07/15/2591995.html

posted @ 2012-07-15 01:13 智客工坊阅读(2697) 评论(3) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

戎码一生

经验创造价值,分享成就未来

ExtJs懒人笔记(3) 动态Grid的实现

公告