EasyUI，子从表模式，进行数据编辑

2019独角兽企业重金招聘Python工程师标准>>>

在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) {
 }
}

 

转载于:https://my.oschina.net/chinamummy29/blog/311732