jstree使用

jstree地址

https://www.jstree.com/

<div class="jstree-select-group">
                    <div class="jstree-selected">
                        <input type="hidden" class="searchkey" name="searchkey" value="" />
                        <label>名称</label> <input type="text" name="selected_texts" class="form-control" value="" /><span class="fa fa-chevron-down"></span>
                    </div>
                    <div id="jstree" class="jstree-select">
            
                    </div>
                    <div class="jstree-action">
                        <button type="button" name="sure" class="btn btn-success btn-sure">确定</button>
                        <button type="button" name="close" class="btn btn-primary btn-close">关闭</button>
                    </div>
                </div>

js

$('#jstree').jstree({
        "check_callback": true,
        'core' : {
            'data' : {
				"url" : "/study-statistics/textbook-tree",
				"dataType" : "json" // needed only if you do not supply JSON headers
            },
        },
        "checkbox" : {
            "keep_selected_style" : false,
        },
        "plugins" : [ "wholerow", "checkbox" ]
    });

    $('.jstree-select-group .jstree-selected .fa-chevron-down').click(function() {
        $('.jstree-select-group .jstree-select').toggle();
        $('.jstree-select-group .jstree-action').toggle();
    })

    $('.jstree-select-group .jstree-action .btn-sure').click(function() {
        var treeSelected = $('#jstree').jstree(true).get_selected(true); 
        var ids = new Array();
        var texts =  new Array();
        if(treeSelected.length > 0) {
            for(var i = 0; i < treeSelected.length; i++) {
                ids.push(treeSelected[i].id);
                texts.push(treeSelected[i].text);
            }
        }
        $('.jstree-select-group .jstree-selected').find('input[name=searchkey]').val(ids.join(','));
        $('.jstree-select-group .jstree-selected').find('input[name=selected_texts]').val(texts.join(','));
        $('.jstree-select-group .jstree-select').hide();
        $('.jstree-select-group .jstree-action').hide();
    }) 

    $('.jstree-select-group .jstree-action .btn-close').click(function() {
        $('.jstree-select-group .jstree-select').hide();
        $('.jstree-select-group .jstree-action').hide();
    }) 

checkbox选中与取消选中

 $('#jstree').bind('select_node.jstree', function(event, data) {
            var currentNode = data.instance.get_node(data.selected);
            var id = currentNode.id // 一个值
            var parent = currentNode.parent // 一个值
            var children = currentNode.children // 一个数组
        });
        $('#jstree').bind('deselect_node.jstree', function(event, data) {
            var currentNode = data.instance.get_node(data.selected);
            var id = currentNode.id // 一个值
            var parent = currentNode.parent // 一个值
            var children = currentNode.children // 一个数组
            console.log(id)
        });

json：

public function makeJsTreeList($data, $parent = 0, $level = 1) {
        $tree = [];
        foreach ($data as $key => $val) {
            $length = (intval($val["level"]) - 1) * 2;
            if ($length > 0) {
                $pid = intval(substr($val['id'], 0, $length));
            } else {
                $pid = 0;
            }
            $newVal['id'] = $val['id'];
            $newVal['text'] = $val['name'];
           if($pid == $parent){
              $newVal['children']=$this->makeJsTreeList($data, $val['id'], $level+1);
              $tree[] = $newVal;
           }
        }
        return $tree;
    }

最终样式

 

 

也可以不用json

<div id="jstree" class="merchant-menu">
                        <ul>
                            <?php 
                            if($list) {
                                foreach($list as $key => $val) {
                                    $dataJstree = '';
                                    if(in_array($val['id'], $hasMenus)) {
                                        $dataJstree = '{ "opened" : true }';
                                    }
                            ?>
                            <li data-jstree='<?= $dataJstree ?>' id="<?= $val['id'] ?>"><?= $val['name'] ?>
                                <?php if($val['children']){ ?>
                                <ul>
                                    <?php 
                                    foreach($val['children'] as $k => $v) {
                                        $sdataJstree = '';
                                        if(in_array($val['id'], $hasMenus)) {
                                            $sdataJstree = '{ "selected" : true }';
                                        }
                                    ?>
                                    <li data-jstree='<?= $sdataJstree ?>' id="<?= $v['id'] ?>"><?= $v['name'] ?></li>
                                    <?php } ?>
                                </ul>
                                <?php } ?>
                            </li>
                            <?php }} ?>
                        </ul>
                    </div>