jquery.jqgrid 重新加载表格数据
〇、目的
select下拉框选择选择某选项之后,DataGrid数据表格也能随之变动。
一、使用的技术
1.后 Java、Spring MVC
2.前 JQuery-select2,jquery.jqgrid
二、代码-前
- 1 下拉框
- 2 <#form:select id="contractId" path="contractId" items="${contractList}" itemLabel="contractCode" itemValue="id" blankOption="true" class="form-control" />
- DataGrid配置
1 $("#DataGrid的ID").dataGrid({- 2
- 3 data: ${products},//json格式
- 4 datatype: "local", // 设置本地数据
- 5 autoGridHeight: function(){return \'auto\'}, // 设置自动高度
- 6
- 7 // 设置数据表格列
- 8 columnModel: [
- 9 {header:\'状态\', name:\'status\', editable:true, hidden:true},
- 10 ......
三、代码-后
- Spring MVC中的方法
1 /**- 2 * 返回数据
- 3 */
- 4 @RequestMapping("fullProduct")
- 6 @ResponseBody
- 7 public List<PurProductC> fullProduct(@Param("contractId")String contractId){ //conractId为选择下拉框选项后传递过来的参数,以此查询表格数据
- 8 ContractC contract = new ContractC();
- 9 contract.setId(contractId);
- 10 ContractC c = contractCService.get(contract);
- 11 List<PurProductC> products = new ArrayList<PurProductC>();
- 12 //塞入数据至list
- 13 return products;
- 14 }
四、解决方案
- 1 $(function(){
- 2 $("#contractId").select2();
- 3
- 4 $("#contractId").on("select2:select",function(){ //下拉框选中事件
- 5 var param = $(this).val(); //获取下拉框选中的值
- 6 $.ajax({
- 7 type:"POST",
- 8 url:"${ctx}/purchase/purchaseC/fullProduct",
- 9 data:{contractId:$(this).val()},
- 10 async:false,
- 11 success : function(result) {
- 13 // 重新加载数据
- 14 $(\'#DataGrid的ID\').jqGrid(\'clearGridData\'); //先清空,再加载
- 15 $("#DataGrid的ID").jqGrid(\'setGridParam\', {
- 16 datatype:"local",
- 17 data:result //result为ajax请求成功后后台返回的products
- 18 }).trigger("reloadGrid");
- 19 }
- 20 });
- 21 });
- 22 });
版权声明:本文为Drajun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。