JsTree 使用總結

時間 2019-12-14

標籤 jstree 使用總結简体版

原文原文鏈接

JsTree 使用總結

JsTreejavascript

在使用 JsTree 的過程當中，因項目須要添加按鈕來控制樹節點的提交

爲 JStree 綁定自定義事件

1. JS 代碼

<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">

                <div class="ibox-content">
                    <div id="typeTree"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-sm-offset-12">
                        <button id="btn-tree" type="submit" class="btn btn-primary pull-right">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>


    <script type="text/javascript">
        $(document).ready(function() {
            getTreeData()
        });
        function getTreeData() {
            $.ajax({
                type : "GET",
                url : contpath+"equip/eqType/tree",
                success : function(tree) {
                    loadTree(tree);
                }
            });
        }
        function loadTree(tree) {
            $('#typeTree').jstree({
                'core' : {
                    'multiple': false, // 單選和複選
                    'data' : tree
                },
                'checkbox' : {
                    // "keep_selected_style": false, // 是否默認選中
                    // "tie_selection": false,
                    "three_state": false // 父子級別級聯選擇
                  },
                "plugins" : [ "search","checkbox"]
            });
            $('#typeTree').jstree().open_all();
        }
        
        // 點擊按鈕提交分類樹選中節點
        $('#btn-tree').on('click',function(){
            var result = [];
            // 獲取全部的已經選中的節點信息，若是要得到所有信息則須要開啓：full:true，直接調用get_checked()，則只能夠獲取節點的id
             var checkedVal = $('#typeTree').jstree(true).get_checked([{full:true}]);
             for(var i = 0;i<checkedVal.length;i++){
                 // 將節點的id和text屬性值對應放到數組中
                 result.push({id:checkedVal[i].id,text:checkedVal[i].text});    
             }
             parent.loadEqType(parent.treeVal,result); // 捕獲parent.treeVal，即點擊的文本框
             var index = parent.layer.getFrameIndex(window.name); // 獲取窗口索引
            parent.layer.close(index); //關閉窗口
        });
    </script>
</body>

</html>

2. 頁面調用

var treeVal;
// 引入分類樹
$('.ibox').on('click','.eqTypeName',function(){
    treeVal = $(this);
    layer.open({
        type:2,
        title:"選擇分類",
        area : [ '300px', '450px' ],
        content:contpath+"equip/eqType/typeTreeView"
    })
});

// 分類樹多選
// treeVal 是經過 layer 的 parent 傳遞過來的
function loadEqType(treeVal,result){
    //$("#eqType").val(typeId);
    // 重置文本框
    treeVal.val('');
    // 選中的節點數爲1
    if(result.length == 1){
        treeVal.val(result[0].text);
    }else{
        // 選中的節點數若大於1，用','將字符分隔
        for(var i = 0;i<result.length;i++){
            var selectAll = result[i].text;
            for(var j = 0;j < i;j++){
                selectAll = treeVal.val() + ',' + result[i].text;
            }
            treeVal.val(selectAll);
        }
    }
}

JStree 原生事件

1. 當選擇改變時觸發

<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">

                <div class="ibox-content">
                    <div id="typeTree"></div>
                </div>
                <div class="form-group hidden">
                    <div class="col-sm-12 col-sm-offset-12">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>


    <script type="text/javascript">
        $(document).ready(function() {
            getTreeData()
        });
        function getTreeData() {
            $.ajax({
                type : "GET",
                url : contpath+"equip/eqType/tree",
                success : function(tree) {
                    loadTree(tree);
                }
            });
        }
        function loadTree(tree) {
            $('#typeTree').jstree({
                'core' : {
                    'data' : tree
                },
                "plugins" : [ "search" ]
            });
            $('#typeTree').jstree().open_all();
        }
        $('#typeTree').on("changed.jstree", function(e, data) {
            if(data.node.id!=-1){
                parent.loadEqType(data.node.id,data.node.text);
                var index = parent.layer.getFrameIndex(window.name); // 獲取窗口索引
                parent.layer.close(index);
            }
            
        });
        
    </script>
</body>

</html>

2. 頁面調用

var TypeSelect = function(){
    layer.open({
        type:2,
        title:"選擇分類",
        area : [ '300px', '450px' ],
        content:contpath+"equip/eqType/typeTreeView"
    })
}
function loadEqType(typeId,typeName){
    $("#eqType").val(typeId);
    $("#eqTypeName").val(typeName);
}

Licensehtml

能夠拷貝、轉發，可是必須提供原做者信息，同時也不能將本項目用於商業用途。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。