实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>treeview+bootstrap多级下拉树插件</title>
        <link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            .shouce-header{margin-bottom: 15px;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
            .shouce-icon{color: #fff;}
        </style>
        
    </head>
    <body>
        <div class="shouce-container">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <h2>演示一：默认</h2>
                        <div id="treeview1"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>演示二：收缩</h2>
                        <div id="treeview2"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>演示三：展开</h2>
                        <div id="treeview3"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <h2>演示四：蓝色主题</h2>
                        <div id="treeview4"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>演示五：自定义图标</h2>
                        <div id="treeview5"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>演示六：徽章标签</h2>
                        <div id="treeview6"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <h2>演示七：无边框</h2>
                        <div id="treeview7"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>演示八：多色的</h2>
                        <div id="treeview8"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>演示九：节点重写</h2>
                        <div id="treeview9"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <h2>演示十：添加下划线</h2>
                        <div id="treeview10"></div>
                    </div>
                    <div class="col-sm-4">

</div>
                    <div class="col-sm-4">

</div>
                </div>
                <div class="row">
                    <hr>
                    <h2>演示十一：可搜索的树菜单</h2>
                    <div class="col-sm-4">
                        <h2>输入框input</h2>
                        
                        <div class="form-group">
                            <label for="input-search" class="sr-only">Search Tree:</label>
                            <input type="input" class="form-control" id="input-search" placeholder="请输入关键词..." value="">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-ignore-case" value="false">
                                忽略大小写
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
                                精确匹配
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
                                结果显示
                            </label>
                        </div>
                        <button type="button" class="btn btn-success" id="btn-search">Search</button>
                        <button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
                        
                    </div>
                    <div class="col-sm-4">
                        <h2>树Tree</h2>
                        <div id="treeview-searchable"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>结果</h2>
                        <div id="search-output"></div>
                    </div>
                </div>
                <div class="row">
                    <hr>
                    <h2>演示十二：可选中的树菜单</h2>
                    <div class="col-sm-4">
                        <h2>输入框Input</h2>
                        <div class="form-group">
                            <label for="input-select-node" class="sr-only">Search Tree:</label>
                            <input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-select-multi" value="false">
                                多选下拉
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-select-silent" value="false">
                                支持静态的树，即一次性将全部数据加载完毕。
                            </label>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-success select-node" id="btn-select-node">Select Node</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-danger select-node" id="btn-unselect-node">Unselect Node</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary select-node" id="btn-toggle-selected">Toggle Node</button>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <h2>Tree</h2>
                        <div id="treeview-selectable"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>Events</h2>
                        <div id="selectable-output"></div>
                    </div>
                </div>
                <div class="row">
                    <h2>演示十三：可展开的树菜单</h2>
                    <div class="col-sm-4">
                        <h2>输入框Input</h2>
                        <div class="form-group">
                            <label for="input-expand-node" class="sr-only">Search Tree:</label>
                            <input type="input" class="form-control" id="input-expand-node" placeholder="Identify node..." value="Parent 1">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-expand-silent" value="false">
                                静态树（一次性加载）
                            </label>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success expand-node" id="btn-expand-node">展开节点</button>
                            </div>
                            <div class="col-sm-6">
                                <select class="form-control" id="select-expand-node-levels">
                                    <option>1</option>
                                    <option>2</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-danger expand-node" id="btn-collapse-node">合并节点</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary expand-node" id="btn-toggle-expanded">切换节点Toggle Node</button>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success" id="btn-expand-all">展开所有节点Expand All</button>
                            </div>
                            <div class="col-sm-6">
                                <select class="form-control" id="select-expand-all-levels">
                                    <option>1</option>
                                    <option>2</option>
                                </select>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger" id="btn-collapse-all">合并所有节点Collapse All</button>
                    </div>
                    <div class="col-sm-4">
                        <h2>树菜单</h2>
                        <div id="treeview-expandible"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>事件</h2>
                        <div id="expandible-output"></div>
                    </div>
                </div>
                <div class="row">
                    <hr>
                    <h2>演示十四：可多选树菜单</h2>
                    <div class="col-sm-4">
                        <h2>Input</h2>
                        <div class="form-group">
                            <label for="input-check-node" class="sr-only">Search Tree:</label>
                            <input type="input" class="form-control" id="input-check-node" placeholder="Identify node..." value="Parent 1">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-check-silent" value="false">
                                Silent (No events)
                            </label>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success check-node" id="btn-check-node">选中节点</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-danger check-node" id="btn-uncheck-node">取消选中节点</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary check-node" id="btn-toggle-checked">切换节点</button>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success" id="btn-check-all">选中所有节点</button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger" id="btn-uncheck-all">取消选中所有节点</button>
                    </div>
                    <div class="col-sm-4">
                        <h2>Tree</h2>
                        <div id="treeview-checkable"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>Events</h2>
                        <div id="checkable-output"></div>
                    </div>
                </div>
                <div class="row">
                    <hr>
                    <h2>演示十五：失效树菜单Disabled Tree</h2>
                    <div class="col-sm-4">
                        <h2>Input</h2>
                        <div class="form-group">
                            <label for="input-disable-node" class="sr-only">Search Tree:</label>
                            <input type="input" class="form-control" id="input-disable-node" placeholder="Identify node..." value="Parent 1">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" id="chk-disable-silent" value="false">
                                Silent (No events)
                            </label>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success disable-node" id="btn-disable-node">Disable Node</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-danger disable-node" id="btn-enable-node">Enable Node</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary disable-node" id="btn-toggle-disabled">Toggle Node</button>
                        </div>
                        <hr>
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-success" id="btn-disable-all">Disable All</button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger" id="btn-enable-all">Enable All</button>
                    </div>
                    <div class="col-sm-4">
                        <h2>Tree</h2>
                        <div id="treeview-disabled"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2>Events</h2>
                        <div id="disabled-output"></div>
                    </div>
                </div>
                <div class="row">
                    <hr>
                    <h2>Data</h2>
                    <div class="col-sm-4">
                        <h2>JSON Data</h2>
                        <div id="treeview12"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2></h2>
                        <div id="treeview13"></div>
                    </div>
                    <div class="col-sm-4">
                        <h2></h2>
                        <div id="treeview14"></div>
                    </div>
                </div>
                <br/>
                <br/>
                <br/>
                <br/>
            </div>
        </div>

$(function() {

var defaultData = [
                    {
                        text: 'Parent 1',
                        href: '#parent1',
                        tags: ['4'],
                        nodes: [
                            {
                                text: 'Child 1',
                                href: '#child1',
                                tags: ['2'],
                                nodes: [
                                    {
                                        text: 'Grandchild 1',
                                        href: '#grandchild1',
                                        tags: ['0']
                                    },
                                    {
                                        text: 'Grandchild 2',
                                        href: '#grandchild2',
                                        tags: ['0']
                                    }
                                ]
                            },
                            {
                                text: 'Child 2',
                                href: '#child2',
                                tags: ['0']
                            }
                        ]
                    },
                    {
                        text: 'Parent 2',
                        href: '#parent2',
                        tags: ['0']
                    },
                    {
                        text: 'Parent 3',
                        href: '#parent3',
                        tags: ['0']
                    },
                    {
                        text: 'Parent 4',
                        href: '#parent4',
                        tags: ['0']
                    },
                    {
                        text: 'Parent 5',
                        href: '#parent5',
                        tags: ['0']
                    }
                ];

var alternateData = [
                    {
                        text: 'Parent 1',
                        tags: ['2'],
                        nodes: [
                            {
                                text: 'Child 1',
                                tags: ['3'],
                                nodes: [
                                    {
                                        text: 'Grandchild 1',
                                        tags: ['6']
                                    },
                                    {
                                        text: 'Grandchild 2',
                                        tags: ['3']
                                    }
                                ]
                            },
                            {
                                text: 'Child 2',
                                tags: ['3']
                            }
                        ]
                    },
                    {
                        text: 'Parent 2',
                        tags: ['7']
                    },
                    {
                        text: 'Parent 3',
                        icon: 'glyphicon glyphicon-earphone',
                        href: '#demo',
                        tags: ['11']
                    },
                    {
                        text: 'Parent 4',
                        icon: 'glyphicon glyphicon-cloud-download',
                        href: '/demo.html',
                        tags: ['19'],
                        selected: true
                    },
                    {
                        text: 'Parent 5',
                        icon: 'glyphicon glyphicon-certificate',
                        color: 'pink',
                        backColor: 'red',
                        href: 'http://www.shouce.com',
                        tags: ['available', '0']
                    }
                ];

var json = '[' +
                        '{' +
                        '"text": "Parent 1",' +
                        '"nodes": [' +
                        '{' +
                        '"text": "Child 1",' +
                        '"nodes": [' +
                        '{' +
                        '"text": "Grandchild 1"' +
                        '},' +
                        '{' +
                        '"text": "Grandchild 2"' +
                        '}' +
                        ']' +
                        '},' +
                        '{' +
                        '"text": "Child 2"' +
                        '}' +
                        ']' +
                        '},' +
                        '{' +
                        '"text": "Parent 2"' +
                        '},' +
                        '{' +
                        '"text": "Parent 3"' +
                        '},' +
                        '{' +
                        '"text": "Parent 4"' +
                        '},' +
                        '{' +
                        '"text": "Parent 5"' +
                        '}' +
                        ']';

$('#treeview1').treeview({
                    data: defaultData
                });

$('#treeview2').treeview({
                    levels: 1,
                    data: defaultData
                });

$('#treeview3').treeview({
                    levels: 99,
                    data: defaultData
                });

$('#treeview4').treeview({
                    color: "#428bca",
                    data: defaultData
                });

$('#treeview5').treeview({
                    color: "#428bca",
                    expandIcon: 'glyphicon glyphicon-chevron-right',
                    collapseIcon: 'glyphicon glyphicon-chevron-down',
                    nodeIcon: 'glyphicon glyphicon-bookmark',
                    data: defaultData
                });

$('#treeview6').treeview({
                    color: "#428bca",
                    expandIcon: "glyphicon glyphicon-stop",
                    collapseIcon: "glyphicon glyphicon-unchecked",
                    nodeIcon: "glyphicon glyphicon-user",
                    showTags: true,
                    data: defaultData
                });

$('#treeview7').treeview({
                    color: "#428bca",
                    showBorder: false,
                    data: defaultData
                });

$('#treeview8').treeview({
                    expandIcon: "glyphicon glyphicon-stop",
                    collapseIcon: "glyphicon glyphicon-unchecked",
                    nodeIcon: "glyphicon glyphicon-user",
                    color: "yellow",
                    backColor: "purple",
                    onhoverColor: "orange",
                    borderColor: "red",
                    showBorder: false,
                    showTags: true,
                    highlightSelected: true,
                    selectedColor: "yellow",
                    selectedBackColor: "darkorange",
                    data: defaultData
                });

$('#treeview9').treeview({
                    expandIcon: "glyphicon glyphicon-stop",
                    collapseIcon: "glyphicon glyphicon-unchecked",
                    nodeIcon: "glyphicon glyphicon-user",
                    color: "yellow",
                    backColor: "purple",
                    onhoverColor: "orange",
                    borderColor: "red",
                    showBorder: false,
                    showTags: true,
                    highlightSelected: true,
                    selectedColor: "yellow",
                    selectedBackColor: "darkorange",
                    data: alternateData
                });

$('#treeview10').treeview({
                    color: "#428bca",
                    enableLinks: true,
                    data: defaultData
                });

var $searchableTree = $('#treeview-searchable').treeview({
                    data: defaultData,
                });

var search = function(e) {
                    var pattern = $('#input-search').val();
                    var options = {
                        ignoreCase: $('#chk-ignore-case').is(':checked'),
                        exactMatch: $('#chk-exact-match').is(':checked'),
                        revealResults: $('#chk-reveal-results').is(':checked')
                    };
                    var results = $searchableTree.treeview('search', [pattern, options]);

var output = '<p>' + results.length + ' matches found</p>';
                    $.each(results, function(index, result) {
                        output += '<p>- ' + result.text + '</p>';
                    });
                    $('#search-output').html(output);
                }

$('#btn-search').on('click', search);
                $('#input-search').on('keyup', search);

$('#btn-clear-search').on('click', function(e) {
                    $searchableTree.treeview('clearSearch');
                    $('#input-search').val('');
                    $('#search-output').html('');
                });

var findSelectableNodes = function() {
                    return $selectableTree.treeview('search', [$('#input-select-node').val(), {ignoreCase: false, exactMatch: false}]);
                };
                var selectableNodes = findSelectableNodes();

$('#chk-select-multi:checkbox').on('change', function() {
                    console.log('multi-select change');
                    $selectableTree = initSelectableTree();
                    selectableNodes = findSelectableNodes();
                });

// Select/unselect/toggle nodes
                $('#input-select-node').on('keyup', function(e) {
                    selectableNodes = findSelectableNodes();
                    $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
                });

$('#btn-select-node.select-node').on('click', function(e) {
                    $selectableTree.treeview('selectNode', [selectableNodes, {silent: $('#chk-select-silent').is(':checked')}]);
                });

$('#btn-unselect-node.select-node').on('click', function(e) {
                    $selectableTree.treeview('unselectNode', [selectableNodes, {silent: $('#chk-select-silent').is(':checked')}]);
                });

$('#btn-toggle-selected.select-node').on('click', function(e) {
                    $selectableTree.treeview('toggleNodeSelected', [selectableNodes, {silent: $('#chk-select-silent').is(':checked')}]);
                });

var findExpandibleNodess = function() {
                    return $expandibleTree.treeview('search', [$('#input-expand-node').val(), {ignoreCase: false, exactMatch: false}]);
                };
                var expandibleNodes = findExpandibleNodess();

// Expand/collapse/toggle nodes
                $('#input-expand-node').on('keyup', function(e) {
                    expandibleNodes = findExpandibleNodess();
                    $('.expand-node').prop('disabled', !(expandibleNodes.length >= 1));
                });

$('#btn-expand-node.expand-node').on('click', function(e) {
                    var levels = $('#select-expand-node-levels').val();
                    $expandibleTree.treeview('expandNode', [expandibleNodes, {levels: levels, silent: $('#chk-expand-silent').is(':checked')}]);
                });

$('#btn-collapse-node.expand-node').on('click', function(e) {
                    $expandibleTree.treeview('collapseNode', [expandibleNodes, {silent: $('#chk-expand-silent').is(':checked')}]);
                });

$('#btn-toggle-expanded.expand-node').on('click', function(e) {
                    $expandibleTree.treeview('toggleNodeExpanded', [expandibleNodes, {silent: $('#chk-expand-silent').is(':checked')}]);
                });

// Expand/collapse all
                $('#btn-expand-all').on('click', function(e) {
                    var levels = $('#select-expand-all-levels').val();
                    $expandibleTree.treeview('expandAll', {levels: levels, silent: $('#chk-expand-silent').is(':checked')});
                });

$('#btn-collapse-all').on('click', function(e) {
                    $expandibleTree.treeview('collapseAll', {silent: $('#chk-expand-silent').is(':checked')});
                });

var findCheckableNodess = function() {
                    return $checkableTree.treeview('search', [$('#input-check-node').val(), {ignoreCase: false, exactMatch: false}]);
                };
                var checkableNodes = findCheckableNodess();

// Check/uncheck/toggle nodes
                $('#input-check-node').on('keyup', function(e) {
                    checkableNodes = findCheckableNodess();
                    $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
                });

$('#btn-check-node.check-node').on('click', function(e) {
                    $checkableTree.treeview('checkNode', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
                });

$('#btn-uncheck-node.check-node').on('click', function(e) {
                    $checkableTree.treeview('uncheckNode', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
                });

$('#btn-toggle-checked.check-node').on('click', function(e) {
                    $checkableTree.treeview('toggleNodeChecked', [checkableNodes, {silent: $('#chk-check-silent').is(':checked')}]);
                });

// Check/uncheck all
                $('#btn-check-all').on('click', function(e) {
                    $checkableTree.treeview('checkAll', {silent: $('#chk-check-silent').is(':checked')});
                });

$('#btn-uncheck-all').on('click', function(e) {
                    $checkableTree.treeview('uncheckAll', {silent: $('#chk-check-silent').is(':checked')});
                });

var findDisabledNodes = function() {
                    return $disabledTree.treeview('search', [$('#input-disable-node').val(), {ignoreCase: false, exactMatch: false}]);
                };
                var disabledNodes = findDisabledNodes();

// Expand/collapse/toggle nodes
                $('#input-disable-node').on('keyup', function(e) {
                    disabledNodes = findDisabledNodes();
                    $('.disable-node').prop('disabled', !(disabledNodes.length >= 1));
                });

$('#btn-disable-node.disable-node').on('click', function(e) {
                    $disabledTree.treeview('disableNode', [disabledNodes, {silent: $('#chk-disable-silent').is(':checked')}]);
                });

$('#btn-enable-node.disable-node').on('click', function(e) {
                    $disabledTree.treeview('enableNode', [disabledNodes, {silent: $('#chk-disable-silent').is(':checked')}]);
                });

$('#btn-toggle-disabled.disable-node').on('click', function(e) {
                    $disabledTree.treeview('toggleNodeDisabled', [disabledNodes, {silent: $('#chk-disable-silent').is(':checked')}]);
                });

// Expand/collapse all
                $('#btn-disable-all').on('click', function(e) {
                    $disabledTree.treeview('disableAll', {silent: $('#chk-disable-silent').is(':checked')});
                });

$('#btn-enable-all').on('click', function(e) {
                    $disabledTree.treeview('enableAll', {silent: $('#chk-disable-silent').is(':checked')});
                });
                var $tree = $('#treeview12').treeview({
                    data: json
                });
            });
        </script>
    </body>
</html>