上图是页面的部分效果，因为每次输入的的数据很多字段是重复的， 偶尔需要修改。
我想做到得效果是在红圈处增加一个按钮，每点击下，在下面的表单初始化一新行，数据为该行上一行的数据。
代码如下：
<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>
