Няма описание
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

extended-ui-treeview.js 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. /**
  2. * Treeview (jquery)
  3. */
  4. 'use strict';
  5. $(function () {
  6. var theme = $('html').attr('data-bs-theme') === 'dark' ? 'default-dark' : 'default',
  7. basicTree = $('#jstree-basic'),
  8. customIconsTree = $('#jstree-custom-icons'),
  9. contextMenu = $('#jstree-context-menu'),
  10. dragDrop = $('#jstree-drag-drop'),
  11. checkboxTree = $('#jstree-checkbox'),
  12. ajaxTree = $('#jstree-ajax');
  13. // Basic
  14. // --------------------------------------------------------------------
  15. if (basicTree.length) {
  16. basicTree.jstree({
  17. core: {
  18. themes: {
  19. name: theme
  20. }
  21. }
  22. });
  23. }
  24. // Custom Icons
  25. // --------------------------------------------------------------------
  26. if (customIconsTree.length) {
  27. customIconsTree.jstree({
  28. core: {
  29. themes: {
  30. name: theme
  31. },
  32. data: [
  33. {
  34. text: 'css',
  35. children: [
  36. {
  37. text: 'app.css',
  38. type: 'css'
  39. },
  40. {
  41. text: 'style.css',
  42. type: 'css'
  43. }
  44. ]
  45. },
  46. {
  47. text: 'img',
  48. state: {
  49. opened: true
  50. },
  51. children: [
  52. {
  53. text: 'bg.jpg',
  54. type: 'img'
  55. },
  56. {
  57. text: 'logo.png',
  58. type: 'img'
  59. },
  60. {
  61. text: 'avatar.png',
  62. type: 'img'
  63. }
  64. ]
  65. },
  66. {
  67. text: 'js',
  68. state: {
  69. opened: true
  70. },
  71. children: [
  72. {
  73. text: 'jquery.js',
  74. type: 'js'
  75. },
  76. {
  77. text: 'app.js',
  78. type: 'js'
  79. }
  80. ]
  81. },
  82. {
  83. text: 'index.html',
  84. type: 'html'
  85. },
  86. {
  87. text: 'page-one.html',
  88. type: 'html'
  89. },
  90. {
  91. text: 'page-two.html',
  92. type: 'html'
  93. }
  94. ]
  95. },
  96. plugins: ['types'],
  97. types: {
  98. default: {
  99. icon: 'icon-base bx bx-folder'
  100. },
  101. html: {
  102. icon: 'icon-base bx bxl-html5 bg-danger'
  103. },
  104. css: {
  105. icon: 'icon-base bx bxl-css3 bg-info'
  106. },
  107. img: {
  108. icon: 'icon-base bx bx-image bg-success'
  109. },
  110. js: {
  111. icon: 'icon-base bx bxl-nodejs bg-warning'
  112. }
  113. }
  114. });
  115. }
  116. // Context Menu
  117. // --------------------------------------------------------------------
  118. if (contextMenu.length) {
  119. contextMenu.jstree({
  120. core: {
  121. themes: {
  122. name: theme
  123. },
  124. check_callback: true,
  125. data: [
  126. {
  127. text: 'css',
  128. children: [
  129. {
  130. text: 'app.css',
  131. type: 'css'
  132. },
  133. {
  134. text: 'style.css',
  135. type: 'css'
  136. }
  137. ]
  138. },
  139. {
  140. text: 'img',
  141. state: {
  142. opened: true
  143. },
  144. children: [
  145. {
  146. text: 'bg.jpg',
  147. type: 'img'
  148. },
  149. {
  150. text: 'logo.png',
  151. type: 'img'
  152. },
  153. {
  154. text: 'avatar.png',
  155. type: 'img'
  156. }
  157. ]
  158. },
  159. {
  160. text: 'js',
  161. state: {
  162. opened: true
  163. },
  164. children: [
  165. {
  166. text: 'jquery.js',
  167. type: 'js'
  168. },
  169. {
  170. text: 'app.js',
  171. type: 'js'
  172. }
  173. ]
  174. },
  175. {
  176. text: 'index.html',
  177. type: 'html'
  178. },
  179. {
  180. text: 'page-one.html',
  181. type: 'html'
  182. },
  183. {
  184. text: 'page-two.html',
  185. type: 'html'
  186. }
  187. ]
  188. },
  189. plugins: ['types', 'contextmenu'],
  190. types: {
  191. default: {
  192. icon: 'icon-base bx bx-folder'
  193. },
  194. html: {
  195. icon: 'icon-base bx bxl-html5 bg-danger'
  196. },
  197. css: {
  198. icon: 'icon-base bx bxl-css3 bg-info'
  199. },
  200. img: {
  201. icon: 'icon-base bx bx-image bg-success'
  202. },
  203. js: {
  204. icon: 'icon-base bx bxl-nodejs bg-warning'
  205. }
  206. }
  207. });
  208. }
  209. // Drag Drop
  210. // --------------------------------------------------------------------
  211. if (dragDrop.length) {
  212. dragDrop.jstree({
  213. core: {
  214. themes: {
  215. name: theme
  216. },
  217. check_callback: true,
  218. data: [
  219. {
  220. text: 'css',
  221. children: [
  222. {
  223. text: 'app.css',
  224. type: 'css'
  225. },
  226. {
  227. text: 'style.css',
  228. type: 'css'
  229. }
  230. ]
  231. },
  232. {
  233. text: 'img',
  234. state: {
  235. opened: true
  236. },
  237. children: [
  238. {
  239. text: 'bg.jpg',
  240. type: 'img'
  241. },
  242. {
  243. text: 'logo.png',
  244. type: 'img'
  245. },
  246. {
  247. text: 'avatar.png',
  248. type: 'img'
  249. }
  250. ]
  251. },
  252. {
  253. text: 'js',
  254. state: {
  255. opened: true
  256. },
  257. children: [
  258. {
  259. text: 'jquery.js',
  260. type: 'js'
  261. },
  262. {
  263. text: 'app.js',
  264. type: 'js'
  265. }
  266. ]
  267. },
  268. {
  269. text: 'index.html',
  270. type: 'html'
  271. },
  272. {
  273. text: 'page-one.html',
  274. type: 'html'
  275. },
  276. {
  277. text: 'page-two.html',
  278. type: 'html'
  279. }
  280. ]
  281. },
  282. plugins: ['types', 'dnd'],
  283. types: {
  284. default: {
  285. icon: 'icon-base bx bx-folder'
  286. },
  287. html: {
  288. icon: 'icon-base bx bxl-html5 bg-danger'
  289. },
  290. css: {
  291. icon: 'icon-base bx bxl-css3 bg-info'
  292. },
  293. img: {
  294. icon: 'icon-base bx bx-image bg-success'
  295. },
  296. js: {
  297. icon: 'icon-base bx bxl-nodejs bg-warning'
  298. }
  299. }
  300. });
  301. }
  302. // Checkbox
  303. // --------------------------------------------------------------------
  304. if (checkboxTree.length) {
  305. checkboxTree.jstree({
  306. core: {
  307. themes: {
  308. name: theme
  309. },
  310. data: [
  311. {
  312. text: 'css',
  313. children: [
  314. {
  315. text: 'app.css',
  316. type: 'css'
  317. },
  318. {
  319. text: 'style.css',
  320. type: 'css'
  321. }
  322. ]
  323. },
  324. {
  325. text: 'img',
  326. state: {
  327. opened: true
  328. },
  329. children: [
  330. {
  331. text: 'bg.jpg',
  332. type: 'img'
  333. },
  334. {
  335. text: 'logo.png',
  336. type: 'img'
  337. },
  338. {
  339. text: 'avatar.png',
  340. type: 'img'
  341. }
  342. ]
  343. },
  344. {
  345. text: 'js',
  346. state: {
  347. opened: true
  348. },
  349. children: [
  350. {
  351. text: 'jquery.js',
  352. type: 'js'
  353. },
  354. {
  355. text: 'app.js',
  356. type: 'js'
  357. }
  358. ]
  359. },
  360. {
  361. text: 'index.html',
  362. type: 'html'
  363. },
  364. {
  365. text: 'page-one.html',
  366. type: 'html'
  367. },
  368. {
  369. text: 'page-two.html',
  370. type: 'html'
  371. }
  372. ]
  373. },
  374. plugins: ['types', 'checkbox', 'wholerow'],
  375. types: {
  376. default: {
  377. icon: 'icon-base bx bx-folder'
  378. },
  379. html: {
  380. icon: 'icon-base bx bxl-html5 bg-danger'
  381. },
  382. css: {
  383. icon: 'icon-base bx bxl-css3 bg-info'
  384. },
  385. img: {
  386. icon: 'icon-base bx bx-image bg-success'
  387. },
  388. js: {
  389. icon: 'icon-base bx bxl-nodejs bg-warning'
  390. }
  391. }
  392. });
  393. }
  394. // Ajax Example
  395. // --------------------------------------------------------------------
  396. if (ajaxTree.length) {
  397. ajaxTree.jstree({
  398. core: {
  399. themes: {
  400. name: theme
  401. },
  402. data: {
  403. url: assetsPath + 'json/jstree-data.json',
  404. dataType: 'json',
  405. data: function (node) {
  406. return {
  407. id: node.id
  408. };
  409. }
  410. }
  411. },
  412. plugins: ['types', 'state'],
  413. types: {
  414. default: {
  415. icon: 'icon-base bx bx-folder'
  416. },
  417. html: {
  418. icon: 'icon-base bx bxl-html5 bg-danger'
  419. },
  420. css: {
  421. icon: 'icon-base bx bxl-css3 bg-info'
  422. },
  423. img: {
  424. icon: 'icon-base bx bx-image bg-success'
  425. },
  426. js: {
  427. icon: 'icon-base bx bxl-nodejs bg-warning'
  428. }
  429. }
  430. });
  431. }
  432. });