JqGrid刷新表格问题

最新推荐文章于 2020-04-28 19:19:06 发布

Zhac

最新推荐文章于 2020-04-28 19:19:06 发布

阅读量5.3k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/zhaihao1996/article/details/98970611

版权

JavaWeb 专栏收录该内容

38 篇文章

订阅专栏

本文探讨了在使用JqGrid进行数据查询并创建表格后，如何进行有效的模糊查询和表格刷新。直接清空或移除表格的方法无效，而重新创建表格则可能导致先前表格残留。通过分享一种刷新表格数据的技巧，解决了这个问题。同时指出，如果在form表单中使用submit类型的button，会导致页面整体刷新，应当设置button的type属性以防止此情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景:首先使用JqGrid查询数据创建表格,然后需要进行模糊查询,在表格外设置一行搜索项,进行搜索.如图所示

模糊查询后要对jqGrid表格进行刷新,这时候直接empty表格或者remove表格是没有用的,重新新建一个表格虽然可以,但是之前的表格无法删除还有再次搜索的话还需要再建一个表格,无法从根本上解决问题.所以有如下操作刷新表格内的数据.

$("#tt").jqGrid('clearGridData');//清空表格内的数据
$("#tt").jqGrid("setGridParam",{  //重新加载表格内数据
   url:"${pageContext.request.contextPath}/supplier/queryLike?name="+name+"&option="+option,  //发送请求地址
   datatype:"json",     //接收参数格式
   type:"get"           //发送参数方法
   }).trigger("reloadGrid"); //重新加载表格

使用该方法就可以简单的刷新jqGrid表格了,是不是很简单哈哈。

这里面出现一个小错误就是，再点击查询后会刷新整张页面.我这里遇见的这个错误是因为写了form表单并且没有给button设置type 或者设置的 submit 都会导致刷新页面。

最后附上本文提到的代码

html代码

<form class="form-inline" action="#">
     <select id="option" class="form-control col-md-1">
         <option value="id">ID</option>
         <option value="name">名称</option>
         <option value="leader">负责人</option>
         <option value="phone">电话</option>
     </select>
<input id="queryName" type="text" class="form-control col-md-5"><button type="button" id="btn" class="btn btn-success" onclick="find();">搜索</button>
<table id="tt" class="table table-striped table-bordered table-hover">
</table>
<div id="pager"></div>

js代码

        function showEmp() {
            // $('#tt').empty();

            // 展示员工信息
            $('#emplist').show();
            $('#tt').jqGrid({
                url:'${pageContext.request.contextPath}/supplier/queryAll',
                datatype:'json',
                //引入bootstrap的UI样式
                styleUI:'Bootstrap',
                colNames:['供应商ID','供应商名称','负责人','联系电话','创建日期'],
                cellEdit:true,
                editurl:'${pageContext.request.contextPath}/supplier/operation',
                colModel:[
                    {name:'id'},
                    {name:'name',editable:true},
                    {name:'leader',editable:true},
                    {name:'phone',editable:true},
                    {name:'createDate',editable:true}
                ],
                pager:'#pager',
                rowList:[3,5,10,20,30],
                rowNum:3,// 指定默认每页展示的条数，值必须来自rowList中的一个
                height:200,
                viewrecords:true,// 是否显示总记录条数
                autowidth:true,
                multiselect:true,// 在表格第一列前面，加入复选框
                page:1//指定初始化页码
            }).navGrid('#pager',{'add':true,'edit':true,'del':true,'search':false,'refresh':true});
        }