How to make EasyUI JS Datagrid to support filter and scrollview together

W.ZH

Issue: When you use the easyUI datagrid, you have millions of rows, you need to use pagination or scroll-view to support it.  But you might found that your filter will not work properly after you add scrollview or pagination feature.

You will find the filter may conflict with the pagination or table scroll feature.  Most common thing will see is filter sometimes work, but some times not. Problem occurs randomly on UI.

Reason: Most reason is because you want use the local filter but the datagrid data are gotten from remote/server side json. Then you will see this problem easily.

Solution: You need to run the filter and the pagination/scroll  both from server side or both from local. Here is some sample code I created to support the filter and scroll both together from remote server side.

Two more extension js files you need:

/resources/js/easyui/datagrid-filter.js">
/resources/js/easyui/datagrid-scrollview.js">

HTML for table:

<table id="data_list_table" style="height:750px"  ></table>

JS for load table

jQuery(document).ready(function() {
            $('#data_list_table').datagrid({
                url : '<%=path%>/web/sampleController/getSampleByPage',
                toolbar : '#data_list_table_toolbar',
                nowrap: true,
                fitColumns:true,
                singleSelect:true,
                rownumbers : true,
                view: scrollview,
                remoteFilter: true,
                pagination : false,
                autoRowHeight:false,
                pageSize : 30,
                columns:[[
                            {field:'sampleid',title:'DB ID',width:35},
                            {field:'samplename',title:'Slot Name',sortable :true, order : 'asc', width:110},
                            {field:'sampletype',title:'Slot Type',sortable :true, order : 'asc', width:95},
                            {field:'sampledesc',title:'Slot Description', width:250}
                        ]]
             });
               // filter for the table
             var dg = $('#data_list_table').datagrid().datagrid('enableFilter');
   });

So every time you load the table and also move mouse to scroll next page data, you will get the http request contains these data in the request:

sort
order
page
rows
filterRules – contains the filterRules data and you need to convert to your SQL where conditions.

here is a sample to process it in Spring and JAVA:

@RequestMapping(value = "/getSampleByPage", method = { RequestMethod.POST,
            RequestMethod.GET })
    @ResponseBody
    public EASYUIJSONTransport getSampleByPage(SearchInput search,
            HttpServletRequest request) throws Exception {
        int total = sampleService.totalCountSample();
        List<Sample> samples = searchbypage(search); // do by your self JPO access method

        return new EASYUIJSONTransport(total, slots);
    }
********************************************************
public class SearchInput {
    private String sort = "samplename";
    private String order = Common.sort_asc;
    private int page = Common.default_page;
    private int rows = Common.default_rows;
    private String filterRules = "";
.............................

}

Reference :

http://www.jeasyui.com/extension/datagrid_filter.php

http://www.jeasyui.com/tutorial/datagrid/datagrid27.php

http://www.jeasyui.com/extension/datagridview.php

Advertisements