EasyUI implements asynchronous tree loading (Integrating Struts2) and easyuistruts2

EasyUI implements asynchronous tree loading (Integrating Struts2) and easyuistruts2

First, the jsp page has ul for displaying the Tree

<ul id="mytree"></ul>  

Load Tree

<script type="text/javascript">$('#mytree').tree({       url:'treeLoad.action'}); </script>

Configure Action

<struts><package name="tree_json" extends="json-default"><action name="treeLoad" method="treeLoad" class="com.home.web.TreeAction"><result type="json"><param name="root">treeNodes</param></result></action></package></struts>

Note:

1. extends is json-default, which indicates the format of the returned json object.

2. In result, the name of param is root, and the value set in it is the JSON object to be returned in the action.

Object Tree needs to be encapsulated

Public class TreeNode {private static final long serialVersionUID = 1L; private String id; // node idprivate String text; // The displayed node text private String state = "open "; // node status, 'open' or 'closed '. The default value is 'open' private boolean checked. // check whether the node is selected. public TreeNode () {} public TreeNode (String id, String text, String state, boolean checked) {this. id = id; this. text = text; this. state = state; this. checked = checked ;}//... omit setXX () getXX ()}

Table Structure

First, query all data whose parentid is null, and then determine whether there are subnodes under the node. If yes, the status is closed.

When you continue to expand the tree, the ID value is passed in and the child nodes of the node are queried.

Action method implementation

Import java. SQL. connection; import java. SQL. resultSet; import java. SQL. SQLException; import java. SQL. statement; import java. util. arrayList; import java. util. list; import com. home. util. connectionManager;/*** use JDBC to query data **/public class TreeAction {private List <TreeNode> treeNodes = new ArrayList <TreeNode> (); // return JSON data private String id; // IDpublic String treeLoad () {Statement sta = null; ResultSet rs = null; try {Connection conn = ConnectionManager. getConnection (); sta = conn. createStatement (); String SQL = ""; if (id = null) {// If the id is null, the root node SQL = "select * from easyui_tree where parentid = ''";} else {// query the subnode SQL = "select * from easyui_tree where parentid =" + id;} rs = sta.exe cuteQuery (SQL); while (rs. next () {String id = rs. getString ("id"); String name = rs. getString ("name"); TreeNode node = new TreeNode (); node. setId (id); node. setText (name); node. setChecked (false); // determines whether a subnode exists. If yes, closed or openif (isChildrenNode (id) {node. setState ("closed");} else {node. setState ("open");} treeNodes. add (node) ;}// close all resources ConnectionManager. closeAll (rs, sta, conn);} catch (SQLException e) {e. printStackTrace ();} return "success";}/*** determine whether a subnode exists ** @ return */public boolean isChildrenNode (String id) {Boolean flag = false; statement sta = null; ResultSet rs = null; try {Connection conn = ConnectionManager. getConnection (); sta = conn. createStatement (); String SQL = "select * from easyui_tree where parentid =" + id; rs = sta.exe cuteQuery (SQL); while (rs. next () {flag = true;} // close all resources ConnectionManager. closeAll (rs, sta, conn);} catch (SQLException e) {e. printStackTrace ();} return flag;} public List <TreeNode> getTreeNodes () {return treeNodes;} public void setTreeNodes (List <TreeNode> treeNodes) {this. treeNodes = treeNodes;} public String getId () {return id;} public void setId (String id) {this. id = id ;}}

Encapsulate methods for getting Connection

Import java. SQL. connection; import java. SQL. driverManager; import java. SQL. resultSet; import java. SQL. SQLException; import java. SQL. statement; public class ConnectionManager {public static final String DRIVER = "com. mysql. jdbc. driver "; public static final String URL =" jdbc: mysql: // localhost: 3306/easyui "; public static final String USERNAME =" root "; public static final String PASSWORD = "root";/*** use static generation Code block registration database driver */static {try {Class. forName (DRIVER);} catch (ClassNotFoundException e) {e. printStackTrace () ;}}/*** get Connection ** @ return */public static Connection getConnection () {Connection conn = null; try {conn = DriverManager. getConnection (URL, USERNAME, PASSWORD);} catch (SQLException e) {e. printStackTrace ();} return conn;}/*** disable ResultSet ** @ param rs */public static void closeResultSet (Res UltSet rs) {if (rs! = Null) {try {rs. close ();} catch (SQLException e) {e. printStackTrace () ;}}/ *** close Statement ** @ param st */public static void closeStatement (Statement st) {if (st! = Null) {try {st. close ();} catch (SQLException e) {e. printStackTrace () ;}}/ *** close Connection ** @ param conn */public static void closeConnection (Connection conn) {if (conn! = Null) {try {conn. close ();} catch (SQLException e) {e. printStackTrace () ;}}/ *** close all ** @ param rs * @ param sta * @ param conn */public static void closeAll (ResultSet rs, Statement sta, connection conn) {closeResultSet (rs); closeStatement (sta); closeConnection (conn );}}

Effect

Project source code download: http://download.csdn.net/detail/itmyhome/7852021


Reprinted please indicate the source: http://blog.csdn.net/itmyhome1990/article/details/38818449

Efficiency of asynchronous loading of data using treegrid in Easyui

I think the next layer of nodes can be dynamically loaded. The next level of nodes can be loaded only when necessary. For details, see Dynamic Loading in TreeGrid in the official Demo.
 
What is the problem of adding tree asynchronously in easyui?

The first is wrong.
Second, it should be okay.
Do your node. id have 'new1? Add an alert (node. text) to it. Can you see the dialog box when it is expanded?
Sometimes it is not a code issue.