这个是要写的页面(需要引入下面的js页面)  1 
     
       2         
          6         
      
测试页面
 7         
       8         
      
        9             
       
        10             
11             
       
12         
      
13     
     
14 15     
     
      16     
     

加入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); } }); } } } });