Jquery uses EasyUI Tree to asynchronously load JSON data (Spanning Tree) and easyuijson

Jquery uses EasyUI Tree to asynchronously load JSON data (Spanning Tree) and easyuijson

In the past few days, a menu that supports unlimited levels is required.

I am also a cainiao, and there are not many things I can think of, so I use the tree component of Easy UI.

I have to say that easyui is really powerful.

Because it is an infinitely large menu, the data volume may be a little large, so asynchronous loading is considered.

However, because the data transmitted from the background is an entity by default, JSON strings are spliced in the background.

Finally, I found N more code on the Internet, and then asked several netizens in the group to finally develop this little thing.

I. HTML code

<Div id = "categoryChooseDiv" title = "select a category" style = "width: pixel PX; height: 300px; "> <ul id =" MyTree "> </ul> </div>

The html part is simple. You only need to put a ul.

Ii. JavaScript code

Function showCategory () {$ ('# mytree'). tree ({checkbox: false, url:'/category/getCategorys. java? Id = 0', onBeforeExpand: function (node, param) {$ ('# mytree'). tree ('options'). url = "/category/getCategorys. java? Id = "+ node. id;}, onClick: function (node) {var state = node. state; if (! State) {// determine whether the selected node is the root node currentId = node. id; $ ("# chooseOk "). attr ("disabled", false); // if it is the root node, the OK button is available.} else {$ ("# chooseOk "). attr ("disabled", true); // if it is not the root node, the OK button is unavailable }}});}

The last few pieces of code are required by my project. Click "OK" only when the minimum node is selected ". Otherwise, it is not allowed.
When you click OK, You need to obtain all the parent nodes of the selected node.

Var nodes = []; // defines an array to store each node name var node =$ ("# MyTree "). tree ("getSelected"); // currently selected node nodes. push (node. text); // first place the current node var pnode = vertex ('{mytree'}.tree('getparent',node.tar get); // obtain the parent node of the current node while (pnode! = Null) {nodes. push (pnode. text); // Add each parent node in sequence until the root node reaches pnode = parent ('{mytree'}.tree('getparent',pnode.tar get);} nodes. reverse (); // sort array elements in reverse order $. each (nodes, function () {// loop value var html = this; $ ("# inCategoryDiv" ).html ($ ("# inCategoryDiv" ).html () + html + "> ");});

In fact, the main problem is the processing of data in the background, that is, how to convert the data into JSON data that can be identified by easyui tree.

Iii. Background code (Java)

Public ResponseEntity <String> findBy (Integer Id) {List <Category> categorys = getcategorys (Id); String ss = ""; ss ++ = "["; for (Category category: categorys) {ss + = "{"; // ss + = "\" id \ ": \" "+ category. getId () + "\", \ "text \": \ "" + category. getName (). toString () + "\", \ "iconCls \": \ "icon-OK \", \ "state \": \ "closed \"";; list <Category> cs = getcategorys (category. getId (); // determines whether the current node has sub-nodes if (cs. size () = 0) {// No subnode sets the state to null ss ++ = String. format ("\" id \ ": \" % s \ ", \" text \ ": \" % s \ ", \" iconCls \":\"\", \ "state \": \ "\" ", category. getId (), category. getName ();} else {// set the state of the subnode to closed ss + = String. format ("\" id \ ": \" % s \ ", \" text \ ": \" % s \ ", \" iconCls \":\"\", \ "state \": \ "closed \" ", category. getId (), category. getName () ;}ss ++ = "}," ;}ss = ss. substring (0, ss. length ()-1); ss + = "]"; return super. responseString (ss); // character encoding conversion}

A general process is to send an ID from the foreground, get the object, and then loop the object, then perform string processing. The purpose of setting state here is to let the easyui tree know whether the current node is the lowest level node, and then display different icons in front.

Summary:

It's just this little thing that has been tossing me for several days. But I finally understood it and understood a lot.

I used to think that JSON is mysterious. Now I think it is still regular.

One of the key points of easyui tree is processing JSON data. There are two ways to achieve this: the first is to use the String format method. For this reason, you can refer to related APIs on the Internet. I wrote an error for the first time. The placeholder character string should be % s. I wrote {0} for half a day to find out the problem. The second method is the line I commented out above, which is directly spliced using strings.

Then, when I obtained all the parent nodes of the current node, I had to spend some time on it. I went online to find a lot of code and couldn't use it. Finally, I tried to solve it myself.

Advantage: asynchronous loading is supported, and an unlimited number of resources are supported.

Disadvantage: It is too cumbersome and requires too much background data format.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.