【原创】jsTree树插件-单选大类-单选每一项-遍历所选

时间 2019-11-17

标签原创 jstree 插件单选大类一项遍历所选繁體版

原文原文链接

前言：

jsTree是什么？javascript

是jquery的一个树形插件。官网以下：css

官方站点API ：https://www.jstree.com/html

中文API： http://blog.csdn.net/qq_24472595/article/details/70053863（这个不是官网是一个网友博客，可是基础功能写得还比较全面。）java

官网有不少属性和方法，很是丰富。此文不一一罗列。node

本文有哪几个功能点？

第一种：只选大类；
第二种：全部都选；
第三种：选中结果按省市区遍历

第一种：只选大类

实际工做场景：jquery

须要选择类别，bootstrap

若是选择时，该项是末端，则勾选自己，-----》右侧显示；
若是选择时，该项是大类，则该大类下面的子节点都选中，-----》右侧显示，
若是选择时，选择了更大的类，则以上雷同；
若是选择时，选择了根节点，则勾选全部，仅根节点，-----》右侧显示，
若是选择时，该子项所有选中，则父类节点默认勾中。-----》右侧显示，
最后提交，全部选中节点，-----》结果区，

见图吧。数组

css以下：app

<link rel="stylesheet" href="http://www.resunnet.com/demo/jquery-left-to-right/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="jstree/dist/themes/default/style.css"/>

<title>jstree</title>
<style>
    /*全局*/
    * { margin: 0; padding: 0; }
    *, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; }
    body { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
    ul li {
        list-style: none;
    }

    .reasult-list  ul {
        padding-left: 0px;
    }

        .reasult-list ul li {
        	float: left;
            margin-bottom: 15px;
            margin-right: 10px;
            width: 40%;
            padding-left: 15px;
            line-height: 32px;
            border: 1px solid #00CCCC;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }

            .reasult-list  ul li:hover {
                transform: scale(0.95);
                background: #E5FFFA;
            }
            
</style>

htmldom

<div class="container" style="margin-top: 10%; width: 600px;">
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-choosePartType">
		添加
    </button>

    <div class="panel panel-default" style="margin-top: 50px;">
        <div class="panel-heading">结果区</div>
        <div class="panel-body">
            <div class="reasult-list" id="parts-reasult-list">
                <ul></ul>
            </div>
        </div>

    </div>
</div>
    	
<!--模态窗-->
<div class="modal fade modal-draggable ui-draggable" id="modal-choosePartType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header ui-draggable-handle">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h5 class="modal-title">选择-原创-柴高八斗之父-www.resunnet.com</h5>
            </div>
            <div class="modal-body">
                <div class="row p-relative">
                    <!--弹窗-左侧-->
                    <div class="col-md-6">
                         <div id="tree_partType" class="tree-demo right-border"> </div>
                    </div>
                    <!--指示三角-->
                    <i class="fa fa-chevron-right modal-left-right-arrow"></i>
                    <!--弹窗-右侧-->
                    <div class="col-md-6" id="partType_right-selected">
                        <div class="reasult-list right-border">
                            <ul>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success btn-green-otoc btn-sm btn-submit">肯定</button>
            </div>
        </div>
    </div>
</div>

js分2步：

第一步：首先将树的实例化完成，基础配置和数据源。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.resunnet.com/demo/jquery-left-to-right/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jstree/dist/jstree.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    //jstree-配件类型-弹窗
    //实例化
    var UITree = function() {
        var tree_partType = function() {
            $('#tree_partType').jstree({
                "multiple": true, //单选  true ; 父类选中子节点全勾选 false，下面 plugins 配置   checkbox
                'plugins': ["changed", "wholerow","checkbox"], //配置选项：wholerow 整行；  checkbox 复选框；  dnd 拖拽 ；contextmenu 可反键操做；
                'core': {
                    'data': [{
                        "state": {
                            "opened": true,
                            "selected": false
                        },
                        "text": "XXXX汽车服务有限公司",
                        "children": [{
                            "text": "软件部"
                        },
                            {
                                "text": "销售部"
                            },
                            {
                                "text": "行政部",
                                "state": {
                                    "opened": false
                                },
                                "children": [
                                    {
                                        "text": "行政",
                                        "children": [{"text": "A组",}, {"text": "B组"}]
                                    },
                                    {
                                        "text": "人事"
                                    }
                                ]
                            }
                        ]
                    }]
                }
            });
        }

        return {
            init: function() {
                tree_partType();
            }
        };
    }();
    
    UITree.init();
//  if(App.isAngularJsApp() === false) {
//      jQuery(document).ready(function() {
//          UITree.init();
//      });
//  }


</script>

第二步：自定义js代码

//页面加载时
$(function() {

    var arr;
    //改变
    $('#tree_partType').on("changed.jstree", function (e, data) {
        var temp = {};
        arr = [];

        //把全部节点写入temp
        data.selected.forEach(function (d) {
            var obj = data.instance.get_node(d)
            temp[d] = obj;
        })
        console.log(temp)
        
        //循环找到有子节点的,删除子节点
        for (var obj in temp) {
            temp[obj].children_d.forEach(function (o) {
                delete temp[o]
            });
        }
        //最后生成的对象遍历写入html
        for (var obj in temp) {
            arr.push('<li data-id="' + temp[obj].id + '">' + temp[obj].text + '</li>');
        }

        //显示右侧
        $("#partType_right-selected ul").html(arr.join(''));

    })

    //窗口提交-结果区
    $('#modal-choosePartType .btn-submit').click(function(){
        $("#parts-reasult-list ul").html(arr.join(''));
        $('#modal-choosePartType').modal('hide');
    })

    //窗口关闭-结果区
    $('#modal-choosePartType').on('hide.bs.modal', function () {
        $("#parts-reasult-list ul").html(arr.join(''));

    })


})

思路：

首先官方提交的方法：data.selected，每次发生改变changed时，取到已经选中的节点。而后，遍历获得这个节点，放到temp对象中。

forEach(function (d) {
var obj = data.instance.get_node(d)
temp[d] = obj;
})

经过 console.log(temp) 时，你会发现，官方的节点提供了哪些能够给你操做的键和属性；这点很重要，咱们在作任何操做，首先得要知道，如何获取对象？而在插件使用时，必需要知道，它们提供了那些属性供咱们使用？

第一种：只选大类----------------end

第二种：每项都选

以下图所示：

无论你选的是类，仍是子节点，选中就过去了。

其余css和html一致，改动的js以下（树实例化也相同，仅为js的第二部分不一样。）

这里思路很简单，

在on.(changed)后，作一个遍历，每次改变，就去取到当前选择节点的id + 文本，
赛到数组中-----》而后塞到指定dom中（在这以前将数组join下。）

//改变
$('#tree_partType').on("changed.jstree", function (e, data) {
    var i, j;
    arr = []
    for(i = 0, j = data.selected.length; i < j; i++) {

        //获取当前节点id
        var current_id = data.instance.get_node(data.selected[i]).id;

        //获取当前节点文本
        var currentNode_text = data.instance.get_node(data.selected[i]).text; //也能够用get_text,如使用此方法,代码后的.text去掉.

        //写入数组
        arr.push('<li data-id="' +current_id+ '">' + currentNode_text + '</li>');
    }
    //显示右侧
    $("#partType_right-selected ul").html(arr.join(''));

})

//窗口提交-结果区
$('#modal-choosePartType .btn-submit').click(function(){
    $("#parts-reasult-list ul").html(arr.join(''));
    $('#modal-choosePartType').modal('hide');
})

//窗口关闭-结果区
$('#modal-choosePartType').on('hide.bs.modal', function () {
    $("#parts-reasult-list ul").html(arr.join(''));

})