Their own practice, I hope to provide you with a train of thought;

The system uses JSTREE to make tree display. The data volume is about 3000 at the beginning, and the time of tree generation is fast, but it needs to add 50000 data later. Jstree plug-in is slow to form tree, and will cause page lag. It takes about 15 seconds for 30,000 pieces of data and about 30 seconds for 50,000 pieces of data, so a large amount of JSTREE data is optimized.

Through various attempts, such as looking at foreign documents, looking at jsTree source code, and reading jsTree documents, the _append_json_data method in jsTree works best without causing the page to become stuck and unable to be clicked.

​

JsTree a large number of data implementation ideas (first load the parent node display, and then load a large number of child node append into) :

1. First request the data of the parent node (the company name in this system is the parent node) and display it through jsTree to form a tree with only the company name. This data is not much, so display it first to improve the user experience. The general code is as follows:

$('#factoryDeviceTree').jstree({ "core": { 'data': function (obj, callback) { var jsonstr = "[]"; var jsonarray = eval('(' + jsonstr + ')'); var url = 'xxxxxxxxxxxx/xxxxxxxxx'; $.ajax({ type: "POST", url: sys.rootPath + url, dataType: "json", cache: false, success: function (data) { jsonarray = result; callback.call(this, jsonarray); }.bind(this) }); }.bind(this), "themes": { "responsive": true, }, "multiple": true, "animation": 200, "dblclick_toggle": true, "check_callback":true, "expand_selected_onload":false }, "progressive_render":true, "checkbox": { "keep_selected_style": false, "cascade":"down", "three_state": True, // Parent-child cascade select "cascade_to_hidden":"false"}, "plugins": ["search","checkbox"]})Copy the code

**_append_json_data** When the page is ready, it requests data from the child nodes of the company. This is a large number of data nodes (50,000). When the tree of the company name is formed, the ready method is triggered

(Create_node = _append_json_data) (append = “append”) (append = “append”)

$('#factoryDeviceTree').on('ready.jstree', function (e, Data) {// companyCarMap is a large number of child node data returned in the format of {key:value,key:value.... [{icon: "fa fa-car online", id: "456745898", isBlack: [{icon: "fa fa-car online", id: "456745898", isBlack: 0, offLineCount: 0,text:"XXXX"},{...},{...},...]  for(let key in companyCarMap){ $('#factoryDeviceTree').jstree("_append_json_data","#"+key,companyCarMap[key],function(){ Even if this function does nothing}); }}});Copy the code

It is found that _append_json_data adds child nodes in a single run at 3000 seconds or less. (The red box is a rendering of 900 children.)

​

If the number of nodes is greater than 3000, it is recommended to put them at the end of appEnd. You can refer to the following code:

$('#factoryDeviceTree').on('ready.jstree', function (e, data) { let lastAddArr = []; If (companyCarMap[key].length>3000){if(companyCarMap[key].length>3000){if(companyCarMap[key].length>3000){if(companyCarMap[key].length>3000){ lastAddArr.push(key) }else{ $('#factoryDeviceTree').jstree("_append_json_data","#"+key,companyCarMap[key],function(){ Console. log(key," insert successfully ",new Date().getTime())}); } } for (let index = 0; index < lastAddArr.length; index++) { const k = lastAddArr[index]; $('#factoryDeviceTree').jstree("_append_json_data","#"+k,companyCarMap[k],function(){console.log(k," Insert succeeded ",new Date().getTime()) }); }});Copy the code

These are the jsTree practices for loading large amounts of data;

Here is my step-by-step practice for jSTREE loading large amounts of data:

1. In order to quickly separate the tree structure from the associated map, the first loading map data and tree data are separately rendered, and the following operation tree can affect the data in the map. After the separation of map and tree data, the optimization time of 1 and 2 seconds is optimized

2. Since it takes 30s to load 50000 trees, and the page is stuck when loading the tree, it is impossible to click on the page. Therefore, it is necessary to render part of the tree first, and slowly load and splice the displayed part into the jsTree. The performance is very slow, and the DOM is being manipulated one data at a time, slower than before.

3. Next, I thought of creating a documentFragment and jstree would be generated directly in the documentFragment. Then append to the DOM, hoping that the jQuery selector can not find the object

4, hope to load the parent node first, and then click when the request child node splices up, found that the drawback is search, search is the front end search, some parent node did not click there is no child node, search data is incomplete.

**_append_json_data** (create_node); **_append_json_data (create_node); ** json_data (create_node); Create_node is added to the DOM one by one, and _append_json_data is added to the DOM once after the JSON data is passed, similar to the virtual DOM.

The third argument of **_append_json_data** must be passed, even though the callback does nothing.

The _append_json_data source is located on line 1585

If you have a better way or a deeper understanding, please comment

​