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

Common GUI tools used in the Ubuntu 14

W.ZH

Here list some of Linux apps I use often on the Ubuntu 14.

LibroOffice             – office sofware
Sublime                   – text editor
Bless Hex editor         – Hex editor
IDLE                        – python IDE
JEdit                        –  another text editor. load bit slow

RapidSVN                  – SVN client
Meld Diff Viewer          – GUI diff for folders and files

pgAdmin III             – postgresQL client
mysql workbench         – MySQL client

Document Viewer          – PDF reader
Remmina Remote Desktop Client – remote desktop client
FileZilla                 – FileZilla, SFTP and FTP client
PuTTY SSH Client         – putty client

Audacity                 – best profession audio software
Pencil                     – the free flow chart drawing tool
KSnapShot                 – free snapshot for screen grab.

pinta – tools like paint in windows

 

Convert GoogleSites To WordPress

By W.ZH Apr 2016

Recently I setup this WordPress and tried to move my goolge sites articles to here. So here I  created a simple tool to read out the sites pages and convert them into the WordPress posts and keep the original dates of them.

I have shared my tools to GITHub at here:

https://github.com/WayneShare/GoogleSitesToWordPress

GoogleSitesToWordPress By Wayne.A tool to help convert your google sites pages to the WordPress posts.

  1. Export your google sites pages into a folder,use the tool of google-sites-liberation at this link https://github.com/sih4sing5hong5/google-sites-liberation by this tool, each page on sites will be created a index.html in a folder or subfolder.
  2. Find out your WordPress accounts and URL for XMLRPC API.
  3. Make the config properties files in our code, update the ToolConfig.properties file to your settings.
  4. Try to run the GoogleToWordPress.class to let it: a. search your folder to find out all index.html file b, extract the html content of your sites pages and convert them to posts for WordPress. c. write to WordPress via XMLRPC API.
  5. Feel free to change the code upon the needs. Java code is really simple and we use the lib of jwordpress of Bican to access the WordPress

Enjoy it if it is useful.