Ztree First Experience (ii)--re-continuation of the frontier

The previous article introduced the next ztree, as well as the simple implementation. In this book, let's expand and see how to get the simple format JSON data from the background.

1). Let's take the departmental organizational structure of the project as an example, starting with the manager layer approach. In order to facilitate the transfer of JSON, the use of a map form of the HQL statement, so that the data is the standard key-value form.

/** * Map Loading all departments * @returnList <DepTree> * Department's list Collection * @author Zhanglianhai * @since2015.07.10 */@SuppressWarnings ("uncheck Ed ") Public list<deptree> Getdeptree () {String hql =" Select New map (id as id,departname as departname,parentid as PA Rentid) from Department "; list<deptree> list = Dao.find (HQL);//Call the Find () method of the underlying package to execute the query return list;}

2). Next, the method in action is to turn the acquired list<deptree> into a JSON string and pass it to the foreground page.

/** * Load ALL departments *  * @returnnull * @throws Exception * @author Zhanglianhai * @since2015.07.10 */public String Listbyajax () throws E Xception {list<deptree> listtree = Departmentmanager.getdeptree ();//Call Manager's method, get list<deptree> Data Jsonarray JSON = Jsonarray.fromobject (listtree);//Convert list<deptree> to Jsonarray object RenderText (json.toString ()) ;//Turn into a JSON string and pass it to the foreground return null;}

3). Finally, the data in the page JSP is displayed.

<script type= "Text/javascript" >$ (function () {var setting = {data: {simpledata: {enable:true,idkey: "id",//Node I D, corresponding to the JSON in the Idpidkey: "ParentID",//node PID, corresponding to the JSON parentidrootpid:0//root node is set to 0},key: {name: "Departname"//Node display name property, corresponding to Departname}},view in JSON: {dblclickexpand:false,//Suppress double-click to expand selectedmulti:false//Suppress multi-select},async: {enable:true,// Get all node data asynchronously, default Falseurl: "Test!listbyajax.action"}};$.fn.ztree.init ($ ("#tree"), setting);}); </script>

As you can see, this is already loaded asynchronously, just to get all the data at once.

Read a lot of data from the load on the web, not all of their own handwriting of an Ajax from the back like to get to the data, and then the data to Ztree to initialize the display. In fact Ztree has provided "async" This property, as long as the simple configuration, it can be displayed.

4). Take a look at the effect:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Ztree First Experience (ii)--re-continuation of the frontier