EasyUI DataGrid 实现单行/多行编辑功能
2017-02-22 22:30
357 查看
要实现
单行编辑
Note:
比如上面的代码
多行编辑
多行编辑的时候可以一次提交大量数据到后台,是使用表单的方式提交的。后台获取到的数据也需要进行处理,因此这里也贴一下后台代码吧。
前端代码:
PS:既然是多行输入,肯定是想一次性连续编辑多行再提交数据了,那就意味着要一次性开启多行的编辑状态。但是我发现当行较多时一次性打开全部行的编辑状态会很慢,导致页面卡一下,一次性关闭全部编辑状态同理也是。这个问题没有找到很好的解决办法。于是我改成了鼠标单击某一行的时候就开启该行的编辑状态,再点击其他行时就关闭上次点击行,然后开启新点击的行。这样不至于让页面变慢,而且输入方式也还能接受吧。
当然大家有更好的解决方法欢迎留言哈~~
后台代码【C#】
Tips:一个获取当前编辑行索引的方法
参考文章:easyui datagrid 批量编辑和提交
EasyUI DataGrid的可编辑很简单,在需要编辑的列添加
editor【编辑器】就可以了。
单行编辑
// 初始化数据列表 function initDatagrid() { $('#dg').datagrid({ loadMsg: '数据加载中请稍后……', striped: true, url: '/api/Employee', method: "get", striped: true, border: true, selectOnCheck: false, checkOnSelect: false, remoteSort: true, singleSelect: true, // 只允许选中一行 idField: 'EmployeeID', pagination: true, rownumbers: false, fitColumns: true, pageSize: 100, // 每页显示的记录条数,默认为100 pageList: [20, 50, 100, 200, 500], // 设置可选的每页记录条数的列表 columns: [[ { field: 'ck', checkbox: true }, { field: 'Num', title: "编号", width: 30, sortable: false }, { field: 'Name', title: "姓名", width: 80, sortable: true, editor: { type: 'validatebox', options: { required: true, missingMessage: '请输入姓名' } } }, { field: 'Sex', title: "性别", width: 50, sortable: true, formatter: formatSex, // 编辑器 editor: { type: 'combobox', // 指明控件类型 // options里面的内容可选 options: { textField: 'sex', valueField: 'value', data: [ { sex: '男', value: 0 }, { sex: '女', value: 1 } ], required: true, // 是否必填 missingMessage: '请选择性别' } } } ... ]], // 工具栏 toolbar: [ { text: "新增", iconCls: "icon-add", handler: function () { if (isEditing == true) { $.messager.alert('操作提示', '您有正在编辑的数据尚未保存,请先保存或取消编辑!', 'warning'); } else { // 在第一行编辑新增数据 $('#dg').datagrid('insertRow', { index: 0, row: { Name: '', Sex: '', EntryDate: '', LeaveDate: '', OMPDate: '' } }); $("#dg").datagrid("beginEdit", 0); isEditing = true; editRow = 0; isEdit = false; } } }, { text: "编辑", iconCls: "icon-edit", handler: function () { var row = $('#dg').datagrid('getSelected'); var rowIndex = $('#dg').datagrid('getRowIndex', row); if (isEditing == true && rowIndex != editRow) { $.messager.alert('操作提示', '您有正在编辑的数据尚未保存,请先保存或取消编辑!', 'warning'); } else if (rowIndex > -1) { $('#dg').datagrid("beginEdit", rowIndex); isEditing = true; editRow = rowIndex; } else { $.messager.alert('操作提示', '请先选择要编辑的行!', 'info'); } isEdit = true; } }, { text: "保存", iconCls: "icon-save", handler: function () { $('#dg').datagrid("endEdit", editRow); } }, { text: "取消", iconCls: "icon-cancel", handler: function () { $('#dg').datagrid("cancelEdit", editRow); isEditing = false; $('#dg').datagrid("reload"); } } ], onBeforeLoad: function (params) { // 添加参数 params.name = $("#queryName").val(); params.year = $("#queryYear").numberbox("getValue"); params.month = $("#queryMonth").numberbox("getValue"); }, // 完成编辑时发送请求保存数据到后台 onAfterEdit: function (rowIndex, rowData, changes) { $(this).datagrid("beginEdit", rowIndex); // 这句如果注释掉下一行的ed就获取不到值 var ed = $(this).datagrid('getEditor', { index: rowIndex, field: 'Sex' }); var sex = ed.target.combobox('getValue'); editRow = rowIndex; isEditing = false; Employee.save(rowData, sex); } }); }
Note:
datagrid的
getEditor方法要在那一行是编辑状态下才能获取到编辑器,所以要先调用
beginEdit方法开启行编辑状态。
比如上面的代码
onAfterEdit函数里面如果
$(this).datagrid("beginEdit", rowIndex);这句注释掉了,下一行的使用
getEditor就获取不到值,
ed得到的是
null。
多行编辑
多行编辑的时候可以一次提交大量数据到后台,是使用表单的方式提交的。后台获取到的数据也需要进行处理,因此这里也贴一下后台代码吧。
前端代码:
// 初始化数据列表 function initDatagrid() { $('#dg').datagrid({ loadMsg: '数据加载中请稍后……', striped: true, url: '/api/Attendance', sortName: 'ID', sortOrder: 'desc', method: "get", striped: true, border: true, selectOnCheck: false, checkOnSelect: false, remoteSort: true, singleSelect: true, idField: 'ID', pagination: true, rownumbers: false, pageSize: 100, // 每页显示的记录条数,默认为100 pageList: [20, 50, 100, 200, 500], // 设置可选的每页记录条数的列表 fitColumns: true, columns: [[ { field: 'Num', title: "编号", width: 34, sortable: false }, { field: 'Employee', title: "人员", width: 64, sortable: true }, { field: 'Extra', title: "加班<br>(天)", width: 50, sortable: true, // 只有添加了editor的列才是可编辑的 editor: { type: 'numberbox', options: { precision: 3, onChange: function () { var rowIndex = getRowIndex(this); updateEstimatedDays(rowIndex); } } } }, { field: 'UnpaidVacate', title: "请假<br>(天)", width: 50, sortable: true, editor: { type: 'numberbox', options: { precision: 3, onChange: function () { var rowIndex = getRowIndex(this); updateEstimatedDays(rowIndex); } } } }, // 此处省略部分列... { field: 'Year', title: "年份", width: 37, sortable: false }, { field: 'Month', title: "月份", width: 34, sortable: false }, { field: 'Remark', title: "备注", width: 260, sortable: false, editor: { type: 'textbox' } } ]], // 添加工具栏 toolbar: [ { text: "生成基础数据", iconCls: "icon-add", // 定义图标样式 handler: function () { var year = $('#queryYear').numberbox('getValue'); var month = $('#queryMonth').numberbox('getValue'); $.get('/api/Attendance?year=' + year + '&month=' + month, function (data) { if (!data.State) { $.messager.alert('警告', data.Data, 'info'); } else { $('#dg').datagrid('reload'); } }); } }, { text: "保存", iconCls: "icon-save", // 批量提交多条已修改数据到后台 handler: function () { // 关闭最后一个当前编辑行,否则最后一行的数据不会被getChanges方法捕获到 $('#dg').datagrid('endEdit', editRow); // 修改过的行突出显示 if (editRow > 0) { var element = document.getElementById("datagrid-row-r1-2-" + editRow); element.style.backgroundColor = "#d6e486"; } // 如果有数据修改过才进行提交 if ($('#dg').datagrid('getChanges').length) { // 获取已修改的数据 var updated = $('#dg').datagrid('getChanges', "updated"); var effectRow = new Object(); if (updated.length) { effectRow["updated"] = JSON.stringify(updated); } // 后台处理数据时先显示一个提示框,防止用户多次点击【保存】重复提交数据 $.messager.progress({ title: '提示', msg: '正在保存,请稍候……', }); var year = parseInt($('#queryYear').numberbox('getValue')); var month = parseInt($('#queryMonth').numberbox('getValue')); $.ajax({ type: "put", dataType: "json", data: effectRow, url: "/api/Attendance?year=" + year + "&month=" + month, success: function (data) { if (!data.State) { $.messager.alert('警告', data.Data, 'info'); } else { $('#dg').datagrid('reload'); editRow = -1; } $.messager.progress('close'); $('#dg').datagrid('unselectAll'); }, error: function () { $.messager.alert('警告', data.Data, 'info'); $.messager.progress('close'); $('#dg').datagrid('unselectAll'); } }); } } }, { text: "取消", iconCls: "icon-cancel", handler: function () { endEdit(editRows); $('#dg').datagrid('reload'); $('#dg').datagrid('unselectAll'); editRow = -1; } } ], onBeforeLoad: function (params) { params.employeeID = $("#queryEmployee").combobox("getValue"); params.year = $("input[name='queryYear']").val() != "" ? $("input[name='queryYear']").val() : -1; params.month = $("input[name='queryMonth']").val() != "" ? $("input[name='queryMonth']").val() : -1; params.sortField = sortField; params.sortOrder = sortOrder; }, // 鼠标单击某一行是开启该行的编辑状态 onClickRow: function (rowIndex, rowData) { if (canEdit == true) { $('#dg').datagrid('endEdit', editRow); if (rowIndex > 0) { $('#dg').datagrid("beginEdit", rowIndex); } // 修改过的行突出显示 if (editRow > 0) { var element = document.getElementById("datagrid-row-r1-2-" + editRow); element.style.backgroundColor = "#d6e486"; } editRows.push(rowIndex); editRow = rowIndex; } } }); }
PS:既然是多行输入,肯定是想一次性连续编辑多行再提交数据了,那就意味着要一次性开启多行的编辑状态。但是我发现当行较多时一次性打开全部行的编辑状态会很慢,导致页面卡一下,一次性关闭全部编辑状态同理也是。这个问题没有找到很好的解决办法。于是我改成了鼠标单击某一行的时候就开启该行的编辑状态,再点击其他行时就关闭上次点击行,然后开启新点击的行。这样不至于让页面变慢,而且输入方式也还能接受吧。
当然大家有更好的解决方法欢迎留言哈~~
后台代码【C#】
/// <summary> /// 批量修改考勤数据 /// </summary> /// <returns></returns> public ResponseModel Put(int year, int month) { ResponseModel result = new ResponseModel(); try { // 从表单获取提交的数据 string updated = System.Web.HttpContext.Current.Request.Form["updated"]; // 反序列化json对象 JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); List<Attendance> attendanceList = jsSerializer.Deserialize<List<Attendance>>(updated); if (attendanceList.Count > 0) { if (m_AttendanceBLL.Update(attendanceList, year, month) { result.State = ResponseModel.ResponseState.Success; result.Data = true; } else { result.Data = "修改考勤数据失败"; } } } catch (Exception ex) { result.Data = "修改考勤数据失败"; LogHelper.WriteLog(m_ModelName + "修改考勤数据失败:" + ex.Message, ex); } return result; }
Tips:一个获取当前编辑行索引的方法
// 扩展easyui datagrid方法,获取当前编辑行的索引 // target: 当前编辑元素 function getRowIndex(target) { var tr = $(target).closest("tr.datagrid-row"); return parseInt(tr.attr("datagrid-row-index")); }
参考文章:easyui datagrid 批量编辑和提交
相关文章推荐
- easyui-edatagrid.js实现回车键结束编辑功能的实例
- easyui-edatagrid.js实现回车键结束编辑功能
- easyui-edatagrid.js实现回车键结束编辑功能
- easyui的datagrid用js插入数据等编辑功能的实现
- easyui datagrid 行编辑功能
- EasyUI DataGrid使用formatter属性实现自定义功能
- easyui实现可新增不可编辑的datagrid及动态配置列隐藏/显示
- (VB.net) 利用DataGrid实现查找, 编辑, 修改, 更新, 删除的功能。
- 实例:SSH结合Easyui实现Datagrid的批量删除功能
- easyui datagrid edit 取消单行,多行文本框编辑
- EasyUI-DataGrid多行动态选择性合并算法实现
- 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能
- [VB.NET]利用vb.net创建一个完全可编辑的DataGrid,从而实现操作Access数据库进行增,删,改的功能,前提是不用任何其他的Button
- EasyUI DataGrid使用formatter属性实现自定义功能
- easyui实现datagrid行内编辑
- 一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新
- 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现添加、编辑、删除(三)
- 一段实现DataGrid的“编辑”、“取消”功能脚本,目的是不产生页面刷新
- datagrid 编辑排序功能的实现