css庫
js庫
官方使用的容器為
接下來是 js 將 jstree 例項化
$(
'#container').jstree(,
"plugins": ["contextmenu"]
})/* 外掛程式還有這些 按需使用
"plugins" : [
"checkbox",
"contextmenu",
"dnd",
"massload",
"search",
"sort",
"state",
"types",
"unique",
"wholerow",
"changed",
"conditionalselect"
] */
下面是針對右鍵功能外掛程式的使用
// 配置檔案
$('#container').jstree(,
"contextmenu":
}})var newnode = , pos, function
(new_node) catch (ex) , 0);
}});
}}var newchildnode = , "last", function
(new_node) catch (ex) , 0);
}});
}}var removenode = else
}}
文件中一些 event 的使用
/**
* 建立節點時觸發事件
* */
$('#container').on("create_node.jstree", function (e, node) )
/** * 彈出右鍵選單時，解析事件
* 在解析contextmenu時觸發文件（構建html）
*@param data.reference 右鍵單擊的元素
*@param data.element 選單本身的dom元素
*@param data.positon 選單的x和y座標
* */
$(document).on("context_show.vakata", function (e, data)
})/**
* 右鍵選單顯示時的內容
* */
$('#container').on("show_contextmenu.jstree", function (obj, x, y, i) )
外部按鈕 建立節點方法
// 建立同級節點
function
newnode
() // console.log(ref, sel,refparnet)
sel = sel[0].parent;
sel = ref.create_node(sel);
if (sel)
};// 建立子級節點
function
newchildnode
() sel = sel[0];
sel = ref.create_node(sel, );
if (sel)
};// 節點重新命名
function
demo_rename
() sel = sel[0];
ref.edit(sel);
};// 節點刪除
function
removenode
() ref.delete_node(sel);
};
呼叫
class="button">
onclick="newnode()">建立選中同級節點button>
onclick="newchildnode()">建立選中子級節點button>
onclick="removenode()">刪除節點button>
div>
方法說明
get_selected(param)
param: 可傳 true 也可以不傳 傳 true 返回的陣列將包含完整的節點對 不傳參 只返回 id
$.jstree.reference (needle)
獲取對現有例項的引用
multiple
預設為 true 可以多選 false 禁止多選
data.node.original
傳入資料的原資料處理結果
$container.jstree()._model.data
對原資料解析成簡單的資料
$container.jstree().open_node()
開啟節點，傳入的可以是陣列，但是其不會開啟要開啟的節點的父節點
$container.jstree()._open_to()
開啟到摸個節點，會開啟其父節點，只能開啟乙個不支援陣列
ready.jstree
載入完節點後執行
8. 一些提高體驗的方法
jstree的一些用法
繼續上次的用法 當樹載入完成後觸發的時間 tree 2 on ready.jstree function e,data tree 2 on changed.jstree function e,data 開啟節點事件 當乙個節點被展開時觸發的事件 tree 2 on open node.jstree ...
vue axios使用 一些坑
1，這個是為了在傳送post請求的時候將引數序列化 import axios from axios import qs from qs 用於post請求引數序列化 post傳參序列化 新增請求 2，可以全域性設定修改header 3，可以傳送請求時，修改頭部 var data axios.post ...
iview使用的一些坑
由於公司的設計偏愛iview的這種設計風格，所以在vue的道路上與iview形影不離 autocomplete 最開始發現有問題是偶然的從這個元件開始的，但其實是乙個select相關操作的問題，不過跟使用的機器有關。可能不同的機器對鍵盤的碼的識別不一樣，導致在某些電腦上無法使用回車 上下箭頭 tab...