easyui中datagrid動态生成列（動态formatter）

需求: 客戶需要按照月份查出當月所有天數的資料

解析需求: 背景需要拿到動态生成的資料（我們是用存儲過程生成或者函數），前台進行拼接

前台實作： 取到對應的天數，然後初始化字段，接着加載資料

function dynamicLoad(){
			//拿到月份，需要隻選取年和月份的插件可以找我
			var month = $("#query_month").datebox("getValue");
			if(month==""){
				$.msg.alert("請選擇月份");
				return;
			}
			var dateArray = month.split("-");
			//必須以這種方式傳入日期，否則擷取不到對應月份的天數 如果是new Date(''2020-01-01")
			這樣取不到對應的天數，取得值是1，也就是你傳入日期的日，是以隻能是new date(年，月，0)
            var date = new Date(dateArray[0], dateArray[1], 0);
            var days = date.getDate();
            var startTime = month+"-01";
            var endTime = month+"-"+days;
			var columns=new Array();
			$.post(url,{startTime:startTime,endTime:endTime},function(rs){
				//擷取存儲目前日期
				var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
				for(var i = 0; i < rs.dates.length;i++){
					var date = rs.dates[i];
					var mydate=new Date(date.signDate);
					var myddy=mydate.getDay();
			 		var column={};
				 	column["title"]=dateFormatter(date.signDate)+"<br/>"+weekday[myddy];
				 	column["field"]='date'+i;
				 	column["width"]=120;
				 	column["align"]='center';
				 	columns.push(column);
			    }
			    //如果需要格式化值，這步很關鍵，網上找的說拼接字元串，我也不知道怎麼弄，
			    是以我直接這樣寫，{}裡面拼接字元串我也不會，是以你把你需要formatter的字段做個判斷，然後初始化column的值
				var column={'formatter':function(val,row,index) {return (val*100).toFixed(2)}};
				column["title"]="平均值"
				column["field"]='avg';
				column["width"]=120;
				column["align"]='center';
				columns.push(column);
				init(columns);
				$("#data_list").datagrid('loadData',rs.datas);
			 }
			,'json');
			 
		}
	
	//這部分就是初始化表格字段
		function init(columns){
			$("#data_list").datagrid( {
				idField : 'id',
				cache : false,
				method : "post",
				rownumbers : true,
				nowrap: false,
				border : false,
				fit : true,
				fitColumns: false,
				toolbar : "#toolbar",
				striped : true,
				pagination : true,
				pageList : [ 100,200,500,1000 ],
				singleSelect : false,
				enableHeaderClickMenu: false,        
		        enableHeaderContextMenu: false,      
		        enableRowContextMenu: true,
		        frozenColumns :[[{field:'userName',title:'人員',width:100,sortable:true,align:'center'}, {field:'vgroup',title:'班次',width:100,sortable:true,align:'center'}]],
		        columns : [columns],
		        onBeforeLoad : function(){$("#data_list").datagrid('clearSelections');return true;},
		        onLoadSuccess:function(data){
		        },
		        onSelect:function(rowIndex,rowData){ buttonState();
	  			},
	  			onUnselect:function(rowIndex,rowData){ buttonState();
	  			},
	  			onSelectAll:function(rows){ buttonState();
	  			},
	  			onUnselectAll:function(rows){ buttonState();
	  			},
			});
		}
           

如果以上内容對你有幫助，可以的話打個賞，多少無所謂，就是讓我感覺到你們的心意，如果又不懂的，歡迎評論，我一定知無不言，言無不盡，還是說一句，還是vue好用，easyui我也是用來維護老項目寫的，用的很多，哈哈，最後感謝你們的閱讀。