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

代码功能:

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);

    });

});
时间: 2024-08-10 23:22:33

转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示的相关文章

转载>>JQuery EasyUI datagrid 合并表头处理

本文转自:http://www.cnblogs.com/nangong/p/ccdfabb7ccedbfa580acc6eeef286a27.html 例子1: $('#day_health').datagrid({ url: "sqb_bweb_day_health.aspx?mode=day_health", pagination: true, total: 2000, pageSize: 10, pageList: [10, 20, 30, 40, 50, 60, 70, 80,

jquery easyui datagrid动态改变title的值

title:'<input type="text" id="txtTitle1" style="background:none;border:none;"/>', onLoadSuccess:function(data) { $("#txtTitle1").val("所有教师 人数:"+$("#IndeterminateMembers").datagrid("get

jQuery Easyui datagrid动态列绑定

前几天有人在使用jQuery EasyUI的datagrid时,遇到不会动态绑定列的情况,而网上给出的例子可能也是比较早的处理办法,竟然需要修改easyui源码,其实解决这问题的思路是很简单,我们只需修改要显示的列即可.那位朋友最后改为这种处理时,发现还是有问题,最终我发现她返回不是合法json,里边多个方括号,这里推荐大家使用本站的JSON在线校验格式化工具来验证返回json是否正确. 这里我们以上篇文章中类似的简单json来说明这个问题,比如后台要根据当前用户的权限返回不同的json: 分享

JQuery EasyUI DataGrid动态合并单元格

/**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");        */        function MergeCells(tableID, fldList) {            var Arr = fldList.split(",&quo

jquery easyui datagrid 动态 加载列

实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似oracle web版的sql查询. 前台主要js为: Js代码   function sqlSearch(){ var sqlStatement = $.trim($("#sqlStatementId").val()); if(sqlStatement == null || sqlState

easyui datagrid 动态表头2

前端 function goqry() { $("#form").form("submit", { url: "CJCK_bjcjfx_yfsl.aspx?opt=qry", onSubmit: function () { if ($(this).form('validate')) { $('#tt').datagrid("loading"); return true; } else { return false; } },

JQuery EasyUI datagrid 复杂表头处理

http://www.cnblogs.com/szytwo/archive/2012/09/18/2691420.html $('#day_health').datagrid({ url: "sqb_bweb_day_health.aspx?mode=day_health", pagination: true, total: 2000, pageSize: 10, pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], rownumbe

jquery easyui DataGrid 动态的改变列显示的顺序

$.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = this; var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]'); cells.draggable({ revert:true, cursor:'pointer', edge:5, proxy:

jQuery EasyUI Datagrid组件的完整的基础DOM结构

该日志由 世纪之光 于2年前发表在datagrid分类下 转载: jQuery EasyUI Datagrid组件的完整的基础DOM结构 | WebUI框架使用参考+ http://www.easyui.info/archives/1157.html 关键字: datagrid源码分析, datagrid结构, easyui源码分析 标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会