Jquery easy ui datagrid動態加載列問題

1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数

2.首先是后台组装数据,我采用的是循环并拼接DataTable数据,如下代码

          //循環添加datagrid所需的表頭數據
                for (int i = 0; i < table.Columns.Count; i++)
                {
                    columns.AppendFormat("{{field:‘{0}‘,title:‘{1}‘,align:‘center‘,width:{2}}},", table.Columns[i].ColumnName, table.Columns[i].ColumnName, 41);
                }
                //刪除最有一個filed多餘的","號
                if (table.Columns.Count > 0)
                {
                    columns.Remove(columns.Length - 1, 1);
                }
                columns.Append("]]");
                //組裝工令各站排程達成狀況表頭和數據
                Dictionary<string, object> objDic = new Dictionary<string, object>();
                objDic.Add("columns", columns.ToString()); //datagrid表头
                objDic.Add("rows", table); //datagrid表数据          //转换为Json格式
                return Common.JsonHelper.ToJson(objDic)

3.取得浏览器所返回的组装后的JSON格式数据,如下

{"columns":"[[{field:‘Item‘,title:‘項目‘,align:‘center‘,width:120},{field:‘SumMonth‘,title:‘3月份累計‘,align:‘center‘,width:70},{field:‘03/01‘,title:‘03/01‘,align:‘center‘,width:41},{field:‘03/02‘,title:‘03/02‘,align:‘center‘,width:41},{field:‘03/03‘,title:‘03/03‘,align:‘center‘,width:41},{field:‘03/04‘,title:‘03/04‘,align:‘center‘,width:41},{field:‘03/05‘,title:‘03/05‘,align:‘center‘,width:41},{field:‘03/06‘,title:‘03/06‘,align:‘center‘,width:41},{field:‘03/07‘,title:‘03/07‘,align:‘center‘,width:41},{field:‘03/08‘,title:‘03/08‘,align:‘center‘,width:41},{field:‘03/09‘,title:‘03/09‘,align:‘center‘,width:41},{field:‘03/10‘,title:‘03/10‘,align:‘center‘,width:41},{field:‘03/11‘,title:‘03/11‘,align:‘center‘,width:41},{field:‘03/12‘,title:‘03/12‘,align:‘center‘,width:41},{field:‘03/13‘,title:‘03/13‘,align:‘center‘,width:41}]]",

"rows":[{"SerailNum":1,"Item":"累計各LOT耗用工時之合(H)","SumMonth":142.00,"03/01":null,"03/02":null,"03/03":null,"03/04":50.00,"03/05":null,"03/06":7.00,"03/07":42.00,"03/08":null,"03/09":null,"03/10":17.00,"03/11":null,"03/12":26.00,"03/13":null},{"SerailNum":2,"Item":"產出LOT批","SumMonth":13.00,"03/01":0.00,"03/02":0.00,"03/03":0.00,"03/04":2.00,"03/05":0.00,"03/06":4.00,"03/07":2.00,"03/08":0.00,"03/09":0.00,"03/10":1.00,"03/11":0.00,"03/12":4.00,"03/13":0.00},{"SerailNum":3,"Item":"平均實際CT","SumMonth":10.92,"03/01":null,"03/02":null,"03/03":null,"03/04":25.00,"03/05":null,"03/06":1.75,"03/07":21.00,"03/08":null,"03/09":null,"03/10":17.00,"03/11":null,"03/12":6.50,"03/13":null}]}

4.浏览器端解析数据,并绑定datagrid

            //綁定工令各站排程達成狀況
                    $("#dg_PDL_RealCT").datagrid({
                        width: ‘auto‘,  //寬度
                        height: ‘auto‘,  //高度
                        singleSelect: true, //允許選中一行
                        striped: true, //设置为true将交替显示行背景。
                        rownumbers: true, //顯示行號
                        title: "站別實際CT-日報", //標題
                        iconCls: "icon-save", //圖表
                        collapsible: true, //隱藏按鈕
                        method: "post", //post請求
                        showFooter: true,
                        loadMsg: "數據加載中...", //載入信息時提示內容
                        onLoadError: function () {
                            $.messager.alert(‘溫馨提示‘, "加载数据失败!!!");
                        },
                        view: myview,
                        emptyMsg: ‘沒有檢索到相關數據!‘
                    }); //end datagrid

                    //綁定工令各站排程達成狀況表頭
                    $.post("/PI/PDL_RealCT", { "BDate": $("#BDate").datebox(‘getValue‘), "EDate": $("#EDate").datebox(‘getValue‘), "ProcCode": $("#ProcCode").combobox(‘getValue‘) }, function (data) {
                        setTimeout(function () {                //将json格式数据转换为js对象
                            var json = eval("(" + data + ")");                //获取datagrid熟悉对象 并为其赋值
                            var opt = $("#dg_PDL_RealCT").datagrid(‘options‘);                //为datagrid表头赋值
                            opt.columns = eval(json.columns);
                            $("#dg_PDL_RealCT").datagrid(opt);                //加载datagrid内容
                            $("#dg_PDL_RealCT").datagrid("loadData", json.rows);
                            $.messager.progress(‘close‘);
                        }, 1000); //end setTimeout
                    }); //end postgh
时间: 2024-10-11 18:26:19

Jquery easy ui datagrid動態加載列問題的相关文章

jquery easy ui datagrid中遇到的坑爹的問題。。。

不說廢話,直接上代碼吧... //定義一個全局變量防止重複提交(百度了一下似乎很多人也遇到類似的問題) 1 var i = 0; 2 //修改 3 function Update() { 4 //獲取選中行 5 var selected = $("#dg1").datagrid('getSelected'); //判斷是否有選中行 6 if (selected != null) { 7 //顯示添加窗體 8 $('.theme-popover-mask').fadeIn(100); 9

JQuery Easy Ui dataGrid 数据表格

Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time and

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

7个jquery easy ui 基本组件图解

以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Panel - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href=".

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

JQuery Easy Ui (Tree树)详解(转)

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

jquery easy ui 实现radio单选

1.使用datagrid实现列表table,注意参数 singleSelect:true, 2.formatter ID的显示 frozenColumns:[[{ field:'id', hidden:false, formatter: function(value, rowData, rowIndex){ return '<input type="radio" name="selectRadio" id="selectRadio"' +

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准