JqGrid自定义搜索，点击之后刷新了整个页面原因

最新推荐文章于 2022-12-06 23:14:06 发布

程序猿秃头之路

最新推荐文章于 2022-12-06 23:14:06 发布

阅读量817

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： JqGrid 搜索

本文链接：https://blog.youkuaiyun.com/zhang33565417/article/details/98970890

Web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一位开发者在使用JqGrid和BootStrap搭建的表格应用中遇到的搜索功能问题。当点击搜索按钮后，数据虽然能正确显示，但页面会立即回到初始状态，导致搜索结果无法持久展示。通过调整表单提交方式，将submit改为click事件监听，成功解决了数据闪现的问题。

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

背景：

JqGrid+BootStrap整了一个表格，没有用JqGrid自带的搜索，而是自己写在了红框处，搜索处的代码：

                <div class="panel-body" id="all">
                    <form class="form-inline text-center" action="#">
                        <select id="sel" name="by" class="form-control">
                            <option value="id">供应商ID</option>
                            <option value="name">供应商名称</option>
                            <option value="leader">负责人</option>
                            <option value="phone">联系电话</option>
                        </select>
                        <input id="inp" type="text" class="form-control" name="content" placeholder="所有">
                        <button type="submit" class="btn btn-success" id="btn1">搜索</button>
                    </form>
                </div>

点击搜索重新刷新表格中的数据，代码：

            //搜索  刷新表格中的数据
            $("#btn1").click(function () {
                //获取搜索条件和内容
                var by = $("#sel").val();
                var content = $("#inp").val();
                //清空表格中数据
                $("#tt").jqGrid("clearGridData");
                //重新接收表格数据
                $("#tt").jqGrid("setGridParam",{
                    url:"${pageContext.request.contextPath}/supplier/findLike?by="+by+"&content="+content+"",
                    dataType:"json",
                    type:"post"
                }).trigger("reloadGrid");
            });

运行的时候问题出现了：每次点击完搜索后，数据确实被搜索出来了，但是搜索出来的数据页面一闪而过，然后回到了最初的页面！！！！

改了好长时间不知道哪里的问题！