【原創】jsTree樹插件-單選大類-單選每一項-遍歷所選

前言：

jsTree是什麼？

是jquery的一個樹形插件。官網以下：

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

中文API： http://blog.csdn.net/qq_24472595/article/details/70053863（這個不是官網是一個網友博客，可是基礎功能寫得還比較全面。）

官網有不少屬性和方法，很是豐富。此文不一一羅列。

本文有哪幾個功能點？

1. 第一種：只選大類；
2. 第二種：全部都選；
3. 第三種：選中結果按省市區遍歷

第一種：只選大類

實際工做場景：

須要選擇類別，

1. 若是選擇時，該項是末端，則勾選自己，-----》右側顯示；
2. 若是選擇時，該項是大類，則該大類下面的子節點都選中，-----》右側顯示，
3. 若是選擇時，選擇了更大的類，則以上雷同；
4. 若是選擇時，選擇了根節點，則勾選全部，僅根節點，-----》右側顯示，
5. 若是選擇時，該子項所有選中，則父類節點默認勾中。-----》右側顯示，
6. 最後提交，全部選中節點，-----》結果區，

見圖吧。

css以下：

<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>

html

<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的第二部分不一樣。）

這裏思路很簡單，

1. 在on.(changed)後，作一個遍歷，每次改變，就去取到當前選擇節點的id + 文本，
2. 賽到數組中-----》而後塞到指定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(''));

})