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 () {

           });
         }

        }

 结果如下图