js动态创建DataGrid
来源:互联网 发布:喀秋莎微课制作软件 编辑:程序博客网 时间:2024/05/18 00:55
和上篇一样,使用JS动态的创建DataGrid也是一件非常简单的事情,以项目中的实例来做说明,当然easyui的官网文档也有,例子很简单:
①从后台获取数据
②根据需要显示数据
③根据需要对显示的数据做样式
④对显示的数据做合计
核心代码:
- 从后台获取数据: url:getRootPath()+"/labour/contentDetail.do?headid="+headid
<span style="font-size:18px;">@RequestMapping("/contentDetail.do")@Override@ResponseBodypublic 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代码,所以每次做项目都会有一种恐惧感,每次都想提高,但是每次都会害怕,所以每次都绕道而行。实习总结了一句话:我们都愿意绕着问题跑,可若是绕开了,我们怎么提高啊……
0 1
- js动态创建DataGrid
- 动态创建 DataGrid 列
- 动态创建DataGrid 列
- wpf动态创建DataGrid
- 动态创建DataGrid的模版列
- 动态创建DataGrid的模版列
- 动态创建DataGrid的模版列
- (引用)动态创建DataGrid的模版列
- 动态创建DataGrid的模版列
- 动态创建DataGrid模版列,绑定列
- 动态创建DataGrid的模版列
- 动态创建DataGrid的模版列
- 动态创建DataGrid的模版列
- 动态创建DataGrid的模版列
- FLEX中使用AS动态创建DataGrid
- FLEX如何动态创建DataGrid组件详解
- js动态创建表格
- js动态创建控件
- googel guava学习
- 欢迎使用CSDN-markdown编辑器
- HDU 2111Saving HDU
- acdream 1704(暴力)
- iOS中把新建的Controller的XIB与之类关联
- js动态创建DataGrid
- hdu 1069 dp入门 最长上升子序列变形
- lucene学习之中文文本分析
- HDU 2124 Repair the Wall
- Linux高级编程复习笔记 第二章 映射虚拟内存 mmap gcc 静态库 动态库
- 简单实现图片可控旋转效果
- 新浪微博开发之二十二(微博请求参数模型)
- FZU1453
- 将时间搓转为月-日,小时 :分 格式