Home > Developer > Web Develop
EasyUI Editable Tree, easyuieditable
Effect
Create Tree
<ul id="tt"></ul>$('#tt').etree({url: 'tree_data.json',createUrl: ...,updateUrl: ...,destroyUrl: ...,dndUrl: ...});Set the url, createUrl, updateUrl, destroyUrl, and dndUrl attributes to automatically synchronize data to the server.
Url: returned tree data
CreateUrl: when a new node is created, the tree will pass in a parameter named parentId, indicating the parent node ID.
UpdateUrl: when updating a node, the id and text parameters are passed in to the server.
DestroyUrl: When a node is destroyed, the id parameter is input.
DndUrl: when you drag and drop a node, the following parameters are passed in to the server. ID: ID to be dragged, targetId: ID to be dragged
Demo:
<body> <a href="#" onclick="javascript:$('#tt').etree('create')">Create</a> <a href="#" onclick="javascript:$('#tt').etree('edit')">Edit</a> <a href="#" onclick="javascript:$('#tt').etree('destroy')">Destroy</a> <ul id=tt></ul></body>
<script type="text/javascript"> $('#tt').etree({ url: 'treeLoad.action', createUrl: 'treeCreate.action', updateUrl: 'treeUpdate.action', destroyUrl: 'treeDestroy.action', dndUrl: 'treeDnd.action' });</script>
Struts. xml
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""http://struts.apache.org/dtds/struts-2.0.dtd"><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><action name="treeCreate" method="treeCreate" class="com.home.web.TreeAction"><result type="json"><param name="root">treeNodes</param></result></action><action name="treeUpdate" method="treeUpdate" class="com.home.web.TreeAction"><result type="json"><param name="root">treeNodes</param></result></action><action name="treeDestroy" method="treeDestroy" class="com.home.web.TreeAction"><result type="json"><param name="root">treeNodes</param></result></action><action name="treeDnd" method="treeDnd" class="com.home.web.TreeAction"><result type="json"><param name="root">treeNodes</param></result></action></package></struts>
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 setXXX (), getXXX ()}
/*** Use JDBC to query data **/public class TreeAction {private List <TreeNode> treeNodes = new ArrayList <TreeNode> (); // return JSON data private String id; // IDprivate String parentId used by the tree component; // The Tree parent IDprivate String text; // display the text private String targetId; // drag the target ID/*** Tree display ** @ return */public 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 or 0, It is the root node SQL = "select * from easyui_tree where parentid ='' or parentid = '0 '";} 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";}/*** create tree ** @ return */public String treeCreate () {Statement sta = null; ResultSet rs = null; try {Connection conn = ConnectionManager. getConnection (); sta = conn. createStatement (); // ID is auto-incrementing. You do not need to insert String SQL = "insert into easyui_tree (NAME, parentid) values ('', '"+ parentId + "') ";sta.exe cute (SQL); // close all resources ConnectionManager. closeAll (rs, sta, conn);} catch (SQLException e) {e. printStackTrace ();} return "success";}/*** modify tree ** @ return */public String treeUpdate () {Statement sta = null; ResultSet rs = null; try {Connection conn = ConnectionManager. getConnection (); sta = conn. createStatement (); String SQL = "update easyui_tree set name = '" + text + "'where id ='" + id + "'" ;sta.exe cuteUpdate (SQL ); // close ConnectionManager for all resources. closeAll (rs, sta, conn);} catch (SQLException e) {e. printStackTrace ();} return "success";}/*** Delete tree ** @ return */public String treeDestroy () {Statement sta = null; ResultSet rs = null; try {Connection conn = ConnectionManager. getConnection (); sta = conn. createStatement (); String SQL = "delete from easyui_tree where id = '" + id + "'" ;sta.exe cuteUpdate (SQL); // disable ConnectionManager for all resources. closeAll (rs, sta, conn);} catch (SQLException e) {e. printStackTrace ();} return "success";}/*** drag ** @ return */public String treeDnd () {Statement sta = null; ResultSet rs = null; try {Connection conn = ConnectionManager. getConnection (); sta = conn. createStatement (); // drag the parentid to the target IDString SQL = "update easyui_tree set parentid = '" + targetId + "'where id ='" + id + "'" ;sta.exe cuteUpdate (SQL); // close ConnectionManager for all resources. 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;} // The setXXX (), getXXX () method is omitted}For the ConnectionManager encapsulation class for Connection, see http://blog.csdn.net/itmyhome1990/article/details/38818449
Create database easyui; use easyui; create table easyui_tree (id int primary key not null AUTO_INCREMENT, name varchar (10), parentid VARCHAR (10 )); insert into easyui_tree values ('1', 'beijing', '0'); insert into easyui_tree values ('2', 'shanghai', '0 '); insert into easyui_tree values ('3', 'shenzhen ', '0'); insert into easyui_tree values ('4', 'guangzhou', '0 '); insert into easyui_tree values ('5', 'haidian ', '1'); insert into easyui_tree values ('6', 'chaoyang', '1 '); insert into easyui_tree values ('7', 'changping ', '1'); insert into easyui_tree values ('8', 'second West ban', '5 '); insert into easyui_tree values ('9', 'upgrade', '5 ');
Project source code download: http://download.csdn.net/detail/itmyhome/7856545
Reprinted please indicate the source: http://blog.csdn.net/itmyhome1990/article/details/38846521
There is a state in the node attribute. The default value is "open". You can set it to "closed" When uploading data.
Similar
{
"Text": "Ages ",
"State": "closed ",
"Children ":[{
"Text": "Java"
},{
"Text": "C #"
}]
}
How can an easyui tree node become an editable box?
OnClick: function (node ){
If (node ){
$ ('# AccountTree ''). tree ('ineinedit', node.tar get );
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
