js動態創建DataGrid

和上篇1樣，使用JS動態的創建DataGrid也是1件非常簡單的事情，以項目中的實例來做說明，固然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代碼，所以每次做項目都會有1種恐懼感，每次都想提高，但是每次都會懼怕，所以每次都繞道而行。實習總結了1句話：我們都愿意繞著問題跑，可若是繞開了，我們怎樣提高啊……

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈