123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap Tree View</title>
- <link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
- <!-- <link href="./css/bootstrap-treeview.css" rel="stylesheet"> -->
- </head>
- <body>
- <div class="container">
- <h1>Bootstrap Tree View</h1>
- <br>
- <div class="row">
- <div class="col-sm-4">
- <h2>Default</h2>
- <div id="treeview1" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Collapsed</h2>
- <div id="treeview2" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Expanded</h2>
- <div id="treeview3" class=""></div>
- </div>
- </div>
- <div class="row">
- <div class="col-sm-4">
- <h2>Blue Theme</h2>
- <div id="treeview4" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Custom Icons</h2>
- <div id="treeview5" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Tags as Badges</h2>
- <div id="treeview6" class=""></div>
- </div>
- </div>
- <div class="row">
- <div class="col-sm-4">
- <h2>No Border</h2>
- <div id="treeview7" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Colourful</h2>
- <div id="treeview8" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Node Overrides</h2>
- <div id="treeview9" class=""></div>
- </div>
- </div>
- <div class="row">
- <div class="col-sm-4">
- <h2>Link enabled, or</h2>
- <div id="treeview10" class=""></div>
- </div>
- <div class="col-sm-4">
- </div>
- <div class="col-sm-4">
- </div>
- </div>
- <div class="row">
- <hr>
- <h2>Searchable Tree</h2>
- <div class="col-sm-4">
- <h2>Input</h2>
- <!-- <form> -->
- <div class="form-group">
- <label for="input-search" class="sr-only">Search Tree:</label>
- <input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" class="checkbox" id="chk-ignore-case" value="false">
- Ignore Case
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
- Exact Match
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
- Reveal Results
- </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>
- <!-- </form> -->
- </div>
- <div class="col-sm-4">
- <h2>Tree</h2>
- <div id="treeview-searchable" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Results</h2>
- <div id="search-output"></div>
- </div>
- </div>
- <div class="row">
- <hr>
- <h2>Selectable Tree</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">
- Multi Select
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" class="checkbox" id="chk-select-silent" value="false">
- Silent (No events)
- </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" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Events</h2>
- <div id="selectable-output"></div>
- </div>
- </div>
- <div class="row">
- <hr>
- <h2>Expandible Tree</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">
- Silent (No events)
- </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">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">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>Tree</h2>
- <div id="treeview-expandible" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2>Events</h2>
- <div id="expandible-output"></div>
- </div>
- </div>
- <div class="row">
- <hr>
- <h2>Checkable Tree</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">Check Node</button>
- </div>
- </div>
- <div class="form-group">
- <button type="button" class="btn btn-danger check-node" id="btn-uncheck-node">Uncheck Node</button>
- </div>
- <div class="form-group">
- <button type="button" class="btn btn-primary check-node" id="btn-toggle-checked">Toggle Node</button>
- </div>
- <hr>
- <div class="form-group row">
- <div class="col-sm-6">
- <button type="button" class="btn btn-success" id="btn-check-all">Check All</button>
- </div>
- </div>
- <button type="button" class="btn btn-danger" id="btn-uncheck-all">Uncheck All</button>
- </div>
- <div class="col-sm-4">
- <h2>Tree</h2>
- <div id="treeview-checkable" class=""></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" class=""></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" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2></h2>
- <div id="treeview13" class=""></div>
- </div>
- <div class="col-sm-4">
- <h2></h2>
- <div id="treeview14"></div>
- </div>
- </div>
- <br/>
- <br/>
- <br/>
- <br/>
- </div>
- <script src="./bower_components/jquery/dist/jquery.js"></script>
- <script src="./js/bootstrap-treeview.js"></script>
- <script type="text/javascript">
- $(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.tesco.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 initSelectableTree = function() {
- return $('#treeview-selectable').treeview({
- data: defaultData,
- multiSelect: $('#chk-select-multi').is(':checked'),
- onNodeSelected: function(event, node) {
- $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
- },
- onNodeUnselected: function (event, node) {
- $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
- }
- });
- };
- var $selectableTree = initSelectableTree();
- 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 $expandibleTree = $('#treeview-expandible').treeview({
- data: defaultData,
- onNodeCollapsed: function(event, node) {
- $('#expandible-output').prepend('<p>' + node.text + ' was collapsed</p>');
- },
- onNodeExpanded: function (event, node) {
- $('#expandible-output').prepend('<p>' + node.text + ' was expanded</p>');
- }
- });
- 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 $checkableTree = $('#treeview-checkable').treeview({
- data: defaultData,
- showIcon: false,
- showCheckbox: true,
- onNodeChecked: function(event, node) {
- $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
- },
- onNodeUnchecked: function (event, node) {
- $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
- }
- });
- 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 $disabledTree = $('#treeview-disabled').treeview({
- data: defaultData,
- onNodeDisabled: function(event, node) {
- $('#disabled-output').prepend('<p>' + node.text + ' was disabled</p>');
- },
- onNodeEnabled: function (event, node) {
- $('#disabled-output').prepend('<p>' + node.text + ' was enabled</p>');
- },
- onNodeCollapsed: function(event, node) {
- $('#disabled-output').prepend('<p>' + node.text + ' was collapsed</p>');
- },
- onNodeUnchecked: function (event, node) {
- $('#disabled-output').prepend('<p>' + node.text + ' was unchecked</p>');
- },
- onNodeUnselected: function (event, node) {
- $('#disabled-output').prepend('<p>' + node.text + ' was unselected</p>');
- }
- });
- 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>
|