1,jqGrid 第一次加载方法,和查询按钮可以执行的方法
方法1 jQuery("#tableId").jqGrid({ url: "/jqGrid/select.html", //发送数据 postData: {"stock": $("#stock").val(), "name": $("#lastSales").val()}, //发送方式 mtype: "get", datatype: "json", //表格高度 height: 400, //列名 colNames: [‘ ‘, ‘ID‘, ‘Last Sales‘, ‘Name‘, ‘Stock‘, ‘Ship via‘, ‘Notes‘,‘Amt‘], ... }) 作为最常用的jqGrid方法,它起到的是一个渲染页面和初始化一些方法的作用,后续的效果都是在该方法渲染好table等html后,才起作用。 而且,此方法,只在第一次加载页面时触发。 但是我们做页面展示,一般都要有查询按钮,这个方法显然不适用,如果将该方法包装在$("#buttonId").click里, 是不会触发的。具体源码不清楚。(我第一次做查询按钮的时候,就是这么做的,debug发现,代码是一步一步往下走,就是调不到后台) 那么查询按钮应该用什么方法呢,还是这个方法,只是带上了参数。 这个方法就是jqGrid对应的按钮可以触发的查询方法(而且必须是方法1渲染好页面后才能使用) $(grid_selector).jqGrid(‘setGridParam‘, { url: "/jqGrid/select.html", //发送数据 postData: {"stock": $("#stock").val(), "name": $("#lastSales").val(), "note": $("#notes").val()}, page: 1, //该方法是加载完 loadComplete: function (xhr) { alert("查询完成"+xhr.result); } }).trigger("reloadGrid");//重新载入
2,按钮可以触发的增删改方法,
如果你不想用jqGrid左下角的导航栏增删改,那么就可以用这几个方法
$("#buttonForEdit").click(function(){ //gr是获取 编辑行的id var gr = jQuery("#grid-table").jqGrid(‘getGridParam‘, ‘selrow‘); if (gr != null) jQuery("#grid-table").jqGrid(‘editGridRow‘, gr, { height: 300, reloadAfterSubmit: false }); else alert("Please Select Row"); }); $("#buttonForInsert").click(function(){ jQuery("#grid-table").jqGrid(‘editGridRow‘, "new", { height: 300, reloadAfterSubmit: false }); }); $("#buttonForDelete").click(function(){ var gr = jQuery("#grid-table").jqGrid(‘getGridParam‘, ‘selrow‘); if (gr != null){ var result=jQuery("#grid-table").jqGrid(‘delGridRow‘, gr, { reloadAfterSubmit: false }); alert(result);} else alert("Please Select Row to delete!"); });
对于增删改,很多人会问,url在哪填写,
其实jqGrid对于这三个的url,默认为一个,就是渲染页面的方法的一个参数,editUrl。
那怎么区分呢。对此,jqGrid提交后台的url中,他会默认增加一个叫oper的属性
如果是edit,url就会是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=edit
如果是update,url就会是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=add
如果是delete,url就会是http://www.xx.com/edit.html?name=xxx&age=xxx&oper=del
所以后台可以根据oper去判断是什么操作。
很多人会问,导航栏自带的小按钮的add和edit,如果成功了,怎么提示。
这个我也不知道,
但是我找到一个事件可以起到这个效果。
afterComplete:function执行完add和edit后触发的回调函数,可以接收后台返回的数据
afterComplete:function(xhr){ alert(xhr.responseText); }, //成功后关闭此窗口 closeAfterAdd: true
xhr={readyState=4,responseText="后台返回的信息" status=200 ...}
所以后台需要返回 sunccess 或者error之类的信息。
时间: 2024-10-01 07:35:20