码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI datagrid动态添加列

时间:2016-08-26 15:13:06      阅读:466      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

一、先定义好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 == 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动态添加列

标签:

原文地址:http://www.cnblogs.com/zhangjd/p/5810298.html

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