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。我是為了方便（偷懶）。