Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "how to apply the front-end AmazeUi Tree" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to apply the front-end AmazeUi Tree" article.

Step 1: basic introduction

Step 2: logical writing (new JS writing can be created):

/ * roughing background data (adding id, and pid,type,title to a single piece of data). If the data returned by the background data with a hierarchical structure directly skip this step) * for (iDepositionial2) {/ / data [I] .frameMenuStr / / intercepts the last two "." The following string / let arr = ["a", "b", "c", "d", "e", "f", "g", "h", "I"]; let str = odata [I] .frameuMenStr; / / current data ID [I] .id = arodata.level-1] + str.substring (".") + 1) Let j = str.lastIndexOf ("."); / / current data parent node ID odata [I] .pid = arr [odata [I] .level-2] + str.substring (str.lastIndexOf (".", jMuth1), str.lastIndexOf ("."); odata [I] .title = odata [I] .menuName Odata [I] .type = 'item';} else {odata.id = "a" + odata.frameMenuStr; odata.title = odata.menuName; odata.type =' folder' / / odata [I] .pid = "00000000" }} * * / * data: input data (the values returned in the background are id and pid) * the region to be bound by dom id * callbackfun: callback function * example: function bindTree (data,dom) Callbackfun) {/ * Core applications: array operation * / let tree = data Var treeMaps = {}; tree.forEach (function (value, index) {treeMaps [value.id] = value;}) var data = [] Tree.forEach (function (value, index) {var parent = treeMaps [value.pid] if (parent! = = undefined) {if (parent.products = undefined) {parent.products = []} parent.products.push (value)} else {data.push (value) }}) / * the above code is the data of secondary processing so that there is no hierarchical structure before. Processed into hierarchical data structures * / dom.tree ({dataSource:function (options, callback) {/ / Analog Asynchronous loading let num = 0 / / distinguished by Num value operation (this is a pit, this method must be used, not data | | options.products) if (num==0) {setTimeout (function () {callback ({data: data}); / / initial display of the highest level data num++;}, 400) } else {setTimeout (function () {callback ({data: options.products}); / / Click the data displayed by the node}, 400);}, multiSelect: false, cacheItems: true, folderSelect: false,}) Dom.on ('selected.tree.amui', function (event, data) {/ / do something with data: {selected: [array], target: [object]} / / console.log (data); / / console.log (event); uuid = data.target.menuId; resData = data.target If (callbackfun | | typeof callbackfun! = 'undefined' | | callbackfun! = undefined) {return callbackfun (uuid);}}); dom.tree ("discloseAll"); / / this function does not work temporarily. } / * * directly call the function * / bindTree (odata,$ ("# tree"), function () {console.log ("-")}); remarks: / / dom.tree ("destroy"); / / data update I call this function. But once called, all the dom structures are gone, so you have to re-inject the dom structure into the place where the data was previously bound. / * plug-in structure redrawing * / let str = ""; / / str+=''; / / str+='' / / str+=''; / / dom.append (str) The above is about the content of this article on "how to use the front-end AmazeUi Tree". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.