index.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap Tree View</title>
  5. <link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  6. <!-- <link href="./css/bootstrap-treeview.css" rel="stylesheet"> -->
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1>Bootstrap Tree View</h1>
  11. <br>
  12. <div class="row">
  13. <div class="col-sm-4">
  14. <h2>Default</h2>
  15. <div id="treeview1" class=""></div>
  16. </div>
  17. <div class="col-sm-4">
  18. <h2>Collapsed</h2>
  19. <div id="treeview2" class=""></div>
  20. </div>
  21. <div class="col-sm-4">
  22. <h2>Expanded</h2>
  23. <div id="treeview3" class=""></div>
  24. </div>
  25. </div>
  26. <div class="row">
  27. <div class="col-sm-4">
  28. <h2>Blue Theme</h2>
  29. <div id="treeview4" class=""></div>
  30. </div>
  31. <div class="col-sm-4">
  32. <h2>Custom Icons</h2>
  33. <div id="treeview5" class=""></div>
  34. </div>
  35. <div class="col-sm-4">
  36. <h2>Tags as Badges</h2>
  37. <div id="treeview6" class=""></div>
  38. </div>
  39. </div>
  40. <div class="row">
  41. <div class="col-sm-4">
  42. <h2>No Border</h2>
  43. <div id="treeview7" class=""></div>
  44. </div>
  45. <div class="col-sm-4">
  46. <h2>Colourful</h2>
  47. <div id="treeview8" class=""></div>
  48. </div>
  49. <div class="col-sm-4">
  50. <h2>Node Overrides</h2>
  51. <div id="treeview9" class=""></div>
  52. </div>
  53. </div>
  54. <div class="row">
  55. <div class="col-sm-4">
  56. <h2>Link enabled, or</h2>
  57. <div id="treeview10" class=""></div>
  58. </div>
  59. <div class="col-sm-4">
  60. </div>
  61. <div class="col-sm-4">
  62. </div>
  63. </div>
  64. <div class="row">
  65. <hr>
  66. <h2>Searchable Tree</h2>
  67. <div class="col-sm-4">
  68. <h2>Input</h2>
  69. <!-- <form> -->
  70. <div class="form-group">
  71. <label for="input-search" class="sr-only">Search Tree:</label>
  72. <input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
  73. </div>
  74. <div class="checkbox">
  75. <label>
  76. <input type="checkbox" class="checkbox" id="chk-ignore-case" value="false">
  77. Ignore Case
  78. </label>
  79. </div>
  80. <div class="checkbox">
  81. <label>
  82. <input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
  83. Exact Match
  84. </label>
  85. </div>
  86. <div class="checkbox">
  87. <label>
  88. <input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
  89. Reveal Results
  90. </label>
  91. </div>
  92. <button type="button" class="btn btn-success" id="btn-search">Search</button>
  93. <button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
  94. <!-- </form> -->
  95. </div>
  96. <div class="col-sm-4">
  97. <h2>Tree</h2>
  98. <div id="treeview-searchable" class=""></div>
  99. </div>
  100. <div class="col-sm-4">
  101. <h2>Results</h2>
  102. <div id="search-output"></div>
  103. </div>
  104. </div>
  105. <div class="row">
  106. <hr>
  107. <h2>Selectable Tree</h2>
  108. <div class="col-sm-4">
  109. <h2>Input</h2>
  110. <div class="form-group">
  111. <label for="input-select-node" class="sr-only">Search Tree:</label>
  112. <input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1">
  113. </div>
  114. <div class="checkbox">
  115. <label>
  116. <input type="checkbox" class="checkbox" id="chk-select-multi" value="false">
  117. Multi Select
  118. </label>
  119. </div>
  120. <div class="checkbox">
  121. <label>
  122. <input type="checkbox" class="checkbox" id="chk-select-silent" value="false">
  123. Silent (No events)
  124. </label>
  125. </div>
  126. <div class="form-group">
  127. <button type="button" class="btn btn-success select-node" id="btn-select-node">Select Node</button>
  128. </div>
  129. <div class="form-group">
  130. <button type="button" class="btn btn-danger select-node" id="btn-unselect-node">Unselect Node</button>
  131. </div>
  132. <div class="form-group">
  133. <button type="button" class="btn btn-primary select-node" id="btn-toggle-selected">Toggle Node</button>
  134. </div>
  135. </div>
  136. <div class="col-sm-4">
  137. <h2>Tree</h2>
  138. <div id="treeview-selectable" class=""></div>
  139. </div>
  140. <div class="col-sm-4">
  141. <h2>Events</h2>
  142. <div id="selectable-output"></div>
  143. </div>
  144. </div>
  145. <div class="row">
  146. <hr>
  147. <h2>Expandible Tree</h2>
  148. <div class="col-sm-4">
  149. <h2>Input</h2>
  150. <div class="form-group">
  151. <label for="input-expand-node" class="sr-only">Search Tree:</label>
  152. <input type="input" class="form-control" id="input-expand-node" placeholder="Identify node..." value="Parent 1">
  153. </div>
  154. <div class="checkbox">
  155. <label>
  156. <input type="checkbox" class="checkbox" id="chk-expand-silent" value="false">
  157. Silent (No events)
  158. </label>
  159. </div>
  160. <div class="form-group row">
  161. <div class="col-sm-6">
  162. <button type="button" class="btn btn-success expand-node" id="btn-expand-node">Expand Node</button>
  163. </div>
  164. <div class="col-sm-6">
  165. <select class="form-control" id="select-expand-node-levels">
  166. <option>1</option>
  167. <option>2</option>
  168. </select>
  169. </div>
  170. </div>
  171. <div class="form-group">
  172. <button type="button" class="btn btn-danger expand-node" id="btn-collapse-node">Collapse Node</button>
  173. </div>
  174. <div class="form-group">
  175. <button type="button" class="btn btn-primary expand-node" id="btn-toggle-expanded">Toggle Node</button>
  176. </div>
  177. <hr>
  178. <div class="form-group row">
  179. <div class="col-sm-6">
  180. <button type="button" class="btn btn-success" id="btn-expand-all">Expand All</button>
  181. </div>
  182. <div class="col-sm-6">
  183. <select class="form-control" id="select-expand-all-levels">
  184. <option>1</option>
  185. <option>2</option>
  186. </select>
  187. </div>
  188. </div>
  189. <button type="button" class="btn btn-danger" id="btn-collapse-all">Collapse All</button>
  190. </div>
  191. <div class="col-sm-4">
  192. <h2>Tree</h2>
  193. <div id="treeview-expandible" class=""></div>
  194. </div>
  195. <div class="col-sm-4">
  196. <h2>Events</h2>
  197. <div id="expandible-output"></div>
  198. </div>
  199. </div>
  200. <div class="row">
  201. <hr>
  202. <h2>Checkable Tree</h2>
  203. <div class="col-sm-4">
  204. <h2>Input</h2>
  205. <div class="form-group">
  206. <label for="input-check-node" class="sr-only">Search Tree:</label>
  207. <input type="input" class="form-control" id="input-check-node" placeholder="Identify node..." value="Parent 1">
  208. </div>
  209. <div class="checkbox">
  210. <label>
  211. <input type="checkbox" class="checkbox" id="chk-check-silent" value="false">
  212. Silent (No events)
  213. </label>
  214. </div>
  215. <div class="form-group row">
  216. <div class="col-sm-6">
  217. <button type="button" class="btn btn-success check-node" id="btn-check-node">Check Node</button>
  218. </div>
  219. </div>
  220. <div class="form-group">
  221. <button type="button" class="btn btn-danger check-node" id="btn-uncheck-node">Uncheck Node</button>
  222. </div>
  223. <div class="form-group">
  224. <button type="button" class="btn btn-primary check-node" id="btn-toggle-checked">Toggle Node</button>
  225. </div>
  226. <hr>
  227. <div class="form-group row">
  228. <div class="col-sm-6">
  229. <button type="button" class="btn btn-success" id="btn-check-all">Check All</button>
  230. </div>
  231. </div>
  232. <button type="button" class="btn btn-danger" id="btn-uncheck-all">Uncheck All</button>
  233. </div>
  234. <div class="col-sm-4">
  235. <h2>Tree</h2>
  236. <div id="treeview-checkable" class=""></div>
  237. </div>
  238. <div class="col-sm-4">
  239. <h2>Events</h2>
  240. <div id="checkable-output"></div>
  241. </div>
  242. </div>
  243. <div class="row">
  244. <hr>
  245. <h2>Disabled Tree</h2>
  246. <div class="col-sm-4">
  247. <h2>Input</h2>
  248. <div class="form-group">
  249. <label for="input-disable-node" class="sr-only">Search Tree:</label>
  250. <input type="input" class="form-control" id="input-disable-node" placeholder="Identify node..." value="Parent 1">
  251. </div>
  252. <div class="checkbox">
  253. <label>
  254. <input type="checkbox" class="checkbox" id="chk-disable-silent" value="false">
  255. Silent (No events)
  256. </label>
  257. </div>
  258. <div class="form-group row">
  259. <div class="col-sm-6">
  260. <button type="button" class="btn btn-success disable-node" id="btn-disable-node">Disable Node</button>
  261. </div>
  262. </div>
  263. <div class="form-group">
  264. <button type="button" class="btn btn-danger disable-node" id="btn-enable-node">Enable Node</button>
  265. </div>
  266. <div class="form-group">
  267. <button type="button" class="btn btn-primary disable-node" id="btn-toggle-disabled">Toggle Node</button>
  268. </div>
  269. <hr>
  270. <div class="form-group row">
  271. <div class="col-sm-6">
  272. <button type="button" class="btn btn-success" id="btn-disable-all">Disable All</button>
  273. </div>
  274. </div>
  275. <button type="button" class="btn btn-danger" id="btn-enable-all">Enable All</button>
  276. </div>
  277. <div class="col-sm-4">
  278. <h2>Tree</h2>
  279. <div id="treeview-disabled" class=""></div>
  280. </div>
  281. <div class="col-sm-4">
  282. <h2>Events</h2>
  283. <div id="disabled-output"></div>
  284. </div>
  285. </div>
  286. <div class="row">
  287. <hr>
  288. <h2>Data</h2>
  289. <div class="col-sm-4">
  290. <h2>JSON Data</h2>
  291. <div id="treeview12" class=""></div>
  292. </div>
  293. <div class="col-sm-4">
  294. <h2></h2>
  295. <div id="treeview13" class=""></div>
  296. </div>
  297. <div class="col-sm-4">
  298. <h2></h2>
  299. <div id="treeview14"></div>
  300. </div>
  301. </div>
  302. <br/>
  303. <br/>
  304. <br/>
  305. <br/>
  306. </div>
  307. <script src="./bower_components/jquery/dist/jquery.js"></script>
  308. <script src="./js/bootstrap-treeview.js"></script>
  309. <script type="text/javascript">
  310. $(function() {
  311. var defaultData = [
  312. {
  313. text: 'Parent 1',
  314. href: '#parent1',
  315. tags: ['4'],
  316. nodes: [
  317. {
  318. text: 'Child 1',
  319. href: '#child1',
  320. tags: ['2'],
  321. nodes: [
  322. {
  323. text: 'Grandchild 1',
  324. href: '#grandchild1',
  325. tags: ['0']
  326. },
  327. {
  328. text: 'Grandchild 2',
  329. href: '#grandchild2',
  330. tags: ['0']
  331. }
  332. ]
  333. },
  334. {
  335. text: 'Child 2',
  336. href: '#child2',
  337. tags: ['0']
  338. }
  339. ]
  340. },
  341. {
  342. text: 'Parent 2',
  343. href: '#parent2',
  344. tags: ['0']
  345. },
  346. {
  347. text: 'Parent 3',
  348. href: '#parent3',
  349. tags: ['0']
  350. },
  351. {
  352. text: 'Parent 4',
  353. href: '#parent4',
  354. tags: ['0']
  355. },
  356. {
  357. text: 'Parent 5',
  358. href: '#parent5' ,
  359. tags: ['0']
  360. }
  361. ];
  362. var alternateData = [
  363. {
  364. text: 'Parent 1',
  365. tags: ['2'],
  366. nodes: [
  367. {
  368. text: 'Child 1',
  369. tags: ['3'],
  370. nodes: [
  371. {
  372. text: 'Grandchild 1',
  373. tags: ['6']
  374. },
  375. {
  376. text: 'Grandchild 2',
  377. tags: ['3']
  378. }
  379. ]
  380. },
  381. {
  382. text: 'Child 2',
  383. tags: ['3']
  384. }
  385. ]
  386. },
  387. {
  388. text: 'Parent 2',
  389. tags: ['7']
  390. },
  391. {
  392. text: 'Parent 3',
  393. icon: 'glyphicon glyphicon-earphone',
  394. href: '#demo',
  395. tags: ['11']
  396. },
  397. {
  398. text: 'Parent 4',
  399. icon: 'glyphicon glyphicon-cloud-download',
  400. href: '/demo.html',
  401. tags: ['19'],
  402. selected: true
  403. },
  404. {
  405. text: 'Parent 5',
  406. icon: 'glyphicon glyphicon-certificate',
  407. color: 'pink',
  408. backColor: 'red',
  409. href: 'http://www.tesco.com',
  410. tags: ['available','0']
  411. }
  412. ];
  413. var json = '[' +
  414. '{' +
  415. '"text": "Parent 1",' +
  416. '"nodes": [' +
  417. '{' +
  418. '"text": "Child 1",' +
  419. '"nodes": [' +
  420. '{' +
  421. '"text": "Grandchild 1"' +
  422. '},' +
  423. '{' +
  424. '"text": "Grandchild 2"' +
  425. '}' +
  426. ']' +
  427. '},' +
  428. '{' +
  429. '"text": "Child 2"' +
  430. '}' +
  431. ']' +
  432. '},' +
  433. '{' +
  434. '"text": "Parent 2"' +
  435. '},' +
  436. '{' +
  437. '"text": "Parent 3"' +
  438. '},' +
  439. '{' +
  440. '"text": "Parent 4"' +
  441. '},' +
  442. '{' +
  443. '"text": "Parent 5"' +
  444. '}' +
  445. ']';
  446. $('#treeview1').treeview({
  447. data: defaultData
  448. });
  449. $('#treeview2').treeview({
  450. levels: 1,
  451. data: defaultData
  452. });
  453. $('#treeview3').treeview({
  454. levels: 99,
  455. data: defaultData
  456. });
  457. $('#treeview4').treeview({
  458. color: "#428bca",
  459. data: defaultData
  460. });
  461. $('#treeview5').treeview({
  462. color: "#428bca",
  463. expandIcon: 'glyphicon glyphicon-chevron-right',
  464. collapseIcon: 'glyphicon glyphicon-chevron-down',
  465. nodeIcon: 'glyphicon glyphicon-bookmark',
  466. data: defaultData
  467. });
  468. $('#treeview6').treeview({
  469. color: "#428bca",
  470. expandIcon: "glyphicon glyphicon-stop",
  471. collapseIcon: "glyphicon glyphicon-unchecked",
  472. nodeIcon: "glyphicon glyphicon-user",
  473. showTags: true,
  474. data: defaultData
  475. });
  476. $('#treeview7').treeview({
  477. color: "#428bca",
  478. showBorder: false,
  479. data: defaultData
  480. });
  481. $('#treeview8').treeview({
  482. expandIcon: "glyphicon glyphicon-stop",
  483. collapseIcon: "glyphicon glyphicon-unchecked",
  484. nodeIcon: "glyphicon glyphicon-user",
  485. color: "yellow",
  486. backColor: "purple",
  487. onhoverColor: "orange",
  488. borderColor: "red",
  489. showBorder: false,
  490. showTags: true,
  491. highlightSelected: true,
  492. selectedColor: "yellow",
  493. selectedBackColor: "darkorange",
  494. data: defaultData
  495. });
  496. $('#treeview9').treeview({
  497. expandIcon: "glyphicon glyphicon-stop",
  498. collapseIcon: "glyphicon glyphicon-unchecked",
  499. nodeIcon: "glyphicon glyphicon-user",
  500. color: "yellow",
  501. backColor: "purple",
  502. onhoverColor: "orange",
  503. borderColor: "red",
  504. showBorder: false,
  505. showTags: true,
  506. highlightSelected: true,
  507. selectedColor: "yellow",
  508. selectedBackColor: "darkorange",
  509. data: alternateData
  510. });
  511. $('#treeview10').treeview({
  512. color: "#428bca",
  513. enableLinks: true,
  514. data: defaultData
  515. });
  516. var $searchableTree = $('#treeview-searchable').treeview({
  517. data: defaultData,
  518. });
  519. var search = function(e) {
  520. var pattern = $('#input-search').val();
  521. var options = {
  522. ignoreCase: $('#chk-ignore-case').is(':checked'),
  523. exactMatch: $('#chk-exact-match').is(':checked'),
  524. revealResults: $('#chk-reveal-results').is(':checked')
  525. };
  526. var results = $searchableTree.treeview('search', [ pattern, options ]);
  527. var output = '<p>' + results.length + ' matches found</p>';
  528. $.each(results, function (index, result) {
  529. output += '<p>- ' + result.text + '</p>';
  530. });
  531. $('#search-output').html(output);
  532. }
  533. $('#btn-search').on('click', search);
  534. $('#input-search').on('keyup', search);
  535. $('#btn-clear-search').on('click', function (e) {
  536. $searchableTree.treeview('clearSearch');
  537. $('#input-search').val('');
  538. $('#search-output').html('');
  539. });
  540. var initSelectableTree = function() {
  541. return $('#treeview-selectable').treeview({
  542. data: defaultData,
  543. multiSelect: $('#chk-select-multi').is(':checked'),
  544. onNodeSelected: function(event, node) {
  545. $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
  546. },
  547. onNodeUnselected: function (event, node) {
  548. $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
  549. }
  550. });
  551. };
  552. var $selectableTree = initSelectableTree();
  553. var findSelectableNodes = function() {
  554. return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]);
  555. };
  556. var selectableNodes = findSelectableNodes();
  557. $('#chk-select-multi:checkbox').on('change', function () {
  558. console.log('multi-select change');
  559. $selectableTree = initSelectableTree();
  560. selectableNodes = findSelectableNodes();
  561. });
  562. // Select/unselect/toggle nodes
  563. $('#input-select-node').on('keyup', function (e) {
  564. selectableNodes = findSelectableNodes();
  565. $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
  566. });
  567. $('#btn-select-node.select-node').on('click', function (e) {
  568. $selectableTree.treeview('selectNode', [ selectableNodes, { silent: $('#chk-select-silent').is(':checked') }]);
  569. });
  570. $('#btn-unselect-node.select-node').on('click', function (e) {
  571. $selectableTree.treeview('unselectNode', [ selectableNodes, { silent: $('#chk-select-silent').is(':checked') }]);
  572. });
  573. $('#btn-toggle-selected.select-node').on('click', function (e) {
  574. $selectableTree.treeview('toggleNodeSelected', [ selectableNodes, { silent: $('#chk-select-silent').is(':checked') }]);
  575. });
  576. var $expandibleTree = $('#treeview-expandible').treeview({
  577. data: defaultData,
  578. onNodeCollapsed: function(event, node) {
  579. $('#expandible-output').prepend('<p>' + node.text + ' was collapsed</p>');
  580. },
  581. onNodeExpanded: function (event, node) {
  582. $('#expandible-output').prepend('<p>' + node.text + ' was expanded</p>');
  583. }
  584. });
  585. var findExpandibleNodess = function() {
  586. return $expandibleTree.treeview('search', [ $('#input-expand-node').val(), { ignoreCase: false, exactMatch: false } ]);
  587. };
  588. var expandibleNodes = findExpandibleNodess();
  589. // Expand/collapse/toggle nodes
  590. $('#input-expand-node').on('keyup', function (e) {
  591. expandibleNodes = findExpandibleNodess();
  592. $('.expand-node').prop('disabled', !(expandibleNodes.length >= 1));
  593. });
  594. $('#btn-expand-node.expand-node').on('click', function (e) {
  595. var levels = $('#select-expand-node-levels').val();
  596. $expandibleTree.treeview('expandNode', [ expandibleNodes, { levels: levels, silent: $('#chk-expand-silent').is(':checked') }]);
  597. });
  598. $('#btn-collapse-node.expand-node').on('click', function (e) {
  599. $expandibleTree.treeview('collapseNode', [ expandibleNodes, { silent: $('#chk-expand-silent').is(':checked') }]);
  600. });
  601. $('#btn-toggle-expanded.expand-node').on('click', function (e) {
  602. $expandibleTree.treeview('toggleNodeExpanded', [ expandibleNodes, { silent: $('#chk-expand-silent').is(':checked') }]);
  603. });
  604. // Expand/collapse all
  605. $('#btn-expand-all').on('click', function (e) {
  606. var levels = $('#select-expand-all-levels').val();
  607. $expandibleTree.treeview('expandAll', { levels: levels, silent: $('#chk-expand-silent').is(':checked') });
  608. });
  609. $('#btn-collapse-all').on('click', function (e) {
  610. $expandibleTree.treeview('collapseAll', { silent: $('#chk-expand-silent').is(':checked') });
  611. });
  612. var $checkableTree = $('#treeview-checkable').treeview({
  613. data: defaultData,
  614. showIcon: false,
  615. showCheckbox: true,
  616. onNodeChecked: function(event, node) {
  617. $('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
  618. },
  619. onNodeUnchecked: function (event, node) {
  620. $('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
  621. }
  622. });
  623. var findCheckableNodess = function() {
  624. return $checkableTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
  625. };
  626. var checkableNodes = findCheckableNodess();
  627. // Check/uncheck/toggle nodes
  628. $('#input-check-node').on('keyup', function (e) {
  629. checkableNodes = findCheckableNodess();
  630. $('.check-node').prop('disabled', !(checkableNodes.length >= 1));
  631. });
  632. $('#btn-check-node.check-node').on('click', function (e) {
  633. $checkableTree.treeview('checkNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
  634. });
  635. $('#btn-uncheck-node.check-node').on('click', function (e) {
  636. $checkableTree.treeview('uncheckNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
  637. });
  638. $('#btn-toggle-checked.check-node').on('click', function (e) {
  639. $checkableTree.treeview('toggleNodeChecked', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
  640. });
  641. // Check/uncheck all
  642. $('#btn-check-all').on('click', function (e) {
  643. $checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') });
  644. });
  645. $('#btn-uncheck-all').on('click', function (e) {
  646. $checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') });
  647. });
  648. var $disabledTree = $('#treeview-disabled').treeview({
  649. data: defaultData,
  650. onNodeDisabled: function(event, node) {
  651. $('#disabled-output').prepend('<p>' + node.text + ' was disabled</p>');
  652. },
  653. onNodeEnabled: function (event, node) {
  654. $('#disabled-output').prepend('<p>' + node.text + ' was enabled</p>');
  655. },
  656. onNodeCollapsed: function(event, node) {
  657. $('#disabled-output').prepend('<p>' + node.text + ' was collapsed</p>');
  658. },
  659. onNodeUnchecked: function (event, node) {
  660. $('#disabled-output').prepend('<p>' + node.text + ' was unchecked</p>');
  661. },
  662. onNodeUnselected: function (event, node) {
  663. $('#disabled-output').prepend('<p>' + node.text + ' was unselected</p>');
  664. }
  665. });
  666. var findDisabledNodes = function() {
  667. return $disabledTree.treeview('search', [ $('#input-disable-node').val(), { ignoreCase: false, exactMatch: false } ]);
  668. };
  669. var disabledNodes = findDisabledNodes();
  670. // Expand/collapse/toggle nodes
  671. $('#input-disable-node').on('keyup', function (e) {
  672. disabledNodes = findDisabledNodes();
  673. $('.disable-node').prop('disabled', !(disabledNodes.length >= 1));
  674. });
  675. $('#btn-disable-node.disable-node').on('click', function (e) {
  676. $disabledTree.treeview('disableNode', [ disabledNodes, { silent: $('#chk-disable-silent').is(':checked') }]);
  677. });
  678. $('#btn-enable-node.disable-node').on('click', function (e) {
  679. $disabledTree.treeview('enableNode', [ disabledNodes, { silent: $('#chk-disable-silent').is(':checked') }]);
  680. });
  681. $('#btn-toggle-disabled.disable-node').on('click', function (e) {
  682. $disabledTree.treeview('toggleNodeDisabled', [ disabledNodes, { silent: $('#chk-disable-silent').is(':checked') }]);
  683. });
  684. // Expand/collapse all
  685. $('#btn-disable-all').on('click', function (e) {
  686. $disabledTree.treeview('disableAll', { silent: $('#chk-disable-silent').is(':checked') });
  687. });
  688. $('#btn-enable-all').on('click', function (e) {
  689. $disabledTree.treeview('enableAll', { silent: $('#chk-disable-silent').is(':checked') });
  690. });
  691. var $tree = $('#treeview12').treeview({
  692. data: json
  693. });
  694. });
  695. </script>
  696. </body>
  697. </html>