easyui中datagrid 中添加编辑行的实现

需求

1）动态添加可编辑行

2）行中某些列是下拉框

3）编辑后可以保存

html代码：

 <table id="dgitem" style="width: 100%; height: 100%;" title="申请项"  pagination="true" singleSelect="true" rownumbers="true"></table>

js代码：

1）初始化datagrid：

 

 $("#dgitem").datagrid({
                    title: '',
                    toolbar: '#tb',
                    url: '',
                    singleSelect: true,
                    fitColumns: false,
                    pagination: true,
                    rownumbers: true,
                    loadMsg: "正在加载数据...",
                    columns: [[
                        { field: 'ID', align: 'center', hidden: true },
                        {
                            field: 'depName', title: '部门', width: 220, align: 'center',editor: {
                            type: 'combobox',
                            options: {
                                valueField: 'name',
                                textField: 'name',
                                data: unitdatas,
                                required: true//是必填项
                                }
                            }
                        },
                        {
                            field: 'post', title: '职务', width: 230, align: 'center',
                            editor: {
                            type: 'combobox',
                                options: {
                                    valueField: 'name',
                                    textField: 'name',
                                    data: datas,
                                    required: true,//是必填项
                                    onSelect: function (row) {

                                       // var varSelect = $(this).combobox('getText');

                                        //alert(userdatas);
                                    }
                                } 
                            }
                        },
                        {
                            field: 'fullName', title: '姓名', width: 180, align: 'center', editor: {
                                type: 'combobox',
                                options: {
                                    valueField: 'name',
                                    textField: 'name',
                                    data: userdatas,
                                    required: true//是必填项
                                } 
                            }
                        },
                        { field: 'remark', title: '备注', width: 280, align: 'center', editor: 'text' },
                        {
                            field: 'operate', title: '操作', align: 'center', width: 100,
                            formatter: function (value, row, index) {
                                var str = '<img src="/Themes/easyui/icons/filesave.png" title="双击行进行编辑\n在编辑状态下保存" alt="保存" onclick="saveItem()">';
                                return str;
                            }
                        }
                    ]],
                    onDblClickRow: function (index, field, value) {
                        //双击编辑
                        $(this).datagrid('beginEdit', index);
                        editRow = index;  
                    },
                    onAfterEdit: function (index, row) {
                        row.editing = false;
                        addItem(row);
                    },
                    toolbar: '#tb'
                });

2）动态添加编辑行

 var editRow = undefined;

  //添加方法行
        function Add() {
//depName、post、fullName、remark对应datagrid的字段，这里可以自己设置
            var index = $('#dgitem').datagrid('appendRow', {
                depName: '',
                post: '计量岗',
                fullName: '系统管理员',
                remark: ''
            }).datagrid('getRows').length - 1;

            $('#dgitem').datagrid('beginEdit', index)

            editRow = index; 
        }

3）每一行动态编辑列有一个保存按钮

 //结束编辑，并调用保存
        function saveItem() {
             $('#dgitem').datagrid('endEdit', editRow);
        }

4）在onAfterEdit事件中真正调用后台方法进行保存，上边的saveItem（）方法实际是结束编辑，并触发onAfterEdit事件。

   //添加单项方法
        function addItem(row) {

            var SerialNumber = $('#txtCode').val();//流水号
            var ID = row.ID;//用于编辑单项
            var depName = row.depName;
            var post = row.post;
            var fullName = row.fullName;
            var remark = row.remark;


            var json = '[{"SerialNumber":"' + SerialNumber + '",'
                + '"depName":"' + depName + '",'
                + '"post":"' + post + '",'
                + '"fullName":"' + fullName + '",'
                + '"ID":"' + ID + '",'
                + '"remark":"' + remark + '"}]';

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "Labor.ashx?Method=SetSafety_RevisionEnclosure_add",
                async: true,
                data: {
                    json: json
                },
                success: function (data) {
                    if (data.Flag[0].Status == 1) {

                       // layer.msg('保存成功！', { icon: 1 });

                    } else {
                        layer.msg('保存失败！', { icon: 0 });

                        OpenClose();
                    }
                },
                error: function (data) {
                    layer.msg('服务器错误！', { icon: 2 });
                    OpenClose();
                }
            });
        }

5）利用在onDblClickRow事件实现双击行开启编辑行

 onDblClickRow: function (index, field, value) {
                        //双击编辑
                        $(this).datagrid('beginEdit', index);
                        editRow = index;  
                    },

注意：editRow 是全局变量，否则不好使

代码中的 unitdatas、datas、userdatas都是各个对应combobox的数据。

 

 valueField 这里对应的是js中的文本，因为我这里直接保存是是文字，如果自己需要保存的ID，可以把valueField 换成id。我是为了方便（偷懒）。