jQuery easyuI datagrid 多行編輯

在easyUI 動態綁定部分數據后，需要有部分列可以修改，研究了一天終於搞定。這是小弟的做法，望各位有好招的大俠指點。

1.添加jQuery 和jQuery easyuI的引用。

2.添加id為tt的table和獲取行數據測試按鈕getChangeValue

<div id="setRoleDiv" style=" display:none;">
            <iframe id="frmSetRole" src="" scrolling="no" width="100%" height="100%" frameborder="0">
            </iframe>
        </div>

        <input type="button"  value="getChangeValue" onclick="showChange()"/>

 

3.頁面加載時通過url調用后台json數據。並對列進行和相關事件,屬性綁定。代碼如下

 
    $(function () {
            LoadInitData();
            
            //根據查詢條件加載列表
            $("#btnQuerySearch").click(function (e) {
                var strName = $("#searchUName").val();
                var strMail = $("#searchMail").val();
                LoadInitData({ UserName: strName, Email: strMail });
            });

            $("#frmEdit").css("display", "none");
           

        });

 function LoadInitData(queryParams) {
            $('#tt').datagrid(
            {
                url: '/UserInfo/GetPageUserInfo',
                title: '演示表格使用',
                width: 'auto',
                height: 370,
                fitColumns: true,
                idField: 'ID',
                loadMsg: '正在加載用戶的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: queryParams,
                columns: [[
                        { field: 'ck', checkbox: true, align: 'left', width: 50, height: 40 },
                        { field: 'ID', title: '主鍵', width: 80 },
                        { field: 'UserName', title: '用戶名', width: 120 },
                        { field: 'PassWord', title: '密碼', width: 80 },
                        { field: 'Email', title: '郵箱', width: 80 },
                         { field: 'Address', title: '住址', width: 80 },
                         { field: 's', title: 'ss', width: 80, editor: { type: 'numberbox', required:true, options: { precision: 1}} },
                        { field: 'CreateDate', title: '提交時間', width: 80, align: 'right',
                            //日期為null時 此格式不可用，只能加載第一頁數據
                            formatter: function (value, row, index) {
                                return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s.S");
                            }
                        }
                //                         ,{field:'showprice',title:'商品價格',width:80,align:'right',
                //                                    styler:function(value,row,index){
                //                                        if (value < 20){
                //                                            return 'background-color:#ffee00;color:red;';
                //                                        }
                //                                    },
                //                                    formatter:function(value,row,index){
                //                                        return "<a href='#' onclick='editGoodsPrice(" + row.goodsid + ");return false;'>" + value + "</a>";
                //                                    }
                //                        }
                    ]],
                toolbar: [{
                    id: 'btnDownShelf',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        //顯示 添加div層;
                        $("#addDialog").css("display", "");

                        //彈出窗口
                        InitShowAddDialog();
                    }
                }, {
                    id: 'btnDownShelf',
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: function () {
                        dealEdit();
                    }
                }
                , {
                    id: 'btnDownShelf',
                    text: '刪除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        dealDelete();
                    }
                }
                , {
                    id: 'btnSetRole',
                    text: '設置用戶角色',
                    iconCls: 'icon-redo',
                    handler: function () {
                        dealSetRole();
                    }
                },'-', {
                 text: 'accept',
                 iconCls: 'icon-save',
                 handler: function () {
                     $('#tt').datagrid('acceptChanges');
                 }
             }
                ],
                onHeaderContextMenu: function (e, field) {

                },
                onClickRow: function (e) {
                   $('#tt').datagrid('beginEdit',e);
                }
            });

        }

以上代碼注意

(1)觸發可編輯的列（ss）需要添加editors列屬性editor: { type: 'numberbox', required:true, options: { precision: 1}}

(2)通過grid的onClickRow事件觸發可編輯的列（ss）。
  onClickRow: function (e) {
                   $('#tt').datagrid('beginEdit',e);//'beginEdit‘方法必須有一個參數
                }

(3)接受改變值，並獲取選中列的值

   function showChange() {
            $('#tt').datagrid('acceptChanges');//'acceptChanges'方法提交所有修改的數據，提交后的數據將不能再修改或者回滾。
            var data = $('#tt').datagrid('getSelections');

      //提交數據給后台 ，后台只需反序列化就ok，代碼如下：

      if (rows.length<1) {
           $.messager.alert("消息提示", "至少選擇一條數據保存");
           }
         else {
          var jsonDataStr = "";
         jsonDataStr = JSON.stringify(rows);

         $.post("/User/Add.ashx", { "data": jsonDataStr }, function () {

           });
         }

        }

 結果如下圖