snaif_lx 2015-09-07 03:27 采纳率: 80%
浏览 10628
已采纳

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选中的不是“请选择”

  • 写回答

6条回答 默认 最新

  • 斯洛文尼亚旅游 2015-09-07 04:08
    关注

    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;
                },
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥15 PointNet++的onnx模型只能使用一次
  • ¥20 西南科技大学数字信号处理
  • ¥15 有两个非常“自以为是”烦人的问题急期待大家解决!
  • ¥30 STM32 INMP441无法读取数据
  • ¥15 R语言绘制密度图,一个密度曲线内fill不同颜色如何实现
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上,请大家贡献智慧,别用大模型回答,大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。