标签:
任务描述:根据用户选择时间段,生成列数据,如图
一、先定义好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); }
标签:
原文地址:http://www.cnblogs.com/zhangjd/p/5810298.html