您的位置:首页 > Web前端 > JQuery

jquery easyui datagrid 动态生成表头 + 嵌套对象属性展示

2016-03-16 21:55 495 查看
代码功能:

1、datagrid 的表头由后台生成,可以配置在数据库

2、datagrid 的列绑定数据 支撑嵌套对象

 

Js代码  


$(function() {  

    var columns = new Array();  

    var cols = new Array();  

    var colData = new Object();  

      

    $.post("url","params",function(data){  

        //动态生成表头开始  

        if(data.xxxx != null){  

            $.each(data.xxxx,function(){  

                colData = new Object();  

                colData.field = this.resCode;  

                colData.title = this.resName;  

                colData.width = 100;//也可以配置在数据库,这样整个页面的生成全部是配置的  

                colData.formatter =  function(value,row,index){  

                      

                    //这两句是嵌套对象属性绑定,insideObject 为嵌套的对象,field 为对象的属性  

                    //datagrid 的field不能重复,注意在绑定field 时不能全部用 insideObject,需要使用  insideObject 的属性绑定  

                    var field = this.field;  

                    return row.insideObject[field];  

                      

                };  

                cols.push(colData);  

            });  

        };  

        columns.push(cols);  

        //动态生成表头结束  

          

        var gridCfg = {  

            fit         : true,  

            loadMsg     : '数据加载中......',  

            url         : opts.resDataQueryUrl,  

            nowrap      : true,  

            border      : false,    

            striped     : true,  

            pagination  : true,  

            pageSize    : opts.pageSize,  

            rownumbers  : true,  

            singleSelect: false,  

            columns     : columns,  

            fitColumns : false,  

            queryParams : {},  

            frozenColumns   :   [[    

                {field:'ck',checkbox:true}    

            ]],   

            onLoadSuccess:function(data){  

            }  

        };  

        $('#id').datagrid(gridCfg);  

      

    });  

  

});  

出自 :http://gougouqihao.iteye.com/blog/1986610?utm_source=tuicool&utm_medium=referral
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  datagrid jquery javascript