How to solve the filter function of EasyUI TreeGrid, easyuitreegrid

How to solve the filter function of EasyUI TreeGrid, easyuitreegrid

Preface

This week, we have been entangled in the filtering feature of easyui's treegrid. The reason is naturally an inexplicable demand in the project.

Easyui is a front-end framework of backend programmers. But to tell the truth, except for the api, it is impossible for me to directly write the node information in it, here, I would like to worship the front-end students.

Let's talk about the requirement. In a recent project, there was an easyui treegrid display interface. At first there was no problem, but it was inconvenient to import the data. The reason is that treegrid did not perform paging processing during development. Currently, the number of data records in the test environment reaches 456. If you want to find one and then process it, it can only be said to be time-consuming and laborious. So I came up with the idea of developing a filter search function.

At first I thought it was still simple to call the api or something, because I remember that the datagrid had an official datagrid-filter.js extension, but I checked the api manual and still did not find any ready-made method for treegrid. Only two attributes are found, loader and loadFilter, which seem to have some relationship.

During this period, I also read the solution on the Internet. I don't know if it is too simple. There are very few resources on the Internet for TreeGrid filtering. Bo Wenli was also ignored by Daniel.

Solution

Here I will list an article I saw in the garden, and I have not found any other similar content.

You can query the information of the root node and specific sub-nodes and start to use the loadData loading url method of EasyUI TreeGrid to implement the query function. Therefore, after querying the data returned by asynchronous AJAX, assign a value to the variable, and then use the loadData of TreeGrid to load the returned results of this json format to achieve the query function of TreeGrid, the Code is as follows, Source Address: http://www.bkjia.com/article/120646.htm

Function searchROM () {var product = $ ('# product '). combobox ('getvalue'); var keytype = $ ('# keytype '). combobox ('getvalue'); var keywords = $ ('# keyword '). val (); var url = encodeURI ('/GoodsROM/ROMList? Product = '+ product +' & keytype = '+ keytype +' & keywords = '+ keywords +' & '+ Math. random (); $. post (url, {}, function (data) {var d = data; // return the json format result $ ('# grid '). treegrid ('loaddata', d); // load data to update treegrid}, 'json ');}

The idea is good, but our back-end code is encapsulated in General, and there is a lot of impact on the background code, so we still think of the api and try the loader and loadFilter at the beginning.

LoadFilter: function (data) {var newData = new Array (); var filter = $ ("# filter "). val (); for (var I = 0; I <data. length; I ++) {if (data [I]. nodeName. indexOf (filter)> 0) {// defines an array newData. push (data [I]) ;}} if (newData. length = 0) {return data;} else {return newData ;}},

I filter the query results, return the processed results, and reload them using the load method.

The query function is implemented because the database needs to be loaded once for each query. The data query duration during page Initialization is 20 s, after checking for 20 s and 20 s, the result is naturally beaten back by the leaders.

Continue to look for this idea. Since the database access can be implemented, do I save the data when the page is initialized for the first time, so I didn't perform logic verification in loadFilter this time. I just took out the data value and put the logic processing in another function. However, I did not have to worry about it, and the effect was finally realized, only check the database once during initialization, and other searches will not load the database. Below I will post the relevant code for your reference. If you have better ideas, please give me some ideas. Thank you first.

Var allData = new Array (); function doOrgChartInit (idTreeGrid, idMenu, idUriQuery) {var bFound = true; $ ('#' + idTreeGrid ). treegrid ({rownumbers: true, animate: true, collapsible: true, fitColumns: true, url: idUriQuery, idField: 'nodeid', treeField: 'nodename', loadFilter: function (data) {if (bFound & data [0]. nodeName! = "Root") {allData = data; bFound = false;} return data;}, columns: [[{halign: 'center', align: 'left', field: 'nodename', title: 'name', width: 200}, {halign: 'center', align: 'left', field: 'description', title: 'description ', width: 100, align: 'center'}], // toolbar: [{// refresh iconCls: 'icon-reload', handler: function () {doTreeGridRefresh (idTreeGrid) ;}}, '-', {// extend the current node iconCls: 'icon-redo ', handler: function () {doTreeGridExpand (idTreeGrid) ;}}, '-', {// Contract the current node iconCls: 'icon-undo ', handler: function () {doTreeGridCollapse (idTreeGrid) ;}, '-', {// search box text: '<input id = "filter" type = "text"/> ',}, {// search for iconCls: 'icon-search', handler: function () {doFilter (idTreeGrid) ;}}], // The onContextMenu: function (e, row) is displayed on the worker menu) {e. preventDefault (); $ (this ). treegrid ('select', row. nodeId); // alert (row. orgChartPk); vOrgChartPk = row. orgChartPk; $ ('#' + idMenu ). menu ('show ', {left: e. pageX, top: e. pageY}) ;}}) ;}function doFilter (idTreeGrid) {var newData = new Array (); var filter =$ ("# filter "). val (); if (allData. length = 0) {alert ("Please click the Root initialization interface first"); return false ;}for (var I = 0; I <allData. length; I ++) {if (allData [I]. nodeName. indexOf (filter)> 0) {// defines an array newData. push (allData [I]) ;}} if (filter = "") {$ ('#' + idTreeGrid ). treegrid ('loaddata', allData);} else {$ ('#' + idTreeGrid ). treegrid ('loaddata', newData );}}

Summary

The above section describes how to solve the filter function of EasyUI TreeGrid. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!