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