问题描述
- easyui datagrid 编辑行后如何保存
-
$(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量：当前编辑的行 datagrid = $("#dd").datagrid({ url: 'UserCenter.aspx', //请求的数据源 iconCls: 'icon-save', //图标 pagination: true, //显示分页 pageSize: 15, //页大小 pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数 fit: true, //datagrid自适应宽度 fitColumn: false, //列自适应宽度 striped: true, //行背景交换 nowap: true, //列内容多时自动折至第二行 border: false, idField: 'ID', //主键 columns: [[//显示的列 {field: 'ID', title: '编号', width: 100, sortable: true, checkbox: true }, { field: 'UserName', title: '用户名', width: 100, sortable: true, editor: { type: 'validatebox', options: { required: true} } }, { field: 'RealName', title: '性别', width: 100, editor: { type: 'combobox', options: { data: [{ id: 0, text: '请选择' }, { id: 1, text: '男' }, { id: 2, text: '女' }], valueField: 'id', textField: 'text', } } }, { field: 'Email', title: '邮箱', width: 100, editor: { type: 'validatebox', options: { required: true} } } ]], queryParams: { action: 'query' }, //查询参数 toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等 //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行 if (editRow == undefined) { datagrid.datagrid("insertRow", { index: 0, // index start with 0 row: { } }); //将新插入的那一行开户编辑状态 datagrid.datagrid("beginEdit", 0); //给当前编辑的行赋值 editRow = 0; } } }, '-', { text: '删除', iconCls: 'icon-remove', handler: function () { //删除时先获取选择行 var rows = datagrid.datagrid("getSelections"); //选择要删除的行 if (rows.length > 0) { $.messager.confirm("提示", "你确定要删除吗?", function (r) { if (r) { var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].ID); } //将选择到的行存入数组并用,分隔转换成字符串， //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id alert(ids.join(',')); } }); } else { $.messager.alert("提示", "请选择要删除的行", "error"); } } }, '-', { text: '修改', iconCls: 'icon-edit', handler: function () { //修改时要获取选择到的行 var rows = datagrid.datagrid("getSelections"); //如果只选择了一行则可以进行修改，否则不操作 if (rows.length == 1) { //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //当无编辑行时 if (editRow == undefined) { //获取到当前选择行的下标 var index = datagrid.datagrid("getRowIndex", rows[0]); //开启编辑 datagrid.datagrid("beginEdit", index); //把当前开启编辑的行赋值给全局变量editRow editRow = index; //当开启了当前选择行的编辑状态之后， //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid("unselectAll"); } } } }, '-', { text: '保存', iconCls: 'icon-save', handler: function () { //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow); } }, '-', { text: '取消编辑', iconCls: 'icon-redo', handler: function () { //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined; datagrid.datagrid("rejectChanges"); datagrid.datagrid("unselectAll"); } }, '-'], onAfterEdit: function (rowIndex, rowData, changes) { //endEdit该方法触发此事件，保存代码是否这里写？？？ //还需要判断combobox是否选中性别，而不是默认值 console.info(rowData); editRow = undefined; }, onDblClickRow: function (rowIndex, rowData) { //双击开启编辑行 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } if (editRow == undefined) { datagrid.datagrid("beginEdit", rowIndex); editRow = rowIndex; } } }); }); </script>1、怎么提交保存？
2、怎么在保存提交的时候判断combobox选中的不是“请选择”
解决方案
getEditors获取所有编辑器数组，调用getValue得到值如果是0就提示要选择
{ text: '保存', iconCls: 'icon-save', handler: function () {
var ets = $('#dd').datagrid('getEditors');
//注意编辑器所在下标
if ($(ets[1].target).combobox('getValue').toString() == '0') { alert('请选择性别！');return}
datagrid.datagrid("endEdit", editRow);
}
保存时用ajax发送请求发送数据到你的动态页就好了，jquery会自动降rowData转为键值对字符串，服务器端request对象获取即可
onAfterEdit: function (rowIndex, rowData, changes) {
console.info(rowData);
$.ajax({
url: 'xxxxxx', data: rowData, type: 'POST', complete: function (xhr) {
alert(xhr.responseText)
}
});
editRow = undefined;
},
解决方案二：
给这个事件实现一个监听器就可以了。
onAfterEdit
rowIndex, rowData, changes 当用户编辑完成时触发，参数如下：
rowIndex：正在编辑的行索引，从0开始。
rowData：对应于正在编辑的行的记录。
changes：被改变的字段内容，对应方式为字段：值。
解决方案三：
添加一个监听器监听一下 当编辑完成时触发该操作
解决方案四：
确实在onAfterEdit里面做，在这里面拿到数据然后ajax提交到后台保存。
combobox的值通过editor对象的getValue来获取，注意要指定列
解决方案五：
onAfterEdit事件，做post提交 // return;
$("#fm").form("submit",{
url:that.saddOrUpadteUlr,
onSubmit:function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success:function(result){
$.messager.progress('close'); // 如果提交成功则隐藏进度条
result = $.parseJSON(result);
if(result.success){
$.messager.alert("系统提示",result.message);
$("#dlg").dialog("close");
that.frestSearchForm();//重置搜索数据
//userManager.finitQuerybaseParams();
//带公司条件
that.squerybaseParams="companyId="+that.companyId;
that.fqueryData();
} else{
$.messager.alert("系统提示","<font color='red'>"+result.message+"</font>");
}
}
});
}
combobox可以通过api getValue获取
解决方案六：
http://www.zi-han.net/case/easyui/datagrid&tree.html#datagrid
参考。
解决方案七：
easyui datagrid 单元格编辑保存
easyui datagrid 行编辑功能(行内编辑、删除、保存、取消)
【EasyUI】——可编辑的DataGrid
时间： 2024-04-17 08:44:26