码迷,mamicode.com
首页 > Web开发 > 详细

转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

时间:2016-01-12 10:03:50      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

代码功能:

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

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

 

$(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);
     
    });
 
});

 

转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

标签:

原文地址:http://www.cnblogs.com/mytzq/p/5123305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!