2014
Mar
14

Treeview

Tags:

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. ]

This post was last modified by Lingi Huang


回應 (Leave a comment)

JavaScript 相關

Web Development 相關

類別 JavaScript

Copyright &copy; 2014 LINGIHUANG.COM. All rights reserved.