JsTree 使用总结

在使用 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);
}

License

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。

JsTree 使用总结

为 JStree 绑定自定义事件

1. JS 代码

2. 页面调用

JStree 原生事件

1. 当选择改变时触发

2. 页面调用

spoiler

引用和评论

Vue 重置组件到初始状态

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合