上图是页面的部分效果,因为每次输入的的数据很多字段是重复的, 偶尔需要修改。
我想做到得效果是在红圈处增加一个按钮,每点击下,在下面的表单初始化一新行,数据为该行上一行的数据。
代码如下:
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- 引入JSCal2-1.7 --> <script language="JavaScript" src="/myproject/plugins/JSCal2-1.7/src/js/jscal2.js"></script> <script language="JavaScript" src="/myproject/plugins/JSCal2-1.7/src/js/lang/cn.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="/myproject/plugins/JSCal2-1.7/src/css/jscal2.css" /> <script type="text/javascript" src="/myproject/plugins/EventUtil/EventUtil.js"></script> <link rel="stylesheet" href="/myproject/plugins/slick.grid/css/slick.grid.css" type="text/css" media="screen" charset="gb2312" /> <link rel="stylesheet" href="/myproject/plugins/slick.grid/css/examples.css" type="text/css" media="screen" charset="gb2312" /> <link rel="stylesheet" href="/myproject/plugins/jquery-message/jquery.message.css" type="text/css" media="screen" charset="gb2312" /> <!-- 引入jQuery --> <script language="JavaScript" src="/myproject/plugins/jQuery/js/jquery-1.3.2.min.js"></script> <!-- 引入JSON --> <script language="JavaScript" src="/myproject/plugins/json/json2.js"></script> <!-- 引入Slick.Grid --> <script language="JavaScript" src="/myproject/plugins/slick.grid/js/firebugx.js"></script> <script language="JavaScript" src="/myproject/plugins/slick.grid/js/jquery.getScrollbarWidth.js"></script> <script language="JavaScript" src="/myproject/plugins/slick.grid/js/jquery.rule-1.0.1-min.js"></script> <script language="JavaScript" src="slick.editors.js"></script> <script language="JavaScript" src="/myproject/plugins/slick.grid/js/slick.grid.js"></script> <script language="JavaScript" src="/myproject/plugins/slick.grid/js/slick.globaleditorlock.js"></script> <script language="JavaScript" src="/myproject/plugins/validator/validator.js"></script> <!-- 引入jquery-message --> <script src="/myproject/plugins/jquery-message/jquery.message.js" type="text/javascript"></script> <style> #result { background: white; outline: 1px; border: 1px solid gray; width:99%; height:400px; } </style> <script> /////////////////////////////////////////////////////////////////////////// //////////////////////////////全局信息定义///////////////////////////////// //数据状态 var RAW = 0; //原始 var NEW = 1; //新增 var MODIFIED = 2; //被修改 var DELETED = 3; //删除 var G_PrevRow = -1; //前一工作行 var G_LastRow = -1; //最后提交的行 var G_IsModified = false;//文档状态 var G_IsReady = true; //工作行是否处理就绪 var G_Current = new Date();//当前时间 var G_GridData = [];//表格基础数据 var G_DeletedRows = [];//需要服务器提交行ID列表 var G_DeleteItemRowNumbers = [];//需要服务器提交行序号列表 var G_PositionList = []; <#if position?exists> <#list position as item> G_PositionList[G_PositionList.length]="${item.position}"; </#list> </#if> var G_Grid; var G_Columns = [ {id:"select", name:"<center><INPUT id='selectAll' type='checkbox' value='true' class='editor-checkbox' hideFocus></center>", width:30, formatter:SelectCellFormatter}, {id:"persName", name:"姓名", field:"persName", editor:TextCellEditor, validator : requiredFieldValidator}, {id:"sex", name:"性别", field:"sex", editor:SexSelectCellEditor, validator : requiredFieldValidator}, {id:"nation", name:"民族", field:"nation", editor:TextCellEditor}, {id:"birthPlace", name:"籍贯", field:"birthPlace", editor:TextCellEditor}, {id:"birthday", name:"出生年月", field:"birthday", width:120,editor:DateCellEditor}, {id:"idCard", name:"工种", field:"idCard", editor:PositionSelectCellEditor, validator : requiredFieldValidator}, {id:"workTime", name:"参加工作时间", field:"workTime", width:120,editor:DateCellEditor, validator : requiredFieldValidator}, {id:"position", name:"职位", field:"position", editor:TextCellEditor}, {id:"joinOrg", name:"所在部门", field:"joinOrg", editor:TextCellEditor, validator : requiredFieldValidator}, {id:"joinTime", name:"加入本部门时间", field:"joinTime", width:120,editor:DateCellEditor}, {id:"political", name:"政治面貌", field:"political", editor:TextCellEditor}, {id:"education", name:"文化程度", field:"education", editor:TextCellEditor}, {id:"techHera", name:"技术等级", field:"techHera", editor:TextCellEditor}, {id:"address", name:"住址", field:"address", editor:TextCellEditor}, {id:"tel", name:"联系电话", field:"tel", editor:TextCellEditor} ]; var G_Options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false }; //////////////////////////////全局信息定义结束///////////////////////////////// /////////////////////////////////////////////////////////////////////////// //文档加载完成 $(function() { $("#query").click(function(){ if(G_IsModified) { if(!confirm("数据已经修改,要放弃修改吗?")) { return; } } initData(); query(); }); init(); $("#view").click(function(){ view(); }); $("#account").click(function(){ account(); }); $("#save").click(function(){ if(validateCurrentRow()) { //alert(JSON.stringify(G_GridData)); //commitDelete(G_DeletedRows); //commitUpdate(G_GridData); //commitAdd(G_GridData); } }); //删除所选 $("#delete").click(function(){ if(validateCurrentRow()) { //全部待删除记录行序号列表 var deleteItems = []; $(":input[name='item'][checked='true']").each(function(){ deleteItems[deleteItems.length] = $(this).attr("id"); }); //排序待删除行序号 deleteItems.sort(sortNumber); for(var i = deleteItems.length; i >0; i--) { var rowNumber = deleteItems[i - 1]; var row = G_GridData[rowNumber]; if(NEW != row.flag) { G_DeletedRows[G_DeletedRows.length] = row.persId; G_DeleteItemRowNumbers[G_DeleteItemRowNumbers.length] = rowNumber; } else { G_Grid.removeRow(rowNumber); G_GridData.splice(rowNumber, 1); } } //向服务器提交删除请求 $.post("/myproject/cm/zyn/cm_perInfo/deleteBatch.action", { "queryCondition.items": JSON.stringify(G_DeletedRows) }, function(data){ G_DeletedRows.splice(0, G_DeletedRows.length); if(!data.result) { $().message(data.message + "<a href='javascript:$().message(data.detail)'>\>\></a>"); } else { $().message(data.message + "<a href='javascript:$().message(data.detail)'>\>\></a>"); //服务器响应删除成功后,删除表格中的实际数据 for(var i = 0; i < G_DeleteItemRowNumbers.length; i++) { G_Grid.removeRow(G_DeleteItemRowNumbers[i]); G_GridData.splice(G_DeleteItemRowNumbers[i], 1); } } G_DeleteItemRowNumbers.splice(0, G_DeleteItemRowNumbers.length); G_Grid.resizeCanvas(); G_Grid.render(); }, "json" ); G_Grid.resizeCanvas(); G_Grid.render(); } }); }) //初始化全局控制数据 function initData() { G_PrevRow = -1; G_IsModified = false; G_Current = new Date() G_GridData = []; G_DeletedRows = []; G_DeleteItemRowNumbers = []; } //初始化页面 function init() { query(); } //批量提交更新记录 function commitUpdate(items) { var updateList = []; for(var i = 0; i < items.length; i++) { if(items[i].flag == MODIFIED) { updateList[updateList.length] = items[i]; } } if(updateList.length > 0) { $.post("/myproject/cm/zyn/cm_perInfo/updateBatch.action", { "queryCondition.items": encodeURIComponent(JSON.stringify(updateList)) }, function(data){ if(!data.result) { $().message(data.message.message); } else { items.splice(0, items.length); } }, "json" ); } } //批量提交新增记录 function commitAdd(items) { var newList = []; for(var i = 0; i < items.length; i++) { if(items[i].flag == NEW) { newList[newList.length] = items[i]; } } alert(JSON.stringify(newList)); if(newList.length > 0) { $.post("/myproject/cm/zyn/cm_perInfo/addBatch.action", { "queryCondition.items": encodeURIComponent(JSON.stringify(newList)) }, function(data){ if(!data.result) { alert(data.message); } else { items.splice(0, items.length); } }, "json" ); } } //提交删除操作 function commitDelete(items) { $.post("/myproject/cm/zyn/cm_perInfo/deleteBatch.action", { "queryCondition.items": JSON.stringify(items) }, function(data){ if(!data.result) { alert(data.message); } else { items.splice(0, items.length); } }, "json" ); } //按照当前条件查询 function query() { $.post("/myproject/cm/zyn/cm_perInfo/searchAllPer.action", { "queryCondition.page": 1, "queryCondition.startTime": $("#startTime").val(), "queryCondition.endTime": $("#endTime").val() }, function(data){ G_GridData = data; initDataState(G_GridData); if(G_Grid)G_Grid.destroy(); G_Grid = new SlickGrid($("#result"), G_GridData, G_Columns, G_Options); G_Grid.onValidationError = function(elem, validationResults, row, cell, cellInfo) { $().message(validationResults.msg); } //新增一行事件处理 G_Grid.onAddNewRow = function(cellInfo, value) { if(G_IsReady) { G_IsModified = true; var item = {persId : "-1", flag : NEW, persName : "", sex : "", nation : "", birthPlace : "", birthday : formatDate(G_Current), idCard : "", workTime : formatDate(G_Current), position : "", joinOrg : "", joinTime : formatDate(G_Current),political : "", education : "", techHera : "", address : "", tel : "" }; item[cellInfo.field] = value; data[data.length] = item; G_Grid.resizeCanvas(); G_Grid.render(); G_Grid.updateRow(data.length-1); } } //工作行变化事件处理 G_Grid.onSelectedRowsChanged = function(){ G_IsReady = false;//工作行处理开始 currentRow = G_Grid.getSelectedRows(); if(G_PrevRow != -1 && G_GridData[G_PrevRow] && G_PrevRow != currentRow[0]) { if(validateRow(G_Grid, G_PrevRow, G_GridData[G_PrevRow], G_Columns)) { G_IsReady = true; saveLastRow(); G_PrevRow = currentRow; } } else { G_IsReady = true; G_PrevRow = currentRow; } } //全部选择/取消 $("#selectAll").click(function(){ var state = $(this).attr("checked"); $("input[name='item']").each(function(){ $(this).attr("checked", state); }); }); }, "json" ); } //保存最近一行 function saveLastRow() { G_LastRow = G_PrevRow; var row = G_GridData[G_PrevRow]; if(row) { switch(row.flag) { case NEW: $.post("/myproject/cm/zyn/cm_perInfo/add.action", { "queryCondition.items": encodeURIComponent(JSON.stringify(row)) }, function(data){ G_IsModified = false; $().message(data.message); if(data.result) { G_GridData[G_LastRow].persId = data.detail; G_GridData[G_LastRow].flag = RAW; } }, "json" ); break; case MODIFIED: $.post("/myproject/cm/zyn/cm_perInfo/update.action", { "queryCondition.items": encodeURIComponent(JSON.stringify(row)) }, function(data){ G_IsModified = false; if(!data.result) { $().message(data.message); } else { $().message(data.message + "ddf" + "<a href='javascript:$().message(data.detail)'>xx</a>"); G_GridData[G_LastRow].flag = RAW; } }, "json" ); break; default: break; } } } //为按钮校验当前行 function validateCurrentRow() { var result = true; G_Grid.commitCurrentEdit(); if(!validateRow(G_Grid, G_PrevRow, G_GridData[G_PrevRow], G_Columns)) { result = false; } return result; } //对row行进行有效性检验,失败后定位到失败cell function validateRow(grid, rowNumber, row, columnDef) { var result = true; if(columnDef && rowNumber > -1) { for(var i = 0; i < columnDef.length; i++) { if(columnDef[i].validator && columnDef[i].field) { var validationResults = columnDef[i].validator(row[columnDef[i].field]); if(!validationResults.valid) { var currentCellNode = grid.gotoCell(rowNumber, i); $(currentCellNode).addClass("invalid"); if (grid.onValidationError) grid.onValidationError(currentCellNode, validationResults, rowNumber, i, columnDef[i]); result = false; break; } } } } return result; } function sortNumber(a, b) { return a - b } function initDataState(data) { for(var i = 0; i < data.length; i++) { data[i]["flag"] = RAW; } } //获取当前日期所处报表段的起始日期 function generateStartTime(current) { var year = current.getYear(); year = (year < 1900) ? (1900 + year) : year; var month = current.getMonth() + 1; var day = 0; var segment = (current.getDate() - 1) / 5; segment = segment > 5 ? 5 : Math.floor(segment); day = segment * 5 + 1; return year + "-" + month + "-" + day; } //获取当前日期所处报表段的结束日期 function generateEndTime(current) { var year = current.getYear(); year = (year < 1900) ? (1900 + year) : year; var month = current.getMonth() + 1; var day = ""; var segment = (current.getDate() - 1) / 5; segment = segment > 5 ? 5 : Math.floor(segment); day = segment * 5 + 5; return year + "-" + month + "-" + day; } //生成YY-MM-DD格式的日期字符串 function formatDate(date) { var year = date.getYear(); var month = date.getMonth() + 1; var day = date.getDate(); return year + "-" + month + "-" + day; } function view(){ window.self.location = "goSearch.action"; } function account(){ window.self.location = "goAccountPer.action"; } ///////////////////////检验函数//////////////////////////////////////////////// function requiredFieldValidator(value){ return isEmpty(value) ? {valid:false, msg:"不能为空"} : {valid:true, msg:null}; } </script> </head> <body> <#if output?exists> <form id="search"> <div class="title" align="center"> 煤质人员基本信息</div> <div class="toolbarTop"> <div id="tools"> <tr> <td width="50"><input type="button" id="delete" value="删除"/></td> <td width="50"><input type="button" id="view" value="查询"/></td> <td width="50"><input type="button" id="account" value="生成台账"/></td> </div> <div id="pagination" style="float : right;"></div> </div> </form> <div id="result"></div> </#if> </body> </html>