【原】無腦操作：EasyUI Tree實現左鍵只選擇葉子節點、右鍵浮動菜單實現增刪改

Easyui中的Tree組件使用頻率頗高，經常遇到的需求如下：

1、在樹形結構上，只有葉子節點才能被選中，其他節點不能被選中；

2、在葉子節點上右鍵出現浮動菜單實現新增、刪除、修改操作；

3、在非葉子節點上右鍵出現浮動菜單實現新增、修改操作。

------------------------------------------------------------------------------------------------------------------

實現方法如下：

1、搭建測試環境（可以參考前文：【原】無腦操作：IDEA + maven + SpringBoot + JPA + EasyUI實現CRUD及分頁）

2、建庫建表

DROP TABLE biz_department;  2 CREATE TABLE biz_department  3 (  4     departmentid INT AUTO_INCREMENT PRIMARY KEY COMMENT '部門編號',  5     departmentpid INT NOT NULL COMMENT '部門父編號',  6     departmentname VARCHAR(10) NOT NULL COMMENT '部門名稱'
) ENGINE=INNODB COMMENT='部門信息';  8 INSERT INTO biz_department VALUES
(NULL, 0, '總部'), 10 (NULL, 1, '上海分公司'), (NULL, 1, '安徽分公司'), 11 (NULL, 3, '合肥辦事處'), (NULL, 3, '銅陵辦事處');

3、創建實體類 Department.java

@Entity  2 @Table(name = "biz_department")  3 public class Department {  4  @Id  5     @GeneratedValue(strategy = GenerationType.IDENTITY)  6     @Column(name = "departmentid")  7     private Integer departmentid;  8     @Column(name = "departmentpid")  9     private Integer departmentpid; 10     @Column(name = "departmentname") 11     private String departmentname; 12 
    public Department() { 14  } 15 
    public Department(Integer departmentpid, String departmentname) { 17         this.departmentpid = departmentpid; 18         this.departmentname = departmentname; 19  } 20 
    public Integer getDepartmentid() { 22         return departmentid; 23  } 24 
    public void setDepartmentid(Integer departmentid) { 26         this.departmentid = departmentid; 27  } 28 
    public Integer getDepartmentpid() { 30         return departmentpid; 31  } 32 
    public void setDepartmentpid(Integer departmentpid) { 34         this.departmentpid = departmentpid; 35  } 36 
    public String getDepartmentname() { 38         return departmentname; 39  } 40 
    public void setDepartmentname(String departmentname) { 42         this.departmentname = departmentname; 43  } 44 }

4、編寫DAO接口 DepartmentDao.java

/**
 * 因為需要使用分頁和條件查詢，所以從JpaRepository接口 和 JpaSpecificationExecutor接口繼承 3  */
public interface DepartmentDao extends JpaRepository<Department, Integer>, JpaSpecificationExecutor<Department> { 5 
}

5、編寫工具類 TreeNode.java 和  TreeUtil.java

/**
 * EasyUI Tree的封裝類  3  */
public class TreeNode {  5     private Integer id;                      // 節點的 id
    private Integer parentId;                // 父節點id，java生成樹時使用
    private String text;                    // 顯示的節點文字。
    private String iconCls;                 // 節點圖標樣式 "iconCls":"icon-save", "iconCls":"icon-ok", 等
    private String state;                   // 節點狀態， 'open' 或 'closed'，默認是 'open'。當設為 'closed' 時，此節點有子節點，並且將從遠程站點加載它們。
    private String flag;                    // 節點類型
    private Integer trueId;                 // 應用系統真實 id
    private boolean checked;                // 指示節點是否被選中。
    private LinkedHashMap<?, ?> attributes; // 給一個節點追加的自定義屬性。
    private List<TreeNode> children;        // 定義了一些子節點的節點數組。
    private String url;                     // 擴展屬性url

    public Integer getTrueId() {  18         return trueId;  19  }  20 
    public void setTrueId(Integer trueId) {  22         this.trueId = trueId;  23  }  24 
    public String getFlag() {  26         return flag;  27  }  28 
    public void setFlag(String flag) {  30         this.flag = flag;  31  }  32 
    public Integer getId() {  34         return id;  35  }  36 
    public void setId(Integer id) {  38         this.id = id;  39  }  40 
    public Integer getParentId() {  42         return parentId;  43  }  44 
    public void setParentId(Integer parentId) {  46         this.parentId = parentId;  47  }  48 
    public String getText() {  50         return text;  51  }  52 
    public void setText(String text) {  54         this.text = text;  55  }  56 
    public String getIconCls() {  58         return iconCls;  59  }  60 
    public void setIconCls(String iconCls) {  62         this.iconCls = iconCls;  63  }  64 
    public String getState() {  66         return state;  67  }  68 
    public void setState(String state) {  70         this.state = state;  71  }  72 
    public boolean isChecked() {  74         return checked;  75  }  76 
    public void setChecked(boolean checked) {  78         this.checked = checked;  79  }  80 
    public LinkedHashMap<?, ?> getAttributes() {  82         return attributes;  83  }  84 
    public void setAttributes(LinkedHashMap<?, ?> attributes) {  86         this.attributes = attributes;  87  }  88 
    public List<TreeNode> getChildren() {  90         return children;  91  }  92 
    public void setChildren(List<TreeNode> children) {  94         this.children = children;  95  }  96 
    public String getUrl() {  98         return url;  99  } 100 
    public void setUrl(String url) { 102         this.url = url; 103  } 104 }

/**
 * 樹工具類  3  */
public class TreeUtil {  5     /**
 * Tree裝配方法  7  *  8  * @param tempTreeNodes  9  * @param treeNodes 10  * @return
     */
    public static List<TreeNode> Assemble(List<TreeNode> tempTreeNodes, List<TreeNode> treeNodes) { 13         if (tempTreeNodes != null) { 14             Map<Integer, TreeNode> map = new LinkedHashMap<>(); 15             for (TreeNode tn : tempTreeNodes) { 16  map.put(tn.getId(), tn); 17  } 18 
 TreeNode treeNode; 20  TreeNode pTreeNode; 21             for (Integer id : map.keySet()) { 22                 treeNode = map.get(id); 23                 if (treeNode.getParentId() == 0) { 24  treeNodes.add(treeNode); 25                 } else { 26                     pTreeNode = map.get(treeNode.getParentId()); 27                     List<TreeNode> children = pTreeNode.getChildren(); 28                     if (children != null) { 29  children.add(treeNode); 30                     } else { 31                         children = new ArrayList(); 32  children.add(treeNode); 33  pTreeNode.setChildren(children); 34  } 35  } 36  } 37  } 38 
        return treeNodes; 40  } 41 }

6、規划控制器 DepartmentController.java

@Controller  2 @RequestMapping("/department")  3 public class DepartmentController {  4  @Autowired  5     private DepartmentDao departmentDao;  6 
    @RequestMapping("/view")  8     public String view() {  9         // 跳轉至【資源管理】頁面
        return "department"; 11  } 12 
    @RequestMapping("/tree") 14  @ResponseBody 15     public String tree() { 16         List<Department> list = departmentDao.findAll(); 17         List<TreeNode> tempTreeNodes = new ArrayList(); 18         List<TreeNode> treeNodes = new ArrayList(); 19 
        // 組裝Easyui的Tree必須要有id、parentId、text屬性，轉換之
        for (Department department : list) { 22             TreeNode tempTreeNode = new TreeNode(); 23  tempTreeNode.setId(department.getDepartmentid()); 24  tempTreeNode.setParentId(department.getDepartmentpid()); 25  tempTreeNode.setText(department.getDepartmentname()); 26  tempTreeNodes.add(tempTreeNode); 27  } 28 
        return JSONObject.toJSON(TreeUtil.Assemble(tempTreeNodes, treeNodes)).toString(); 30  } 31 
    @RequestMapping("/saveNode") 33  @ResponseBody 34     public Map<String, Object> saveNode(Integer departmentpid, String departmentname) { 35         Department model = new Department(); 36  model.setDepartmentpid(departmentpid); 37  model.setDepartmentname(departmentname); 38 
        Map<String, Object> resultMap = new HashMap<>(); 40  departmentDao.save(model); 41         resultMap.put("success", true); 42         return resultMap; 43  } 44 
    @RequestMapping("/updateNode") 46  @ResponseBody 47     public Map<String, Object> updateNode(Department model) { 48         Map<String, Object> resultMap = new HashMap<>(); 49  departmentDao.save(model); 50         resultMap.put("success", true); 51         return resultMap; 52  } 53 
    @RequestMapping("/deleteNode") 55  @ResponseBody 56     public Map<String, Object> deleteNode(Integer departmentid) { 57         Map<String, Object> resultMap = new HashMap<>(); 58  departmentDao.deleteById(departmentid); 59         resultMap.put("success", true); 60         return resultMap; 61  } 62 }

7、編寫前端代碼

HTML頁面：department.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試Tree功能</title>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../biz/department.js"></script>
</head>
<body>
<!-- 部門樹 -->
<ul id="deptTree" class="easyui-tree"></ul>
<!-- 葉子節點右鍵菜單 -->
<div id="leaf" class="easyui-menu" style="width: 120px;">
    <div onclick="addNode()" iconcls="icon-add">新增節點</div>
    <div onclick="removeNode()" iconcls="icon-remove">刪除節點</div>
    <div onclick="updateNode()" iconcls="icon-edit">編輯節點</div>
</div>
<!-- 非葉子節點右鍵菜單 -->
<div id="parentNode" class="easyui-menu" style="width: 120px;">
    <div onclick="addNode()" iconcls="icon-add">新增節點</div>
    <div onclick="updateNode()" iconcls="icon-edit">編輯節點</div>
</div>
<!-- 節點內容對話框 -->
<div id="info" class="easyui-dialog" style="width:300px; height: 120px;" closed=true>
    <form id="treefrm" method="post">
        <input type="hidden" name="departmentid">
        <table style="margin: auto;" cellspacing="10">
            <tr>
                <td>部門名稱</td>
                <td><input class="easyui-textbox" name="departmentname" value="" data-options="required:true"></td>
            </tr>
        </table>
        <div style="text-align: center; bottom: 15px; margin-top: 10px;">
            <a id="btnSave" class="easyui-linkbutton"
 data-options="iconCls:'icon-save'">保存</a>
            <a id="btnCancel" class="easyui-linkbutton"
 data-options="iconCls:'icon-cancel'">取消</a>
        </div>
    </form>
</div>
</body>
</html>

對應JS文件：department.js

// 記錄添加還是修改
var flag;
// 臨時存儲選中節點數據
var tempNode;

// 頁面加載
$(function () {
    // 菜單樹綁定數據
    $('#deptTree').tree({
        url: '/department/tree',
        animate: true,
        lines: true,
        onBeforeSelect: function (node) {
            // onBeforeSelect事件：節點被選中前觸發，返回false則取消選擇動作
            if (!$(this).tree('isLeaf', node.target)) {
                // 不是葉子節點，則不能選中
                return false;
            }
        },
        onClick: function (node) {
            // alert(node.target.innerText);
        },
        onContextMenu: function (e, node) {
            // 記錄選中的節點，為后續增刪改操作提供節點數據
            tempNode = node;

            // 阻止右鍵默認事件
            e.preventDefault();

            // 判斷該結點有沒有父結點
            var root = $(this).tree('getParent', node.target);
            // 沒有父節點則為根結點，可以新增、編輯，不可以刪除
            if (root == null) {
                // 如果是根節點，則可以新增、編輯，不可以刪除
                $('#parentNode').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }

            if ($(this).tree('isLeaf', node.target)) {
                // 如果是葉子節點，則可以新增、編輯和刪除
                $('#leaf').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            } else {
                // 如果不是葉子節點，則可以新增、編輯，不可以刪除
                $('#parentNode').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        }
    });

    // 保存按鈕押下處理
    $('#btnSave').click(function () {
        var tempdata, tempurl, tempmsg;

        if (flag == 'add') {
            tempurl = 'saveNode';
            tempmsg = '添加成功！';
            tempdata = {
                departmentpid: tempNode.id,
                departmentname: $('#treefrm').find('input[name=departmentname]').val()
            };
        } else if (flag == 'edit') {
            tempurl = 'updateNode';
            tempmsg = '編輯成功！';
            tempdata = {
                departmentid: $('#treefrm').find('input[name=departmentid]').val(),
                departmentpid: $('#deptTree').tree('getParent', tempNode.target).id,
                departmentname: $('#treefrm').find('input[name=departmentname]').val()
            };
        }

        $.ajax({
            type: 'post',
            async: true,
            url: tempurl,
            data: tempdata,
            dataType: 'json',
            success: function (result) {
                // 樹重新加載
                $('#deptTree').tree('reload');

                $.messager.show({
                    title: '提示信息',
                    msg: tempmsg
                });
            },
            error: function (result) {
                // 請求失敗時執行該函數
                $.messager.show({
                    title: '錯誤信息',
                    msg: result.msg
                });
            }
        });

        $('#treefrm').form('clear');
        $('#info').dialog('close');
    });

    // 取消按鈕押下處理
    $('#btnCancel').click(function () {
        $('#treefrm').form('clear');
        $('#info').dialog('close');
    });
});

// 新增節點
var addNode = function () {
    flag = 'add';
    // 清空表單數據
    $('#treefrm').form('clear');
    // 打開dialog
    $('#info').dialog('open').dialog('setTitle', '新增');
};

// 編輯節點
var updateNode = function () {
    flag = 'edit';
    // 清空表單數據
    $('#treefrm').form('clear');
    $('#treefrm').form('load', {
        departmentid: tempNode.id,
        departmentname: tempNode.text
    });
    // 打開dialog
    $('#info').dialog('open').dialog('setTitle', '編輯');
};

// 刪除節點
var removeNode = function () {
    // 前台刪除
    $('#deptTree').tree('remove', tempNode.target);

    // 后台刪除
    $.ajax({
        type: "post",
        async: true,           // 異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
        url: "deleteNode",
        data: {departmentid: tempNode.id},
        dataType: "json",      // 返回數據形式為json
        success: function (result) {
            // 請求成功時執行該函數內容，result即為服務器返回的json對象
            $.messager.show({
                title: '提示信息',
                msg: '刪除成功！'
            });
        },
        error: function (result) {
            // 請求失敗時執行該函數
            $.messager.show({
                title: '錯誤信息',
                msg: result.msg
            });
        }
    });
};

8、運行效果