2014
Mar
14




Overview

Based on the library bootstrap model and jstree, I built the library Treeview to select a file from the file cabinet and do copy or move.

Getting Started

Step 1: Include CSS and JavaScript of Libraries

Example
  1. <link rel="stylesheet" href="../libraries/bootstrap-3.1.1/dist/css/bootstrap.css">
  2. <link rel="stylesheet" href="/static/css/common/miii-modals.css">
  3. <script src="../libraries/jquery/jquery-1.10.1.js"></script>
  4. <script src="../libraries/bootstrap-3.1.1/dist/js/bootstrap.min.js"></script>
  5. <script src="../libraries/jstree-v.pre1.0/jquery.jstree.js"></script>
  6. <!-- jquery.nicescroll.js is optional. It's included for customzied scroll bar. -->
  7. <script src="../libraries/jquery.nicescroll.340/jquery.nicescroll.js"></script>

Step 2: Include CSS and JavaScript of Treeview

Example
  1. <link rel="stylesheet" href="css/treeview.css">
  2. <script src="js/treeview_lang.js"></script>
  3. <script src="js/treeview.js"></script>

Samples

Select Single Directory

Example
  1. var treeview = new Treeview({
  2. isDirOnly : true,
  3. isCreateDir : true,
  4. isShow : true,
  5. title : "從檔案櫃選擇",
  6. subtitle : "所有檔案櫃",
  7. desc : "把資料搬移到:",
  8. buttonLabel : "搬移",
  9. langs : MIIICLOUD.lang,
  10. callback : function (result) {
  11. if (result.action === "ok") {
  12. console.log(result.selectedData);
  13. console.log(result.createdData);
  14. }
  15. }
  16. });

Select Multiple Files

Example
  1. var treeview = new Treeview({
  2. gid : 14,
  3. isFileMulti : true,
  4. title : "從檔案櫃選擇",
  5. desc : "可勾選單一或多個檔案,然後再發佈於訊息牆中",
  6. buttonLabel : "確定",
  7. isShow : true,
  8. langs : MIIICLOUD.lang,
  9. callback : function (result) {
  10. if (result.action === "ok") {
  11. console.log(result.selectedData);
  12. console.log(result.createdData);
  13. }
  14. }
  15. });

Select Single File

Example
  1. var treeview = new Treeview({
  2. isShow : true,
  3. title : "從檔案櫃選擇",
  4. desc : "勾選一個檔案,然後開始編輯",
  5. buttonLabel : "確定",
  6. langs : MIIICLOUD.lang,
  7. callback : function (result) {
  8. console.log(result.selectedData);
  9. console.log(result.createdData);
  10. }
  11. });

View Demo

Libraries

Bootstrap Modal HTML Markup

Example
  1. <div id="treeview-modal-1374552592089" class="modal fade">
  2. <div class="modal-dialog">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <a href="#" class="close" data-dismiss="modal"><i class="icon-remove"></i></a>
  6. <h3>Treeview</h3>
  7. </div>
  8. <div class="modal-body">
  9. <div class="miii-treeview">
  10. <div class="empty hide">
  11. <p class="main"></p>
  12. <p></p>
  13. </div>
  14. <div class="outer-content hide">
  15. <div>
  16. <p class="desc"></p>
  17. <p class="msg hide"></p>
  18. <h4 class="pull-left"></h4>
  19. <button class="btn pull-right hide">Create Folder</button>
  20. </div>
  21. <div class="inner-content">
  22. <div id="treeview-1374552592089"></div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="modal-footer">
  28. <button class="btn btn-primary">Ok</button>
  29. </div>
  30. </div>
  31. </div>
  32. </div>

jstree Config

Example
  1. $('#treeview-1374552592089').jstree({
  2. 'plugins': [
  3. 'themes', 'json_data', 'ui', 'types', 'crrm'
  4. ],
  5. 'themes': {
  6. 'theme' : 'miii',
  7. 'dots' : true,
  8. 'icons' : true
  9. },
  10. 'ui': {
  11. 'selected_parent_close': 'select_parent'
  12. },
  13. // This will prevent moving or creating any other type as a root node
  14. 'valid_children': ['group'],
  15. 'types' : {
  16. // can have files and other folders inside of it
  17. 'valid_children': ['group'],
  18. 'types': {
  19. 'folder': {
  20. 'icon': {
  21. 'image': '/static/lib/jstree-v.pre1.0/themes/miii/ico_folder.png'
  22. }
  23. },
  24. 'user-folder': {
  25. 'icon': {
  26. 'image': '/static/lib/jstree-v.pre1.0/themes/miii/ico_folder_user.png'
  27. }
  28. }
  29. }
  30. },
  31. 'json_data': {
  32. 'ajax': {
  33. 'url': '/api/files/getFileList',
  34. 'correct_state': true,
  35. // the `data` function is executed in the instance's scope
  36. // the parameter is the node being loaded
  37. // (may be -1, 0, or undefined when loading the root nodes)
  38. 'data': function (n) {
  39. if (n === -1) {
  40. return {
  41. 'gid' : 14,
  42. 'dironly' : 0,
  43. 'permission' : 1, // permission 1: viewable, permission 2: uploadable.
  44. 'format' : 'jstree',
  45. };
  46. } else {
  47. return {
  48. 'gid' : n.data('gid'),
  49. 'path' : n.data('path'),
  50. 'dironly' : 0,
  51. 'permission' : 1,
  52. 'format' : 'jstree'
  53. };
  54. }
  55. }
  56. }
  57. }
  58. });

jstree Render HTML Markup

Example
  1. <div id="treeview-1374552592089" class="jstree jstree-0 jstree-focused jstree-miii">
  2. <ul>
  3. <li data-name="@km" data-gid="14" data-path="/@km" data-size="4096" data-crumb="805802324b3a95c4e810450c586cdcac" class="folder jstree-closed jstree-unchecked" rel="user-folder">
  4. <ins class="jstree-icon"> </ins>
  5. <a href="#">
  6. <ins class="jstree-checkbox"> </ins>
  7. <ins class="jstree-icon"> </ins>知識庫的檔案
  8. </a>
  9. </li>
  10. <li data-name="castro.jpg" data-gid="14" data-path="/USA Trip" data-size="130452" data-crumb="" class="file jstree-leaf jstree-unchecked" rel="user-folder">
  11. <ins class="jstree-icon"> </ins>
  12. <a href="#" class="">
  13. <ins class="jstree-checkbox"> </ins>
  14. <ins class="jstree-icon"> </ins>castro.jpg
  15. </a>
  16. </li>
  17. </ul>
  18. </div>

API

Treeview Config

Parameter Required Type Default Description
buttonLabel No String Ok Treeview button value.
callback No Function function () {} Function will be triggered when clicking on the ok button or hiding the treeview model.
desc No String "" Treeview descriptions.
gid No Number 0 What directory to start getting data from?
isCreateDir No Boolean false To provide the feature to create a new directory.
isDirMulti No Boolean false To provide the feature to allow multi-selection of directories.
isDirOnly No Boolean false To get data of directories only.
isFileMulti No Boolean false To provide the feature to allow mulit-selection of files.
isShow No Boolean false Show treeview in the beginning.
langs No Object {} Treeview international lang kyes.
subtitle No String "" Treeview subtitle.
title No String Treeview Treeview model title.
Example
  1. var treeview = new Treeview({
  2. gid : 0, // List tree from this group id. if 0, list from root node.
  3. isDirMulti : false, // Allow directories to be multiple selected.
  4. isFileMulti : true, // Allow files to be multiple selected.
  5. isDirOnly : false, // List directories only, no files.
  6. isCreateDir : false, // Show the button of create folder.
  7. isShow : false, // Show the modal on the initial.
  8. title : '從檔案櫃選擇', // The title of treeview.
  9. subtitle : '', // The subtitle of treeview.
  10. desc : '', // The description of treeview.
  11. buttonLabel : '確定', // The button label of treeview.
  12. langs : {}, // The lang object of treeview.
  13. callback : function (result) { // The callback function is triggered when closing the treeview modal.
  14. console.log(result.action); // action === 'ok' or action === 'close'
  15. console.log(result.selectedData); // The selected items.
  16. console.log(result.createdData); // The directories created.
  17. }
  18. });

Callback

result.action

Click on the ok button or hide the treeview model.

Example
  1. if (result.action === "ok") {
  2. // after clicking on the ok button
  3. // continue your code here
  4. } else if (result.action === "close") {
  5. // click on the modal close button
  6. }

result.selectedData

The selected directories or files.

Example
  1. result.selectedData = [
  2. {
  3. "filename" : "新增資料夾",
  4. "filesize" : 0,
  5. "gid" : 14,
  6. "path" : "/新增資料夾"
  7. }
  8. ];

result.createdData

The directories users created.

Example
  1. result.createdData = [
  2. {
  3. "filename" : "新增資料夾",
  4. "filesize" : 0,
  5. "gid" : 14,
  6. "path" : ""
  7. },
  8. {
  9. "filename" : "新增資料夾 (2)",
  10. "filesize" : 0,
  11. "gid" : 14,
  12. "path" : ""
  13. }
  14. ];

Treeview Methods

reset()

Uncheck all directories and files, and close all directories.

Example
  1. treeview.reset();

show()

Show the treeview model, and uncheck all directories or files and close all directories.

Example
  1. treeview.show();

hide()

Hide treeview model.

Example
  1. treeview.hide();

showErrors()

Show error messages

Example
  1. treeview.showErrors('Error Message', function () {
  2. // after showing the error message
  3. // continue your code here
  4. });

Mockup Data

JSON Data

Example
  1. [
  2. {
  3. "data": {
  4. "title": "知識庫的檔案", // 顯示在 Treeview 上的目錄或檔案名稱
  5. "attr": {
  6. "href": "#"
  7. }
  8. },
  9. "attr": {
  10. "data-name": "@km", // 實際目錄或檔案名稱
  11. "data-gid": "14",
  12. "data-path": "\/@km",
  13. "data-size": 4096,
  14. "data-crumb": "f519fc5b76163d4c05bc1d1bc48f2c16",
  15. "class": "folder", // "folder" or "file" 用來區別 item 為目錄或檔案。
  16. "rel": "user-folder" // "user-folder" 自己工作區的資料夾 icon"folder" 其他群組的資料夾 icon
  17. },
  18. "state": "closed"
  19. },
  20. {
  21. "data": {
  22. "title": "USA Trip",
  23. "attr": {
  24. "href": "#"
  25. }
  26. },
  27. "attr": {
  28. "data-name": "USA Trip",
  29. "data-gid": "14",
  30. "data-path": "\/USA Trip",
  31. "data-size": 4096,
  32. "data-crumb": "f519fc5b76163d4c05bc1d1bc48f2c16",
  33. "class": "folder",
  34. "rel": "user-folder"
  35. },
  36. "state": "closed"
  37. },
  38. {
  39. "data": {
  40. "title": "miiiCloud",
  41. "attr": {
  42. "href": "#"
  43. }
  44. },
  45. "attr": {
  46. "data-name": "miiiCloud",
  47. "data-gid": 2,
  48. "data-path": "",
  49. "data-size": 0,
  50. "data-crumb": "d3678e423493725a80167833290eea40",
  51. "class": "folder",
  52. "rel": "folder"
  53. },
  54. "state": "closed"
  55. },
  56. {
  57. "data": {
  58. "title": "Dinner_At_Grand_Hotel_Palazzo_della_Fonte_In_Fiuggi_004.JPG",
  59. "attr": {
  60. "href": "#"
  61. }
  62. },
  63. "attr": {
  64. "data-name": "Dinner_At_Grand_Hotel_Palazzo_della_Fonte_In_Fiuggi_004.JPG",
  65. "data-gid": "14",
  66. "data-path": "",
  67. "data-size": 498513,
  68. "data-crumb": "",
  69. "class": "file",
  70. "rel": "user-folder"
  71. },
  72. "state": ""
  73. }
  74. ]

回應 (Leave a comment)