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

原文地址:https://www.cnblogs.com/Drajun/p/10647848.html

时间: 2024-10-09 06:17:49

jquery.jqgrid 重新加载表格数据的相关文章

JQuery跨域加载JSON数据或HTML。

前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $.ajax({ type: "get", async: false, url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL,该URL返回一段JS数据.如需返回HTML,只需把HTML组织成JSON即可

动态加载表格数据(自定义)

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> tr>td{ width: 100px; border: 1px solid red; } </style></head><body><ul id="boxU

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面 从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,

Jquery.ajax 详细解释 通过Http请求加载远程数据

首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dataType: "json", data:{ filter: "test", pageNumber: 1, pageSize: 5 }, success: function(data){ // do something }, complete: function(XMLH

Ajax在jQuery中的应用(加载异步数据、请求服务器数据)

加载异步数据 jQuery中的load()方法 load(url,[data],[callback]) url:被加载的页面地址 [data]:可选项表示发送到服务器的数据,其格式为 key/value . [callback]:可选项表示加载成功后,返回至加载页的回调函数. 全局函数 getJSON() $.getJSON(url,[data],[callback]) <div class="container col-lg-12"> <div style=&quo

jQuery.ajax()通过 HTTP 请求加载远程数据实力详解

通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.e

jQuery EasyUI-DataGrid动态加载表头

项目总结—jQuery EasyUI-DataGrid动态加载表头 目录(?)[-] 概要 实现 总结 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如果我们显示到前台的数据来自数据库不同的表,那么表头也需要动态的加载,这篇文章我们就来看下在EasyUI-DataGrid中动态加载表头和数据. 实现 我们要实现的功能是根据我们的需要,让DataGrid显示不同的数据

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr