jstree 如何引入 search 插件

1：查看文档 jstree 文档

将搜索功能添加到 jsTree。

$.jstree.defaults.search search plugin

看了这段, 还是不知道怎么加,有疑问 ??? 


复制代码

2: 发现jstree 初始化的 有一个 plugins, 把search 加到里面

 $('#channeltree').jstree({
    "themes": {
        "stripes": true
    },
    "checkbox": {
        "keep_selected_style": false,
    },
    'plugins': ["search", "checkbox"],
    "core": {
        "multiple": true,
        'check_callback': true,
        "data": Config.channelList
    }
});
复制代码

3: 完整功能

html 页面

<style>
    .form-commonsearch .form-group {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    form.form-commonsearch .control-label {
        padding-right: 0;
    }

    .tdtitle {
        margin-bottom: 5px;
        font-weight: 600;
    }

    #channeltree {
        margin-left: -6px;
    }

    #channelbar .panel-heading {
        height: 55px;
        line-height: 25px;
        font-size:14px;
    }

    @media (max-width: 1230px) {

        .fixed-table-toolbar .search .form-control {
            display: none;
        }
    }

    @media (min-width: 1200px) {

        #channelbar {
            width: 20%;
        }

        #archivespanel {
            width: 80%;
        }
    }

</style>
<div class="row">
    <div class="col-md-3 hidden-xs hidden-sm" id="channelbar" style="padding-right:0;">
        <div class="panel panel-default panel-intro">
            <div class="panel-heading">
                <div class="panel-lead">
                    <em>{:__('Channel list')}</em>
                </div>
            </div>
            <div class="panel-body">
                <input type="text" id="search_input" placeholder="请输入信息搜索" /><br/>
                <span class="text-muted"><input type="checkbox" name="" id="checkall"/> <label for="checkall"><small>{:__('Check all')}</small></label></span>
                <span class="text-muted"><input type="checkbox" name="" id="expandall" checked=""/> <label for="expandall"><small>{:__('Expand all')}</small></label></span>
                <div id="channeltree"></div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-9" id="archivespanel">
        右侧
    </div>
</div>
<script id="channeltpl" type="text/html">
    <div class="box box-solid bg-red-gradient">
        <div class="box-header ui-sortable-handle" style="cursor: move;">
            {:__('Warning')}
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            {:__('Move tips')}
        </div>
        <!-- /.box-body -->
        <div class="box-footer text-black">
            <div class="row">
                <div class="col-sm-12">
                    <select name="channel" class="form-control" id="">
                        <option value="0">{:__('Please select channel')}</option>
                        {$channelOptions}
                    </select>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>
</script>



js   代码

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            require(['jstree'], function () {
                //全选和展开
                $(document).on("click", "#checkall", function () {
                    $("#channeltree").jstree($(this).prop("checked") ? "check_all" : "uncheck_all");
                });
                $(document).on("click", "#expandall", function () {
                    $("#channeltree").jstree($(this).prop("checked") ? "open_all" : "close_all");
                });
                $('#channeltree').on("changed.jstree", function (e, data) {
                    var ids = data.selected;
              
                    return false;
                });
                $('#channeltree').jstree({
                    "themes": {
                        "stripes": true
                    },
                    "checkbox": {
                        "keep_selected_style": false,
                    },
                    'plugins': ["search", "checkbox"],
                    "core": {
                        "multiple": true,
                        'check_callback': true,
                        "data": Config.channelList
                    }
                });
                //输入框输入定时自动搜索
                var to = false;
                $('#search_input').keyup(function () {
                    if(to) {
                        clearTimeout(to);
                    }

                    to = setTimeout(function () {
                        $("#channeltree").jstree(true).search($('#search_input').val());

                    }, 250);
                });
            });
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"),function(data, ret){
                    //这里只要返回false，就会阻止我们的弹窗自动关闭和自动提示
                    // 显示确认的页面
                    Fast.api.close(ret);
                });
            }
        }

    };

    return Controller;

});


复制代码