EasyUI，子从表模式，进行数据编辑
在edit.js文件中，对数据列开启编辑状态，提交时关闭编辑状态，并验证所填数据是否正确。
$(function() {
examplegrid = $("#grid").datagrid({
url : 'data/detailData.do',
showFooter : true,
border : false,
fit : true,
fitColumns : false,
nowrap : true,
rownumbers : true,
singleSelect : false,
frozenColumns : [ [ {
field : "ck",
width : 50,
checkbox : true
}, {
title : "操作",
field : "action",
width : 80,
halign : "center",
align : "center",
formatter : formatAction
} ] ],
columns : [ [ {
title : "姓名",
field : "name",
width : 110,
halign : "center",
align : "center",
sortable : true,
editor : {
type : 'text'
}
}, {
title : "年龄",
field : "age",
width : 110,
halign : "center",
align : "center",
sortable : true,
editor : {
type : 'text'
}
} ] ],
onBeforeEdit : function(index, row) {
row.editing = true;// 标识是否编辑
examplegrid.datagrid('refreshRow', index);// 将上面的标识写入行数据中
},
onAfterEdit : function(index, row) {
row.editing = false;
examplegrid.datagrid('refreshRow', index);
},
onCancelEdit : function(index, row) {
row.editing = false;
examplegrid.datagrid('refreshRow', index);
},
onClickRow : function(rowIndex, rowData) {
editrow_Index(rowIndex);
}
});
$('#form').form({
url : 'data/detailadd.do',
onSubmit : function() {
parent.$.messager.progress({
title : '提示',
text : '数据处理中，请稍后....'
});
var isValid = $('#form').form('validate');
if (!isValid) {
parent.$.messager.progress('close');
return false;
}
var rows = xbticketgrid.datagrid('getRows');
if (rows && rows.length > 0) {
var gridValid = ticketendEdit();// // 退出编辑并验证必填信息是否填写
if (gridValid != 0) {
parent.$.messager.progress('close');
parent.$.messager.alert('错误', "第" + gridValid + "行的填写不正确");
beginEdit();
return false;
}
return true;
} else {
parent.$.messager.progress('close');
parent.$.messager.alert('错误', "请先添加个人信息后再保存");
return false;
}
},
success : function(result) {
parent.$.messager.progress('close');
try {
data = eval("(" + result + ")");// 将JSON字符串转换成对象
if (data && data.success) {
if (data.msg && data.msg != "")
parent.$.messager.alert('提示', data.msg);
else
parent.$.messager.alert('提示', "添加成功");
parent.$.modalDialog.openner_grid.datagrid('reload');// 刷新Gird数据
parent.$.modalDialog.handler.dialog('close');// 关闭当前模式窗口
} else
parent.$.messager.alert('错误', data.msg);// 操作失败
} catch (e) {
}
}
});
});
// 操作列格式化
function formatAction(value, row, index) {
if (row.editing) {
var s = '<a href="javascript:void(0);" onclick="saverow(this)">确认</a> ';
var c = '<a href="javascript:void(0);" onclick="cancelrow(this)">取消</a>';
return s + c;
} else {
var e = '<a href="javascript:void(0);" onclick="editrow(this)">修改</a> ';
return e;
}
}
// 编辑单行
function editrow(target) {
var index = getRowIndex(target);
examplegrid.datagrid('beginEdit', index);
}
// 编辑单行
function editrow_Index(index) {
examplegrid.datagrid('beginEdit', index);
editIndex_invit = index;
}
// 保存单行
function saverow(target) {
var index = getRowIndex(target);
examplegrid.datagrid('endEdit', index);
}
// 取消编辑
function cancelrow(target) {
var index = getRowIndex(target);
examplegrid.datagrid('cancelEdit', index);
}
// 从tr上获取行号
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
// 先验证编辑行中的数据，无错误后，退出所有的编辑模式
function ticketendEdit() {
var validate = 0;// 记录没有填写数量的行
var rows = xbticketgrid.datagrid('getRows');
try {
for ( var i = 0; i < rows.length; i++) {
if (xbticketgrid.datagrid('validateRow', i)) {
xbticketgrid.datagrid('endEdit', i);
} else {
validate = i + 1;// 行号
}
}
} catch (e) {
}
return validate;// 返回false表示有错误无法退出编辑模式
}
// 开启编辑
function beginEdit() {
var rows = examplegrid.datagrid('getRows');
try {
for ( var i = 0; i < rows.length; i++) {
examplegrid.datagrid('beginEdit', i);
}
} catch (e) {
}
}