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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM