easyui动态生成双列头
实习时老大交给任务,让我做这样一个效果,选择日期并点击查询时,动态生成列头,下一列要求对应日期的星期.
效果图:
下面贴出查询的单击函数:
//查询按钮 function queryByDate(){ var begin_Date=$('#dateid').datebox('getValue')+"-01"; var year=begin_Date.substring(0,4);//获取年 var month=begin_Date.substring(5,7);//获取月 var max=new Date(year,month,0).getDate(); //选中年月的最大天数 var columns = []; var col = []; var col2=[]; $.ajax({ type:"post", url:"/mylog/mobileManage/select.do", dataType:"json", data:{begin_Date:begin_Date}, success:function(data){ var json = eval("(" + data + ")"); col.push({title:"类型",rowspan:2,width:60,field:'type'}); col.push({title:"姓名",rowspan:2,width:60,field:'name'}); for(var i=1;i<=max;i++){ var field='code'+i; var c1 = {title:i,width:40,rowspan:1}; var week=getDateWeek(year,month,i); var c2={align:'center',title:week,width:40,rowspan:1,field:field}; col.push(c1); col2.push(c2); } columns[0]=col; columns[1]=col2; $('#dg').datagrid({title:"员工工作详情",columns:columns}); $('#dg').datagrid('loadData',json); //$('#dg').datagrid('reload'); } }) ; } function getDateWeek(year,month,day) { var dateInfo = new Date(year, month-1, day); var week = ""; switch(dateInfo.getDay()) { case 0: week="日"; break; case 1: week="一"; break; case 2: week="二"; break; case 3: week="三"; break; case 4: week="四"; break; case 5: week="五"; break; case 6: week="六"; break; } return week; }
生来奔走万山中,踏尽崎岖路自通