強大的動態樹外掛與jQuery
阿新 • • 發佈:2019-01-28
jsTree是一個功能強大的jQuery外掛,用於生成動態的互動式樹檢視(例如資料夾樹),支援內聯編輯,拖放,複選框,鍵盤導航等。
更多功能:
- 支援HTML和JSON資料。
- 啟用AJAX。
- 自定義節點圖示。
- 延遲載入。
- 回撥函式。
- 可搜尋和可過濾。
基本用法:
1.安裝和下載。
# NPM $ npm install jstree --save
2.在文件中匯入您選擇的主題CSS。
<link rel="stylesheet" href="themes/default/style.min.css"> <link rel="stylesheet" href="themes/default-dark/style.min.css">
3.將jQuery庫和jsTree外掛的指令碼匯入到文件中。
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="jstree.min.js"></script>
4.從HTML資料生成樹結構。
<div id="html" class="demo"> <ul> <li data-jstree='{ "opened" : true }'>Root node <ul> <li data-jstree='{ "selected" : true }'>Child node 1</li> <li>Child node 2</li> </ul> </li> </ul> </div>
5.從內聯資料生成樹結構。
<div id="data" class="demo"></div>
6.通過AJAX從外部JSON檔案生成樹結構。
$('#ajax').jstree({ 'core' : { 'data' : { "url" : "./root.json", "dataType" : "json" // needed only if you do not supply JSON headers } } });
7.所有預設配置選項。
/** * data configuration * * If left as `false` the HTML inside the jstree container element is used to populate the tree (that should be an unordered list with list items). * * You can also pass in a HTML string or a JSON array here. * * It is possible to pass in a standard jQuery-like AJAX config and jstree will automatically determine if the response is JSON or HTML and use that to populate the tree. * In addition to the standard jQuery ajax options here you can suppy functions for `data` and `url`, the functions will be run in the current instance's scope and a param will be passed indicating which node is being loaded, the return value of those functions will be used. * * The last option is to specify a function, that function will receive the node being loaded as argument and a second param which is a function which should be called with the result. * * __Examples__ * * // AJAX * $('#tree').jstree({ * 'core' : { * 'data' : { * 'url' : '/get/children/', * 'data' : function (node) { * return { 'id' : node.id }; * } * } * }); * * // direct data * $('#tree').jstree({ * 'core' : { * 'data' : [ * 'Simple root node', * { * 'id' : 'node_2', * 'text' : 'Root node with options', * 'state' : { 'opened' : true, 'selected' : true }, * 'children' : [ { 'text' : 'Child 1' }, 'Child 2'] * } * ] * } * }); * * // function * $('#tree').jstree({ * 'core' : { * 'data' : function (obj, callback) { * callback.call(this, ['Root 1', 'Root 2']); * } * }); * * @name $.jstree.defaults.core.data */ data : false, /** * configure the various strings used throughout the tree * * You can use an object where the key is the string you need to replace and the value is your replacement. * Another option is to specify a function which will be called with an argument of the needed string and should return the replacement. * If left as `false` no replacement is made. * * __Examples__ * * $('#tree').jstree({ * 'core' : { * 'strings' : { * 'Loading ...' : 'Please wait ...' * } * } * }); * * @name $.jstree.defaults.core.strings */ strings : false, /** * determines what happens when a user tries to modify the structure of the tree * If left as `false` all operations like create, rename, delete, move or copy are prevented. * You can set this to `true` to allow all interactions or use a function to have better control. * * __Examples__ * * $('#tree').jstree({ * 'core' : { * 'check_callback' : function (operation, node, node_parent, node_position, more) { * // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit' * // in case of 'rename_node' node_position is filled with the new node name * return operation === 'rename_node' ? true : false; * } * } * }); * * @name $.jstree.defaults.core.check_callback */ check_callback : false, /** * a callback called with a single object parameter in the instance's scope when something goes wrong (operation prevented, ajax failed, etc) * @name $.jstree.defaults.core.error */ error : $.noop, /** * the open / close animation duration in milliseconds - set this to `false` to disable the animation (default is `200`) * @name $.jstree.defaults.core.animation */ animation : 200, /** * a boolean indicating if multiple nodes can be selected * @name $.jstree.defaults.core.multiple */ multiple : true, /** * theme configuration object * @name $.jstree.defaults.core.themes */ themes : { /** * the name of the theme to use (if left as `false` the default theme is used) * @name $.jstree.defaults.core.themes.name */ name : false, /** * the URL of the theme's CSS file, leave this as `false` if you have manually included the theme CSS (recommended). You can set this to `true` too which will try to autoload the theme. * @name $.jstree.defaults.core.themes.url */ url : false, /** * the location of all jstree themes - only used if `url` is set to `true` * @name $.jstree.defaults.core.themes.dir */ dir : false, /** * a boolean indicating if connecting dots are shown * @name $.jstree.defaults.core.themes.dots */ dots : true, /** * a boolean indicating if node icons are shown * @name $.jstree.defaults.core.themes.icons */ icons : true, /** * a boolean indicating if node ellipsis should be shown - this only works with a fixed with on the container * @name $.jstree.defaults.core.themes.ellipsis */ ellipsis : false, /** * a boolean indicating if the tree background is striped * @name $.jstree.defaults.core.themes.stripes */ stripes : false, /** * a string (or boolean `false`) specifying the theme variant to use (if the theme supports variants) * @name $.jstree.defaults.core.themes.variant */ variant : false, /** * a boolean specifying if a reponsive version of the theme should kick in on smaller screens (if the theme supports it). Defaults to `false`. * @name $.jstree.defaults.core.themes.responsive */ responsive : false }, /** * if left as `true` all parents of all selected nodes will be opened once the tree loads (so that all selected nodes are visible to the user) * @name $.jstree.defaults.core.expand_selected_onload */ expand_selected_onload : true, /** * if left as `true` web workers will be used to parse incoming JSON data where possible, so that the UI will not be blocked by large requests. Workers are however about 30% slower. Defaults to `true` * @name $.jstree.defaults.core.worker */ worker : true, /** * Force node text to plain text (and escape HTML). Defaults to `false` * @name $.jstree.defaults.core.force_text */ force_text : false, /** * Should the node should be toggled if the text is double clicked . Defaults to `true` * @name $.jstree.defaults.core.dblclick_toggle */ dblclick_toggle : true, /** * Should the loaded nodes be part of the state. Defaults to `false` * @name $.jstree.defaults.core.loaded_state */ loaded_state : false, /** * Should the last active node be focused when the tree container is blurred and the focused again. This helps working with screen readers. Defaults to `true` * @name $.jstree.defaults.core.restore_focus */ restore_focus : true, /** * Default keyboard shortcuts (an object where each key is the button name or combo - like 'enter', 'ctrl-space', 'p', etc and the value is the function to execute in the instance's scope) * @name $.jstree.defaults.core.keyboard */ keyboard : { 'ctrl-space': function (e) { // aria defines space only with Ctrl e.type = "click"; $(e.currentTarget).trigger(e); }, 'enter': function (e) { // enter e.type = "click"; $(e.currentTarget).trigger(e); }, 'left': function (e) { // left e.preventDefault(); if(this.is_open(e.currentTarget)) { this.close_node(e.currentTarget); } else { var o = this.get_parent(e.currentTarget); if(o && o.id !== $.jstree.root) { this.get_node(o, true).children('.jstree-anchor').focus(); } } }, 'up': function (e) { // up e.preventDefault(); var o = this.get_prev_dom(e.currentTarget); if(o && o.length) { o.children('.jstree-anchor').focus(); } }, 'right': function (e) { // right e.preventDefault(); if(this.is_closed(e.currentTarget)) { this.open_node(e.currentTarget, function (o) { this.get_node(o, true).children('.jstree-anchor').focus(); }); } else if (this.is_open(e.currentTarget)) { var o = this.get_node(e.currentTarget, true).children('.jstree-children')[0]; if(o) { $(this._firstChild(o)).children('.jstree-anchor').focus(); } } }, 'down': function (e) { // down e.preventDefault(); var o = this.get_next_dom(e.currentTarget); if(o && o.length) { o.children('.jstree-anchor').focus(); } }, '*': function (e) { // aria defines * on numpad as open_all - not very common this.open_all(); }, 'home': function (e) { // home e.preventDefault(); var o = this._firstChild(this.get_container_ul()[0]); if(o) { $(o).children('.jstree-anchor').filter(':visible').focus(); } }, 'end': function (e) { // end e.preventDefault(); this.element.find('.jstree-anchor').filter(':visible').last().focus(); }, 'f2': function (e) { // f2 - safe to include - if check_callback is false it will fail e.preventDefault(); this.edit(e.currentTarget); } }
更新日誌:
2018年7月8日
- v3.3.5:改進了html5 drags
2018年1月9日
- 固定邊緣情況,上下文選單出現在錯誤的位置