jquery.jqgrid 重新加载表格数据

Posted 2021-11-25 drajun

〇、目的

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