js动态创建DataGrid

和上篇一样，使用JS动态的创建DataGrid也是一件非常简单的事情，以项目中的实例来做说明，当然easyui的官网文档也有，例子很简单：

①从后台获取数据

②根据需要显示数据

③根据需要对显示的数据做样式

④对显示的数据做合计

核心代码：

• 从后台获取数据： url:getRootPath()+"/labour/contentDetail.do?headid="+headid

<span style="font-size:18px;">@RequestMapping("/contentDetail.do")
	@Override
	@ResponseBody
	public String queryContentDetailByHeaderid(HttpServletRequest request) throws Exception {
		String headid=CommonUtil.toEmpty(request.getParameter("headid"));
		List<JobContentDetail> jobContentDetailList=null;
		
		JSONObject data = new JSONObject();		
		String json = "";
		try {
			jobContentDetailList = labourservice.queryJobcontentMessageByheadid(headid);
			if(jobContentDetailList != null)
			{ 
				if(!jobContentDetailList.isEmpty()){
					data.put("rows", JSONArray.fromObject(jobContentDetailList).toString());
					//调用求和
					json = sumPrice(headid,jobContentDetailList);
				}					
				data.put("total", jobContentDetailList.get(0));
				data.put("footer", json);
			}
		} catch (Exception e) {
			e.printStackTrace();
			throw new Exception("query error,detail:" +e.getMessage());
		}
		return data.toString();
	}</span>

• 对后台数据做显示:columns

<span style="font-size:18px;">columns:[[ 
	{field:'jobcontentmainid',title:'jobcontentmainid',hidden:true},
	{field:'productid',title:'productid',hidden:true},	
	{field:'id',title:'id',hidden:true},
	{field:'subcontractorlabour',title:'subcontractorlabour',hidden:true},
	{field:'ck',checkbox:true},
	{field:'opt',title:'opt',width:20,align:'center',
		formatter:function(value,row,index){ 
			if (row.manuallykeyed == "1") {
				return "<img src=\""+ getRootPath() +"/component/jquery-easyui/themes/icons/edit_remove.png\" onClick=\"del(this)\"/>";
			}  
		}}, 
	{field:'productname',title:'<spring:message code="syspages.workjob.labour.Product"/>',width:250,align:'left'}, 
	{field:'productusage',title:'<spring:message code="syspages.workjob.labour.ProductUsage"/>',width:100,align:'center'},
	{field:'itemqty',title:'<spring:message code="syspages.workjob.labour.LabourQty"/>',width:60,align:'center',
		styler: function(index,row){
			if (row.itemqty==0){
				return 'background-color:#FFCCCC;';}
		}},				      	
	{field:'buildlabourqty',title:'<spring:message code="syspages.workjob.labour.BuildQty"/>',width:60,align:'center',editor:{type:'numberbox'},
		styler:function(index,row){
			var s1="";
			if (row.id!="footer" && row.builderqty==0){
				s1= 'background-color:#FFCCCC;';
			}
			if(row.id!="footer"){return s1 + s2;}	
		}},
	{field:'labourunitname',title:'<spring:message code="syspages.workjob.labour.LabourUnit"/>',width:80,align:'center'},
	{field:'labourfactor',title:'<spring:message code="syspages.workjob.labour.LabourFactor"/>',width:80,align:'center',editor:{type:'numberbox',options:{precision:2}},
		styler: function(index,row){
			var s1="";
			if (row.labourfactor==0){
				s1 = 'background-color:#FFCCCC;';
			}
			if(row.id!="footer"){
				return s1 + 'border-color:rgb(149,184,231);border-style:solid solid solid solid;border-width: 1px;height:30px;'
			};	
		}},
	{field:'labourfactor2',title:'<spring:message code="syspages.workjob.labour.LabourFactor"/>',width:80,align:'center',hidden:true,editor:{type:'numberbox',options:{precision:2}},
		styler: function(index,row){
			var s1="";
			if (row.labourfactor2==0){
				s1 =  'background-color:#FFCCCC;';
			}
			if(row.id!="footer"){
				return s1 + 'border-color:rgb(149,184,231);border-style:solid solid solid solid;border-width: 1px;height:30px;'
			};	
		}},
	{field:'labourfactor3',title:'<spring:message code="syspages.workjob.labour.LabourFactor"/>',width:80,align:'center',hidden:true,editor:{type:'numberbox',options:{precision:2}},
		styler: function(index,row){
			var s1="";
			if (row.labourfactor3==0){
				s1 = 'background-color:#FFCCCC;';
			}
			if(row.id!="footer"){
				return s1 + 'border-color:rgb(149,184,231);border-style:solid solid solid solid;border-width: 1px;height:30px;'
			};	
		}},
	{field:'levelofdifficulty',title:'<spring:message code="syspages.workjob.labour.DegreeofDifficulty"/>',width:80,align:'center',
		editor:{
			type:'combobox',
			options:{
				data:levelPercentData,
				valueField: 'id',
				textField: 'text',
				panelHeight:'300px',
				required: true ,  
				editable:false 													
			}
		},
		styler:function(index,row){	
			if(row.id!="footer"){
				return 'border-color:rgb(149,184,231);border-style:solid solid solid none;border-width: 1px;height:30px;'
			};
		},
		formatter:function(value,row,index){ 
		if(row.id == "footer"){
			return " ";
		}
		else{
			row.levelofdifficulty = value;
			for(var i=0; i<levelPercentData.length; i++){    
				if (levelPercentData[i].id == value){
					return levelPercentData[i].text;    
				}
			}    
			return value;  
		}
		}},
	{field:'manhours',title:'<spring:message code="syspages.workjob.labour.ManHours"/>',width:60,align:'center',
		styler: function(index,row){
			if (row.id != "footer" && row.manhours==0){
				return 'background-color:#FFCCCC;';
			}
		}},
	{field:'labourrate',title:'<spring:message code="syspages.workjob.labour.LabourRate"/>',width:60,align:'center',
		styler: function(index,row){
			if (row.id != "footer" && row.labourrate==0){
				return 'background-color:#FFCCCC;';
			}
		},
		formatter:function(value,row,index){
		if(row.id == "footer"){
			return " ";
		}
		else{
			return "$" + value;
		}    
		}}, 				      	
	{field:'total',title:'<spring:message code="syspages.workjob.labour.LabourTotal"/>',width:100,align:'center',
		styler: function(index,row){
			if (row.id != "footer" && row.total==0){
				return 'background-color:#FFCCCC;';
			}
		},
		formatter:function(value,row,index){
			return "$" + value;    
		}},
]] ,
</span>

• 对显示数据做样式更改:styler

<span style="font-size:18px;">styler: function(index,row){
	if (row.id != "footer" && row.total==0){
		return 'background-color:#FFCCCC;';
	}
},</span>

• 对返回数据做统计:onLoadSuccess:function()

<span style="font-size:18px;">onLoadSuccess:function(data){
	$('#easydiv'+num).attr("mainid",data.rows[0].jobcontentmainid);
	var data = $('#easydiv'+num).datagrid('getData');
	$('#divdiv'+num).css("height",35*(data.rows.length+5));
	$('#easydiv'+num).datagrid('resize');
	var rows = $('#easydiv'+num).datagrid('getFooterRows');
	rows[0]['productusage'] = '<strong> Workers </strong>';
	rows[0]['itemqty'] = '<strong> Weeks </strong>';
	rows[0]['buildlabourqty'] = '<strong> Days </strong>';
	rows[1]['productname'] = '<strong>Own labour Estimate </strong><input TYPE ="checkbox" id="estimate' + num +'" name ="estimate'+ num  +'" onClick="estimate(' + num +')"/>';
	rows[1]['productusage'] = '<INPUT TYPE="TEXT" value="0"  id="workers' + num +'" name="workers'+num +'" style="width: 100px" onBlur = "caculate(' + num +')" onkeyup="if(isNaN(value))execCommand(\'undo\')" />';
	rows[1]['itemqty'] = '<INPUT TYPE="TEXT"  value="0"  id="weeks' + num +'" name="weeks'+num +'" style="width: 60px" onBlur = "caculate(' + num +')" onkeyup="if(isNaN(value))execCommand(\'undo\')"/>';
	rows[1]['buildlabourqty'] = '<INPUT TYPE="TEXT"  value="0" s id="days' + num +'" name="days'+num +'" style="width: 60px" onBlur = "caculate(' + num +')" onkeyup="if(isNaN(value))execCommand(\'undo\')"/>';
	$('#easydiv'+num).datagrid('reloadFooter');
	if(data){
		$.each(data.rows, function(index, item){
			if(item.subcontractorlabour == 1){
				$('#easydiv'+num).datagrid('checkRow', index);
				var $tr = $('#easydiv'+num).prev().find("tr[datagrid-row-index=" + index + "]");
				$tr.css("background", "#ADD8E6");
			}
		});
	}
	var sizeOfShowtable = NumOfShowtable.length;
	NumOfShowtable[sizeOfShowtable] = num;
	$("[name = ck]:checkbox").bind("click",function () {
		var flag = $(this).prop("checked");
		var $tr = $(this).closest("tr");
		var rowindex = $tr.attr("datagrid-row-index");
		persubContractor(num,parseInt(rowindex),flag);
		if (flag) {
			$tr.css("background", "#ADD8E6");
		} else {
			$tr.css("background", "auto");
		}
	});	
}</span>

创建方式：（easyui官方文档）：

• 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。

<table class="easyui-datagrid">   
    <thead>   
        <tr>   
            <th data-options="field:'code'">编码</th>   
            <th data-options="field:'name'">名称</th>   
            <th data-options="field:'price'">价格</th>   
        </tr>   
    </thead>   
    <tbody>   
        <tr>   
            <td>001</td><td>name1</td><td>2323</td>   
        </tr>   
        <tr>   
            <td>002</td><td>name2</td><td>4612</td>   
        </tr>   
    </tbody>   
</table> 

• 通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px"   
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
    <thead>   
        <tr>   
            <th data-options="field:'code',width:100">编码</th>   
            <th data-options="field:'name',width:100">名称</th>   
            <th data-options="field:'price',width:100,align:'right'">价格</th>   
        </tr>   
    </thead>   
</table>  

• 使用Javascript去创建DataGrid控件。(即：上面介绍的动态创建的方式)。

html:

<span style="font-size:18px;"><table id="dg"></table> </span>

JS：

$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',width:100},    
        {field:'name',title:'Name',width:100},    
        {field:'price',title:'Price',width:100,align:'right'}    
    ]]    
});  

总结：

之前没怎么接触过js代码，所以每次做项目都会有一种恐惧感，每次都想提高，但是每次都会害怕，所以每次都绕道而行。实习总结了一句话：我们都愿意绕着问题跑，可若是绕开了，我们怎么提高啊……