jqgrid的增删改查

 这个是要写的页面(需要引入下面的js页面)

 1 <div class="modal-body" width="100%" style="overflow-x: scroll;">
 2         <input type="hidden" value="${pageContext.request.contextPath}"
 3             name="path" id="path">
 6         <h3>测试页面</h3>
 7         <!--测试页面  -->
 8         <div id="Mytable">
 9             <table id="JqGrid">
10             </table>
11             <div id="JqGridPager"></div>
12         </div>
13     </div>
14
15     <form id="Clues" title="测试页面" style="display: none">
16     </form>

加入js

这个是编写的js页面

$(function() {
    var path = $("#path").val();var jqGrid = $("#problemJqGrid");
    jqGrid.jqGrid({
        caption: "迎泽区纪检监察机关问题线索处置情况统计表",
        url : path+"/supervision/ProblemsClues!doJson.action,
        mtype: "post",
        styleUI: 'Bootstrap', //设置jqgrid的全局样式为bootstrap样式
        datatype: "json",
        colModel: [{
            label: '编号',
            name: 'id',
            multiselectWidth:50,
            hidden:true,
        },{
            label: '备注',
            name: 'note',
            multiselectWidth:80,
        }],
        viewrecords: true,
        width:500,
        height: 385,
        shrinkToFit: true,
        rowNum: 7, //每页显示记录数
        //rowList: [10, 30, 50], //用于改变显示行数的下拉列表框的元素数组
        rownumbers: true, //添加左侧行号
        rownumWidth: 30,
        autowidth: true,
        multiselect: true, //需要多选或者批量删除时需要改为true
        scrollrows:true,
        pager: "#problemJqGridPager",
        /*设置分页显示的导航条信息*/
        jsonReader: {
            root: "list",
            page: "page",
            total: "total",
            records: "records"
        },
        /*像后台请求的参数信息*/

        gridComplete: function() {
            //隐藏grid底部滚动条
            $("#problemJqGrid").closest(".ui-jqgrid-bdiv").css({
                "overflow-x": "show"
            });
        },
    });

    $("#problemJqGrid").jqGrid('navGrid', '#problemJqGridPager', {
         //设置为false需要自己重新重新该方法
       edit: false,
       add: false,
       del: false,
       search: false
   },{},{},{},{multipleSearch:true})
   .navButtonAdd('#problemJqGridPager', {
       caption: "删除", buttonicon: "ui-icon-trash", onClickButton: function () {
           //删除一行操作
           removeRows();
       },
       position: "first"
   })
    .navButtonAdd('#problemJqGridPager', {
        caption : "修改",
        buttonicon : "ui-icon ui-icon-pencil",
        onClickButton : function() {
            editprm();
        },
        position : "first"
    })
       .navButtonAdd('#problemJqGridPager', {
        caption : "添加",
        buttonicon : "ui-icon ui-icon-plus",
        onClickButton : function() {
            addProDate();
        },
        position : "first"
    })
    　　//添加的页面
        function addProDate(){
        $("#problemFillDate").val(profillDate);
            $("#problemClues").dialog({
                height : 300,
                width : 400,
                resizable : false,
                modal : true, // 这里就是控制弹出为模态
                buttons : {
                    "确定" : function() {
                        var option = {
                                url :  path + "/.../...!save.action",
                                type : 'POST',
                                datatype : 'json',//这里是返回类型，一般是json,text
                                clearForm : true,//提交后是否清空
                                success : function(ActionResult) {
                                     alert(ActionResult.desc);
                                     $("#JqGrid").trigger("reloadGrid");  //JqGrid显示的是table的id
                                },
                                error : function(ActionResult) {
                                    alert(ActionResult.desc);
                                    $("#JqGrid").trigger("reloadGrid");
                                }
                            };
                        $(this).ajaxSubmit(option);
                        $(this).dialog("close");
                        $("#JqGrid").trigger("reloadGrid");
                    },
                    "取消" : function() {
                        $(this).dialog("close");
                    }
            }
        });
    }

　　　　　　//修改时,给数值赋值
        function editprm() {
        // 获取id
        var id = $("#problemJqGrid").jqGrid("getGridParam",
                "selrow");
        // 根据id获取行数据
        var selectedRowIds = $("#problemJqGrid").jqGrid("getRowData", id);
        $("#problemId").val(selectedRowIds.id);
        $("#FillDate").val(selectedRowIds.fillDate);//val存放的是要赋值的值
        $(".cluesCoding").val(selectedRowIds.cluesCoding);
        $(".cluesSource").val(selectedRowIds.cluesSource);
        if(selectedRowIds.fillDate == undefined){
            alert("请选择您要修改的行号");
        }else{
            $("#problemClues").dialog({
                height : 300,
                width : 400,
                resizable : false,
                modal : true, // 这里就是控制弹出为模态
                buttons : {
                    "确定" : function() {
                        var option = {
                                url :  path + "/.../...!save.action",
                                type : 'POST',
                                datatype : 'json',//这里是返回类型，一般是json,text
                                clearForm : true,//提交后是否清空
                                success : function(ActionResult) {
                                     alert(ActionResult.desc);
                                     $("#JqGrid").trigger("reloadGrid");
                                },
                                error : function(ActionResult) {
                                    alert(ActionResult.desc);
                                    $("#JqGrid").trigger("reloadGrid");
                                }
                            };
                        $(this).ajaxSubmit(option);
                        $(this).dialog("close");
                        $("#JqGrid").trigger("reloadGrid");
                    },
                    "取消" : function() {
                        $(this).dialog("close");
                    }
                }
            });
        }
    }

   //进行批量删除
   function removeRows(){
       //获取多行的id，是个Array
       var selectedRowIds = $("#JqGrid").jqGrid("getGridParam", "selarrrow");
       //判断是否为空
       if(selectedRowIds==""){
           alert("请选择行号!")
       }
       else{
            var txt =confirm("是否删除该数据");
            var ids = new Array();
            if (txt == true) {
                for (var i = 0; i < selectedRowIds.length; i++) {
                    //选中行的时间
                    var jsid = $("#JqGrid").getCell(selectedRowIds[i], "id");

                    //建一个数组，把选中行的时间添加到这个数组中去。
                    ids[i] = jsid;
                }
                $.ajax({
                    url : path + "/..../....!delete.action?id="+ids ,
                    type : 'POST',
                    datatype : 'json',//这里是返回类型，一般是json,text
                    success : function(ActionResult) {
                        alert(ActionResult.desc);
                        $("#JqGrid").trigger("reloadGrid");
                    },
                    error : function(ActionResult) {
                        alert(ActionResult.desc);
                    }
                });
            }
       }
   }
});