jqgrid的增删改查

Posted zique

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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); } }); } } } });

 





以上是关于jqgrid的增删改查的主要内容,如果未能解决你的问题,请参考以下文章

mysql 的增删改查 实现代码

如何用PHP代码实现MySQL数据库的增删改查

数据库的增删改查?

PHP怎么实现字符串的增删改查

数据的增删改查(三层)

c#中怎么实现表的增删改查?