EasyUI使用心得——datagrid的查询功能和SubGrid冲突导致分页无效问题

矫情吗；* 2022-06-17 07:45 263阅读 0赞

在项目中使用easyui的datagrid也是有段时间了，easyui很方便确实，但是还是有些小问题，至少在我使用的过程中，发现的这些问题。
    在datagrid使用SubGrid后，我在后面添加过滤功能。

$("#dg").datagrid('enableFilter');

很无奈，查询是出来，但是点击下一页数据却没有去服务端获取。
    我将查询的代码放到SubGrid定义的前面，分页是正常了，但是查询确是失效了。
    找了很多的原因，换过版本，用的官方demo的jQuery版本，等等还是不行。其实easyui的查询方法还真的很方便，很简单。无奈只能把查询删除，自己手动写。
    下面是实现过程：
    首先定义查询控件：

<form id="searchForm" style="padding: 0;margin: 0"> 
        <table border="0" width="100%">
            <tr style="height:30px">
                <td width="10%" style="text-align:right;border:0px">
                    查询条件：
                </td>
                <td width="15%" style="border:0px">
                    <input class="easyui-textbox" name="变量名" id="变量名" style="width:100%"> 
                </td>   
    
                <td width="10%" style="text-align:right;border:0px">
                    查询条件：
                </td>
                <td width="15%" style="border:0px">
                    <input class="easyui-textbox" name="变量名" id="变量名" style="width:100%"> 
    
                </td>   
    
                <td width="10%" style="text-align:right;border:0px">
                    查询条件：
                </td>
                <td width="15%" style="border:0px">
                    <input class="easyui-textbox" name="变量名" id="变量名" style="width:100%"> 
                </td>
    
                <td width="10%" style="text-align:right;border:0px">
                    查询条件：
                </td>
                <td width="15%" style="border:0px">
                    <input class="easyui-textbox" name="变量名" id="变量名" style="width:100%"> 
                </td>
    
    
            <tr style="height:30px">
                <td colspan="8" style="text-align:center;border:0px" >
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchCase()" style="margin-right:20px"><strong>查询</strong></a>          
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-redo" onclick="resetSearch()" ><strong>重置</strong></a>
                </td>
    
            </tr>                                               
    
        </table>   
    </form>

添加查询和重置方法：

//查询
    function searchCase() { 
        var param = new Object();   
        //获取查询条件
        var searchFormData = $("#searchForm").serializeArray();                
        $.each(searchFormData,function(i,v){ 
            param[v.name] = v.value;
        });
    
        //根据查询条件重新加载datagrid，这里会将查询的条件信息发送到后端，url是在datagrid定义时的url，只需在后端根据查询的添加获取相应信息返回即可。
        $('#dg').datagrid("reload", param); 
    
    }
    
    //重置查询
    function resetSearch() { 
        $("#searchForm").form("clear");
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 EasyUI使用心得——datagrid的条件查询，过滤

在页面初始化时加入过滤代码和过滤条件： dg.datagrid('enableFilter', [{ field:'d

冷不防/ 2022年10月01日 00:59/ 0 赞/ 435 阅读

相关 jQuery EasyUI datagrid本地分页

一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。这里重点用到了pagination的监听，以及JS数组的sli

淡淡的烟草味﹌/ 2022年08月10日 14:44/ 0 赞/ 195 阅读

相关 easyui的datagrid使用以及分页

easyui对于开发桌面级的WEB应用界面确实十分方便，而且美观。这里着重记录一下datagrid的使用，以及通过前后端配合实现的超简单的数据分页查询方式。 easyui支持

怼烎@/ 2022年08月03日 13:55/ 0 赞/ 308 阅读

相关 easyui datagrid 的分页和筛选

![Center][] 筛选用到一个datagrid-filter.js文件，它在easyui的包中是没有的，要自己导入：代码为 (function(

喜欢ヅ旅行/ 2022年07月17日 01:59/ 0 赞/ 435 阅读

相关 EasyUI使用心得——datagrid的条件查询的中文化

if($.fn.datagrid && $.fn.datagrid.defaults && $.fn.datagrid.defaults.operators ){

古城微笑少年丶/ 2022年06月18日 08:10/ 0 赞/ 283 阅读

相关 EasyUI使用心得——datagrid的查询功能和SubGrid冲突导致分页无效问题

在项目中使用easyui的datagrid也是有段时间了，easyui很方便确实，但是还是有些小问题，至少在我使用的过程中，发现的这些问题。在datagrid

矫情吗；*/ 2022年06月17日 07:45/ 0 赞/ 264 阅读

相关 EasyUI分页查询

目录目录基于EasyUI分页查询HTML 小黑板基于EasyUI分页查询

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:22/ 0 赞/ 267 阅读

相关 easyui datagrid 后台分页+排序

一、jsp页面定义table <div><table id="dg"></table></div> 二、js页面加载table $(function ()

男娘i/ 2022年05月24日 06:11/ 0 赞/ 396 阅读

相关 Easyui datagrid 分页

老规矩还是先上效果图： ![70][] 其实这个分页非常简单，耽误了大半天的时间，还是对easyui 理解的不够透彻，网上有很多关于easyui 的demo 或者列子，看完

谁借莪１个温暖的怀抱￠/ 2022年05月22日 10:28/ 0 赞/ 308 阅读

相关 EasyUI 自定义DataGrid分页

DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。 ![\\][20120708094

谁借莪１个温暖的怀抱￠/ 2022年03月27日 05:43/ 0 赞/ 372 阅读