jqGrid增删改查显示——查找

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

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

演示效果：

核心代码：

$(document).ready(function () {
                $.ajax({
                            url: "/userFindAction",
                            type: "GET",
                            dataType: "json",
                            success: function (data) {
                                window.datas = data.result;

                                // Auto height step 1: Set .content-pager height = window heigth - 250px
                                $(".content-pager").height($(window).height() - 400);
                                // Setup grid
                                jQuery("#jqGrid01").jqGrid({
                                    //url :'/userFindAction',
                                    data: datas,
                                    datatype: "local",
                                    jsonReader: {
                                        repeatitems: false
                                    },
                                    height: $('.content-pager').height(), // Auto height step 2,
                                    rowNum: 10,
                                    rowList: [10, 20, 30],
                                    colNames: ['userId', 'userName', 'accountName', 'accountPassword', 'roleType', 'schoolName', 'schoolClassName', 'active',''],
                                    colModel: [

                                        {name: 'userId', index: 'userId', width: 60,hidden:true},
                                        {
                                            name: 'userName',
                                            index: 'userName',
                                            width: 100,
                                            editable: true,
                                            editoptions: {size: "20", maxlength: "30"}
                                        },
                                        {
                                            name: 'accountName',
                                            index: 'accountName',
                                            width: 100,
                                            editable: true,
                                            editoptions: {size: "20", maxlength: "30"}
                                        },
                                        {
                                            name: 'accountPassword',
                                            index: 'accountPassword',
                                            width: 120,
                                            search:false
                                        },
                                        {
                                            name: 'roleType',
                                            index: 'roleType',
                                            width: 80,
                                            editable: true,
                                            editrules: true,
                                            edittype: "select",
                                        },
                                        {
                                            name: 'schoolName',
                                            index: 'schoolName',
                                            width: 150,
                                            editable: true,
                                            editrules: true,
                                            edittype: "select",
                                            editoptions: {
                                                dataEvents: [
                                                    {
                                                        type: 'change',          //下拉选择的时候
                                                        fn: function (e) {
                                                            var itemName = this.id;
                                                            var selectNum = itemName.match(/^\d+/);
                                                            var schoolName =this.value;
                                                            getSchoolClass(selectNum,schoolName);

                                                        }
                                                    }
                                                ]
                                            }
                                        },
                                        {
                                            name: 'schoolClassName',
                                            index: 'schoolClassName',
                                            width: 150,
                                            editable: true,
                                            edittype: "select",
                                            editoptions: {value: {'请选择班级': '请选择班级'}}
                                        },
                                        {
                                            name: 'active', index: 'active', width: 60,sortable : false
                                        },
                                        {
                                            name : 'act',index : 'act',width : 75,sortable : false,search:false
                                        },
                                    ],
                                    pager: "#jqGridPager01",
                                    viewrecords: true,
                                    add: true,
                                    edit: true,
                                    addtext: 'Add',
                                    edittext: 'Edit',
                                    caption: "User Management",
                                    hidegrid: false,
                                    multiselect: true,
                                    altRows: true,
                                    rownumbers: true,
                                    mtype: "get",
                                    loadComplete: function () {
                                        getSchool();
                                        getRole();
                                        setReset();
                                        setEdit();

                                    },
                                });



                                jQuery("#jqGrid01").navGrid('#jqGridPager01', {
                                    edit: false,
                                    add: false,
                                    del: false,
                                    search: true
                                },{},{},{},{multipleSearch:true})
                                        .navButtonAdd('#jqGridPager01', {
                                            caption: "", buttonicon: "ui-icon-circle-plus", onClickButton: function () {

                                                $("select#schoolClassName").empty();
                                                var str = "<option>" + "请选择班级" + "</option>";
                                                var schoolClassName = $("select#schoolClassName");
                                                schoolClassName.append(str);

                                                jQuery("#jqGrid01").jqGrid('editGridRow', "new", {
                                                    url: '/registerAction',
                                                    height: 300,
                                                    mtype: "POST",
                                                    reloadAfterSubmit: false,
                                                    closeAfterAdd: true,
                                                    onclickSubmit: function (params, postdata) {

                                                        var roleTypeName=$.trim($("#editmodjqGrid01").find("#roleType").val())
                                                        for(var i=0;i<roleResult.length;i++){
                                                            if(roleTypeName==roleResult[i].roleType){
                                                                var userGroup = new Array();
                                                                userGroup.push({
                                                                    userName: $.trim($("#editmodjqGrid01").find("#userName").val()),
                                                                    accountName: $.trim($("#editmodjqGrid01").find("#accountName").val()),
                                                                    accountPassword: '12345',
                                                                    roleType: roleResult[i]._id,
                                                                    schoolClassName: $.trim($("#schoolClassName").find("option:selected").attr('schoolid'))
                                                                });
                                                                break;
                                                            }
                                                        }

                                                        return {userGroup:userGroup};

                                                    },
                                                    afterSubmit : function(response, postdata) {
                                                        var result=response.responseJSON;
                                                        if(result.success==1){
                                                            switch (result.code){
                                                                case 0:
                                                                    return [false,"用户名已经存在！"]
                                                                    break;
                                                                case 2:
                                                                    return [false,"保存部分用户成功,其余用户名已存在！"]
                                                                    break;
                                                                case 1:
                                                                    window.wxc.xcConfirm("保存用户成功", window.wxc.xcConfirm.typeEnum.info);
                                                                    //alert("保存用户成功！");
                                                                    return [true,""]
                                                                    break;
                                                            }
                                                        }
                                                        else{
                                                            return [false,"创建用户失败！"]
                                                        }
                                                    }
                                                });
                                            },
                                            position: "first"
                                        })
                                        .navButtonAdd('#jqGridPager01', {
                                            caption: "", buttonicon: "ui-icon-trash", onClickButton: function () {
                                                //alert("really delete the selected item?");
                                                var selectedRowIds = $("#jqGrid01").jqGrid("getGridParam", "selarrrow");
                                                if(selectedRowIds==""){
                                                    window.wxc.xcConfirm("请选择要删除的行！", window.wxc.xcConfirm.typeEnum.info);
                                                }
                                                else{
                                                    var txt=  "是否删除用户";
                                                    var option = {
                                                        title: "信息",
                                                        btn: parseInt("0011",2),
                                                        onOk: function(){

                                                            var len = selectedRowIds.length;
                                                            var userId =new Array();
                                                            for (var i = 0; i <len; i++) {
                                                                userId[i]=datas[selectedRowIds[i]-1].userId;
                                                            }

                                                            $.ajax({
                                                                type: "post",
                                                                url: "/userRemoveAction",
                                                                data: {userId:userId},
                                                                dataType: "json",
                                                                success: function (data) {

                                                                    if(data.success==1){
                                                                        for (var i = 0; i < len; i++) {
                                                                            $("#jqGrid01").jqGrid("delRowData", selectedRowIds[0]);
                                                                        }
                                                                    }
                                                                }
                                                            });
                                                        }
                                                    }
                                                    window.wxc.xcConfirm(txt, "custom", option);
                                                }

                                            },
                                            position: "first"
                                        })
                                        .navSeparatorAdd("#jqGridPager01", {sepclass: "ui-separator", sepcontent: ''});

                                $("#jqGrid01").jqGrid('setGridWidth', $(".content-pager").width(), true);
                            },
                            error: function () {
                            }
                        }
                );
            });

主要代码：

jQuery("#jqGrid01").navGrid('#jqGridPager01', {
                                    edit: false,
                                    add: false,
                                    del: false,
                                    search: true
                                },{},{},{},{multipleSearch:true})//调用搜索方法

如果定义search:false，则不能作为查找参数，默认为true，如：

 {
     name : 'act',index : 'act',width : 75,sortable : false,search:false
 },

相关文章：

http://blog.csdn.net/tangjiarao/article/details/50456160  联动下拉
http://blog.csdn.net/tangjiarao/article/details/50460146  增加
http://blog.csdn.net/tangjiarao/article/details/50460780  修改
http://blog.csdn.net/tangjiarao/article/details/50461122  删除

参考文章：

http://blog.mn886.net/jqGrid/ api