首页 > 代码库 > EasyUI datagrid动态添加列

EasyUI datagrid动态添加列

任务描述:根据用户选择时间段,生成列数据,如图

技术分享

一、先定义好datagrid固定的数据列

    <script type="text/javascript">        $(document).ready(function () {            $("#td_Radio").datagrid({                striped: true,                border: true,                iconCls: icon-edit, //图标                singleSelect: true,                autoRowHeight: true,                rownumbers: true,                fitColumns: false,                fit: false,                idField: cmem_id,                pagination: true, //是否分页                columns: [[                         { field: cregion_id, title: 调查地区, width: 100 },                         { field: cfm_ename, title: 节目名称, width: 100 },                         { field: cfamilyid, title: 家庭编号, width: 100 },                         { field: CSTBINSTALLDATE, title: 安装时间, width: 100 },                 ]]            });            //设置分页控件            var p = $(#td_Radio).datagrid(getPager);            $(p).pagination({                pageSize: 10, //每页显示的记录条数,默认为10                 pageList: [10, 20, 30], //可以设置每页记录条数的列表                 beforePageText: , //页数文本框前显示的汉字                 afterPageText: 页    共 {pages} 页,                displayMsg: 当前显示 {from} - {to} 条记录   共 {total} 条记录            });        })    </script>

二、用户点击查询的时候根据选择时间生成列数据,列是通过拼接字符串生成的

  var options = {};            //返回日期类型2016-07-01            function DataTime(date) {                var mon = date.getMonth() + 1;         //getMonth()返回的是0-11,则需要加1                if (mon <= 9) {                                     //如果小于9的话,则需要加上0                    mon = "0" + mon;                }                var day = date.getDate();                   //getdate()返回的是1-31,则不需要加1                if (day <= 9) {                                     //如果小于9的话,则需要加上0                    day = "0" + day;                }                return date.getFullYear() + "-" + mon + "-" + day;            }
//当数据值为0时,设置改变背景色 function cellStyler(value, row, index) {
if (value =http://www.mamicode.com/= 0) { return background-color:#EE9572;; } } //绑定查询按钮的click事件 $("#btnSearch").bind(click, function () { var dg = $("#td_Radio"); var url = "AjaxHandler/RadioFamilyDayNumber.ashx?Action=LoadGrid&NetWork=" + NetWork + "&FmID=" + FmID + "&StarTime=" + StarTime + "&EndTime=" + EndTime + "&FmName=" + FmName + "&NetWorkName=" + NetWorkName; loadDg(dg, url); }) //加载DataGrid数据 function loadDg(dg, url) { dg.datagrid({ url: url }); fetchData();//调用生成列方法 } //动态添加列 function fetchData() { var StarTime = $("#starTime").datebox("getValue");//得到开始时间 var EndTime = $("#endTime").datebox("getValue");//得到结束时间 var FmID = $("#cmbFmName").combobox("getValue");//获取FMID var StarDate = new Date(StarTime.substr(6, 4), StarTime.substr(0, 2) - 1, StarTime.substr(3, 2));//通过截取字符串,得到需要的DateTime类型 var EndDate = new Date(EndTime.substr(6, 4), EndTime.substr(0, 2) - 1, EndTime.substr(3, 2)); var days = EndDate.getTime() - StarDate.getTime();//获取相差天数 var time = parseInt(days / (1000 * 60 * 60 * 24));//转换相差天数为int类型数据 var nextDate = StarDate; var s = ""; s = "[["; if (FmID == "-1") s = s + " { field: ‘CREGION_ID‘, title: ‘调查地区‘, width: 100 },{ field: ‘CFAMILYID‘, title: ‘家庭编号‘, width: 100 },{ field: ‘CSTBINSTALLDATE‘, title: ‘安装时间‘, width: 100 },"; else s = s + " { field: ‘CREGION_ID‘, title: ‘调查地区‘, width: 100 },{ field: ‘CFM_ENAME‘, title: ‘节目名称‘, width: 100 },{ field: ‘CFAMILYID‘, title: ‘家庭编号‘, width: 100 },{ field: ‘CSTBINSTALLDATE‘, title: ‘安装时间‘, width: 100 },"; for (var i = 0; i <= time; i++) { if (i == 0) { s = s + "{field:‘" + DataTime(nextDate) + "‘,title:‘" + DataTime(nextDate) + "‘,width:80,styler:cellStyler},"; } else { nextDate = new Date(nextDate.getTime() + 24 * 60 * 60 * 1000); //后一天 s = s + "{field:‘" + DataTime(nextDate) + " ‘,title:‘" + DataTime(nextDate) + "‘,width:80,styler:cellStyler},"; } } s = s + "]]"; options = {}; options.columns = eval(s); $(#td_Radio).datagrid(options); }

 

EasyUI datagrid动态添加列