树形选择框，下拉框，支持搜索

TreeSelect

使用 bootstrap-treeview
生成树形选择器

1. 支持扁平json数据结构，指定pid即可
2. 支持把Select转化成树，支持单选和多选，支持通过data-设置options
3. 多选时，选中节点自动选中子节点，所有兄弟节点选中时，自动选中父节点
4. 支持使用分级节点section形式的数据，例如shiro的权限串
5. 支持树形下拉框
6. 支持搜索
7. 仅叶子节点可选

Demo

For demo, See http://kangarooxin.github.io/treeSelect

20190923103907.png

20190923103936.png

20190923103957.png

Useage:

Demo1: 使用扁平JSON数据

var data = [
    { id: 1, text: 'Node1', pid: 0, checked: true, icon:"glyphicon glyphicon-stop", tags: ['tag1','tag2']},
    { id: 2, text: 'Node2', pid: 0 },
    { id: 3, text: 'Node3', pid: 0 },
    { id: 4, text: 'Node11', pid: 1, checked: true },
    { id: 5, text: 'Node12', pid: 1, checked: true },
    { id: 6, text: 'Node13', pid: 1, checked: true },
    { id: 7, text: 'Node21', pid: 2 },
    { id: 8, text: 'Node22', pid: 2 },
    { id: 9, text: 'Node111', pid: 4, checked: true },
    { id: 10, text: 'Node112', pid: 4, checked: true },
];
$('#selectTree').treeSelect({
    data: data,
    onCheckChange: function(nodes, $tree, $container) {
        
    }
});

Demo2: 把Select转化成树

    Node1
    Node2
    Node3
    Node11
    Node12
    Node13
    Node21
    Node22
    Node111
    Node112

$('#selectTree2').treeSelect();

Demo3: 树形下拉框

    Node1
    Node2
    Node3
    Node11
    Node12
    Node13
    Node21
    Node22
    Node111
    Node112

$('#selectTree3').treeSelect();

Demo4: 使用分级节点数据

    Node1
    Node2
    Node3
    Node11
    Node12
    Node13
    Node21
    Node22
    Node111
    Node112

$('#selectTree4').treeSelect();

Options:

 $.fn.treeSelect.defaults = {
    data: [], []()
    flatData: true,//扁平json数据，使用pid指定父节点
    dropdown: false,//下拉选择框
    dropdownEmptyText: '请选择...',//下拉选择框不选择时显示的内容
    section: false,//不使用pid，使用分级节点和分隔符构建父子节点
    sectionName: 'section', //分级节点名称
    sectionDelimiter: ':',  //分级节点分隔符
    searchable: true, //可以搜索
    searchIgnoreCase: true, //搜索忽略大小写
    searchExactMatch: false, //搜索全匹配
    idName: 'id',
    pidName: 'pid',
    textName: 'text',
    iconName: 'icon',
    tagsName: 'tags',
    checkedName: 'checked',
    multiple: true, //多选
    onlyLeafSelectable: false, //仅可选中叶子节点
    autoCheckChildNode: true,//选中节点时自动选中所有子节点
    autoCheckParentNode: true, //兄弟节点都被选中时，自动选中父节点
    ignoreChildNode: true,//选中父节点时上报事件中忽略子节点
    showIcon: true,//显示图标
    showTags: true,//显示标签
    levels: 2,//默认展开2层
    color: "#000", //文字颜色
    maxHeight: 0,  //框体最大高度，0不限制
    div: '
' +
        '   
' +
        '       ' +
        '       ' +
        '   
' +
        '   
' +
        '
',
    getDropdownText: function (checkedDatas) {//下拉选择框选中后展示内容
        var checkedTexts = checkedDatas.map(function (value) {
            return value.text;
        });
        return checkedTexts.join(',');
    },
    onCheckChange: function (checkedDatas, $treeSelect, $container) {
    },
    onSearchResult: function(searchResultDatas, $treeSelect, $container) {
    }
};