jqGrid增删改查显示——修改+nodejs后台

本篇文章只介绍jqGrid增加操作，希望能帮到大家~！有不正确的请指出！谢谢！

本篇文章代码在以下三篇代码基础上修改：
jqGrid显示：http://blog.csdn.net/tangjiarao/article/details/50454695
jqGrid联动下拉框：http://blog.csdn.net/tangjiarao/article/details/50456160

PS:行id冲突（行编辑有需要看看）

http://blog.csdn.net/tangjiarao/article/details/50461445 

演示效果：

逻辑过程
（1）获取roleType、schoolName、schoolClassName的数据，并渲染下拉框option(jqGrid联动下拉框文章及jqGrid增加：http://blog.csdn.net/tangjiarao/article/details/50460146 贴过代码）
（2）第一个按钮——编辑的动作
（3）第二个按钮——保存的动作
（4）第三个按钮——撤销的动作

以上两篇文章完整核心代码：

$(document).ready(function () {
        $.ajax({//先用ajax与后台交互获取要显示的数据
                    url: "/userFindAction",//与后台交互的url
                    type: "GET",//ajax提交方式
                    dataType: "json",//从服务器端返回的数据类型
                    success: function (data) {

                        //data是从服务器返回的json对象，其中result是我要显示的数据内容
                        window.datas = data.result;

                        //设置content-pager高度
                        $(".content-pager").height($(window).height() - 400);

                        //数据成功拿到后就渲染jqgrid
                        // 配置jqGrid的属性
                        jQuery("#jqGrid01").jqGrid({

                            data: datas,//从服务器拿来的数据
                            datatype: "local",//显示数据的方式，因为通过ajax拿到数据了，所以是本地的
                            jsonReader: {//描述json 数据格式的数组
                                repeatitems: false// 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
                            },
                            height: $('.content-pager').height(), // Auto height step 2,
                            rowNum: 10,//在grid上初始显示记录条数
                            rowList: [10, 20, 30],//一个下拉选择框，用来改变显示记录数
                            colNames: ['userId', 'userName', 'accountName', 'accountPassword', 'roleType', 'schoolName', 'schoolClassName', 'active',''],//列显示名称，是一个数组对象
                            colModel: [//配置显示的列属性
                                /**
                                 *  对应后台返回数据datas中的userId
                                 *  hidden:控制该列不显示
                                 */
                                {name: 'userId', index: 'userId', width: 60,hidden:true},
                                /**
                                *  对应后台返回数据datas中的userName
                                *  editable：定义字段是否可编辑
                                */
                                {
                                    name: 'userName',
                                    index: 'userName',
                                    width: 100,
                                    editable: true,
                                    editoptions: {size: "20", maxlength: "30"}//当执行修改和新增的操作时，会显示输入框，输入框的配置
                                },
                                /**
                                *  对应后台返回数据datas中的accountName
                                *  editable：定义字段是否可编辑
                                */
                                {
                                    name: 'accountName',
                                    index: 'accountName',
                                    width: 100,
                                    editable: true,
                                    editoptions: {size: "20", maxlength: "30"}
                                },
                                /**
                                *  对应后台返回数据datas中的accountPassword
                                *  search：定义此列是否可以作为搜索列
                                *  注：由于不想让用户看到密码，所以将改列的内容改为一个重置按钮，点击可以修改密码
                                */
                                {
                                    name: 'accountPassword',
                                    index: 'accountPassword',
                                    width: 120,
                                    search:false
                                },
                                /**
                                *  对应后台返回数据datas中的roleType
                                *  editrules：设置编辑字段的控件的规则
                                *  edittype：控件该字段在修改或者新增时类型 select为下拉菜单
                                */
                                {
                                    name: 'roleType',
                                    index: 'roleType',
                                    width: 80,
                                    editable: true,
                                    editrules: true,
                                    edittype: "select",
                                },
                                /**
                                *  对应后台返回数据datas中的schoolName
                                */
                                {
                                    name: 'schoolName',
                                    index: 'schoolName',
                                    width: 150,
                                    editable: true,
                                    editrules: true,
                                    edittype: "select",
                                    editoptions: {
                                        dataEvents: [//给当前控件追加事件处理
                                            {
                                                type: 'change',                 //下拉选择的时候
                                                fn: function (e) {              //触发方法
                                                    //获取当前下拉框的id名字（这是点击编辑按钮时才需要的，因为点击编辑按钮后，schoolName的下拉框会变成1_schoolName,其中”1“是行号）
                                                    var itemName = this.id;
                                                    var selectNum = itemName.match(/^\d+/);//（这是点击编辑按钮时才需要的）将id中的数字获取出来，编辑时就会对id为selectNum的行进行操作
                                                    var schoolName =this.value; //获取选中的学校名称
                                                    getSchoolClass(selectNum,schoolName); //调用获取班级data的方法
                                                }
                                            }
                                        ]
                                    }

                                },
                                /**
                                *  对应后台返回数据datas中的schoolClassName
                                *  value：在修改或者新增时下拉框显示的数据
                                */
                                {
                                    name: 'schoolClassName',
                                    index: 'schoolClassName',
                                    width: 150,
                                    editable: true,
                                    edittype: "select",
                                    editoptions: {value: {'请选择班级': '请选择班级'}}
                                },
                                /**
                                *  该字段是在前端自定义的字段
                                *  sortable：	设置该字段是否进行排序
                                */
                                {
                                    name: 'active', index: 'active', width: 60,sortable : false
                                },
                                /**
                                *  改列显示编辑、保存、重置按钮，在编辑操作会用到
                                */
                                {
                                    name : 'act',index : 'act',width : 75,sortable : false,search:false
                                },
                            ],
                            pager: "#jqGridPager01",//定义翻页用的导航栏，必须是有效的html元素(即定义的div块)。
                            viewrecords: true,//定义是否要显示总记录数
                            caption: "User Management",//表格名称
                            hidegrid: false,//启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效
                            multiselect: true,//定义是否可以多选
                            altRows: true,
                            rownumbers: true,//如果为ture则会在表格左边新增一列，显示行顺序号

                            /**
                             *   当从服务器返回响应时执行的方法
                             *   ----我的理解是加载表格完成后执行的方法----
                             */
                            loadComplete: function () {

                                //获取学校data
                                getSchool();
                                //获取roleType
                                getRole();
                                //设置Reset按钮
                                setReset();
                                //设置最后一列的修改按钮
                                setEdit();
                            },
                        });

                        // 配置导航条属性
                        jQuery("#jqGrid01").navGrid('#jqGridPager01', {
                            //设置为false需要自己重新重新该方法
                            edit: false,
                            add: false,
                            del: false,
                            search: true
                        },{},{},{},{multipleSearch:true})
                                /**
                                 *  增加自定义按钮——add按钮
                                 *  参数1：导航条div名称
                                 *  参数2：按钮名称，可以为空
                                 *  参数3：按钮的图标，string类型，必须为jquery UI theme图标
                                 *  onClickButton：点击该按钮时候的操作
                                 */
                                .navButtonAdd('#jqGridPager01', {
                                    caption: "", buttonicon: "ui-icon-circle-plus", onClickButton: function () {
                                        //增加一行操作
                                        addRows();
                                    },
                                    position: "first"//first或者last，按钮位置
                                })
                                .navButtonAdd('#jqGridPager01', {
                                    caption: "", buttonicon: "ui-icon-trash", onClickButton: function () {
                                        //删除一行操作
                                        removeRows();
                                    },
                                    position: "first"
                                })
                                //分隔符
                                .navSeparatorAdd("#jqGridPager01", {sepclass: "ui-separator", sepcontent: ''});
                        $("#jqGrid01").jqGrid('setGridWidth', $(".content-pager").width(), true);
                    },
                    error: function () {
                    }
                }
        );
    });

setEdit();方法

/**
     * set edit Button
     */
    function setEdit(){
        var ids = jQuery("#jqGrid01").jqGrid('getDataIDs');//返回当前grid里所有数据的id

        for ( var i = 0; i < ids.length; i++) {
            var cl = ids[i];
            //调用编辑方法，修改操作用到
            var be = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' οnclick=\"editRows("+cl+")\"> " + 
            //设置icon        
                    "<span class = 'glyphicon glyphicon-edit' aria-hidden = 'true' ></span></button>";
            //调用保存方法，修改操作用到
            var se = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' οnclick=\"saveRows("+cl+")\" > " + 
            //设置icon         
                    "<span class = 'glyphicon glyphicon-ok' aria-hidden = 'true' ></span></button>";
            //调用重置方法，修改操作用到
            var ce = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' οnclick=\"jQuery('#jqGrid01').restoreRow('" + cl + "');\" > " + 
            //设置icon                
                    "<span class = 'glyphicon glyphicon-remove' aria-hidden = 'true' ></span></button>";
            jQuery("#jqGrid01").jqGrid('setRowData', ids[i],
                    {
                        act : be + se + ce
                    });
        }
    }
以上代码是渲染三个按钮的方法，并且当点击对应按钮的时候会调用对应的方法，传入的参数是行id。（2）第一个按钮——编辑的动作editRows(c1);

/**
     *  edit Rows action
     */
    function editRows(cl){
        jQuery("#jqGrid01").editRow(cl,{
            oneditfunc: function(cl){//当点击按钮时的操作
               
            },
            succesfunc: function(response){//成功的操作
                return true;
            },
            errorfunc: function(rowid, res){//失败的操作
                console.log(rowid);
                console.log(res);
            }
        });
    }
调用editRow方法传入参数行id就可以使对应行变成编辑模式，其还有一些方法给大家选择使用。

（3）第二个按钮——保存的动作

/**
     *  edit Rows action
     *  1.获取编辑模式中各个字段的内容
     *  2.调用jqGrid的saveRow方法将数据post到后台服务器
     */
    function saveRows(cl){
        //alert(cl);
        //获取输入框及下拉框的数据，主要用到这些对象的id，用val()方法取出。需要多用f12来查看还有jquery的使用
        for(var i=0;i<roleResult.length;i++){
            if($("#"+cl+"_roleType").val()==roleResult[i].roleType){
                var userGroup = new Array();
                userGroup.push({
                    userId: datas[cl-1].userId,
                    userName: $("#"+cl+"_userName").val(),
                    accountName: $("#"+cl+"_accountName").val(),
                    roleType: roleResult[i]._id,
                    schoolClassName: $.trim($("#"+cl+"_schoolClassName").find("option:selected").attr('schoolid'))
                });
                break;
            }
        }
        //jqGrid保存方法
        jQuery('#jqGrid01').saveRow(cl, {
            url:"/userUpdateAction", //后台交互url
            mtype: "POST",
            extraparam:{ //post到后台的数据
                userGroup:userGroup
            },
            successfunc: function (response) {
                var result =response.responseJSON;//后台返回的json
                //alert(JSON.stringify(response));
                if(result.success==1){
                    window.wxc.xcConfirm("修改用户信息成功！", window.wxc.xcConfirm.typeEnum.info);
                    return true; //返回true 就会保存
                }
                else{
                    if(result.code==1){
                        window.wxc.xcConfirm("用户名已存在！", window.wxc.xcConfirm.typeEnum.info);
                    }
                    return false;//返回false 不会保存
                }
            }
        });
    }

（4）第三个按钮——撤销的动作

var ce = "<button type='button' class='btn btn-default btn-xs' aria-label='LeftAlign' οnclick=\"jQuery('#jqGrid01').restoreRow('" + cl + "');\" > " +
它是jqGrid的一个方法，直接调用，插件就会帮你撤销。

相关文章：

http://blog.csdn.net/tangjiarao/article/details/50460146  增加
http://blog.csdn.net/tangjiarao/article/details/50461122  删除
http://blog.csdn.net/tangjiarao/article/details/50461998  查找

参考文章：

http://www.w3dev.cn/article/20130703/jqGrid-form-editing-config.aspx

http://blog.csdn.net/zgjsczwj/article/category/1193882
http://blog.mn886.net/jqGrid/