jsTree使用記錄實(shí)例
1. ajax請求生成jsTree
[javascript] view plain copy <span style="font-size:14px;"><script> var r = []; // 權(quán)限樹中被選中的葉子節(jié)點(diǎn) var currentGroupId; function showPermitTree(id) { currentGroupId = id; $.ajax({ data : "currentGroupId=" + id, type : "POST", //dataType : 'json', url : "/test/permittree", error : function(data) { alert("出錯(cuò)了??!:" + data); }, success : function(data) { //alert("success:" + data); createPermitTree(data); } }); ${'buttonDiv'}.style.display=""; } function createPermitTree(datastr) { datastr = eval("" + datastr + ""); $('#permitTree').jstree({ 'plugins' : [ "wholerow", "checkbox", "types" ], 'core' : { "themes" : { "responsive" : false }, 'data' : datastr }, "types" : { "default" : { "icon" : "fa fa-folder icon-state-warning icon-lg" }, "file" : { "icon" : "fa fa-file icon-state-warning icon-lg" } } }); } // listen for event $('#permitTree').on('changed.jstree', function(e, data) { r = []; var i, j; for (i = 0, j = data.selected.length; i < j; i++) { var node = data.instance.get_node(data.selected[i]); if (data.instance.is_leaf(node)) { r.push(node.id); } } //alert('Selected: ' + r.join('@@')); }) function saveTree() { $.ajax({ data : {'currentGroupId' : currentGroupId, 'selectedNodes' : r.join('@@')}, type : "POST", //dataType : 'json', url : "/test/savetree", error : function(data) { alert("出錯(cuò)了?。?" + data); }, success : function(data) { alert("保存成功!"); } }); } </script></span><span style="font-size:24px;"> </span>
直接把測試項(xiàng)目中一段代碼copy過來了,這是一棵帶復(fù)選框的樹。頁面有地方點(diǎn)擊之后觸發(fā)showPermitTree(id)函數(shù),發(fā)送ajax請求給后臺,項(xiàng)目使用的是springmvc框架,后臺返回JSONArray.toString。
2. jsTree change事件
上面代碼中含change事件。把所有選中的節(jié)點(diǎn)的id放到一個(gè)數(shù)組中。
頁面上有個(gè)按鈕,點(diǎn)擊后觸發(fā)saveTree函數(shù),發(fā)請求給后臺,把選中的節(jié)點(diǎn)的id發(fā)給后臺。
3.jsTree自定義contextmenu
[javascript] view plain copy <script> $('#jstree').jstree({ core : { check_callback : true, data : [ { "id" : "1", "parent" : "#", "text" : "root" }, { "id" : "2", "parent" : "1", "text" : "child 1" }, { "id" : "3", "parent" : "1", "text" : "child 2" } ], }, plugins : ["wholerow","contextmenu"], "contextmenu": { "items": { "create": null, "rename": null, "remove": null, "ccp": null, "add": { "label": "add", "action": function (obj) { var inst = jQuery.jstree.reference(obj.reference); var clickedNode = inst.get_node(obj.reference); alert("add operation--clickedNode's id is:" + clickedNode.id); } }, "delete": { "label": "delete", "action": function (obj) { var inst = jQuery.jstree.reference(obj.reference); var clickedNode = inst.get_node(obj.reference); alert("delete operation--clickedNode's id is:" + clickedNode.id); } } } } }).on("ready.jstree", function (e, data) { data.instance.open_all(); }); </script>
這段代碼使用jsTree的contextmenu plugin,去掉jsTree自帶的菜單,并自定義菜單
以上就是本文的全部內(nèi)容,希望對大家有所幫助,同時(shí)也希望多多支持腳本之家!
- jstree創(chuàng)建無限分級樹的方法【基于ajax動態(tài)創(chuàng)建子節(jié)點(diǎn)】
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁處理和插件JSTree的使用
- jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
- jquery下jstree簡單應(yīng)用 - v1.0
- jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼
- 基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼
- JQery jstree 大數(shù)據(jù)量問題解決方法
- jsTree樹控件(基于jQuery, 超強(qiáng)悍)[推薦]
- jstree的簡單實(shí)例
相關(guān)文章
點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡單js代碼(推薦)
下面小編就為大家?guī)硪黄c(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡單js代碼(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06javascript 通用loading動畫效果實(shí)例代碼
這篇文章主要介紹了javascript 通用loading動畫效果實(shí)例代碼,有需要的朋友可以參考一下2014-01-01javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼,可實(shí)現(xiàn)基本的JS響應(yīng)鼠標(biāo)事件動態(tài)展開與折疊菜單欄的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript實(shí)現(xiàn)簡單的日歷效果
本文給大家分享的是一個(gè)簡單的JavaScript制作的日歷模板,小伙伴們可以根據(jù)自己的需求,繼續(xù)補(bǔ)充,希望大家能夠喜歡2016-09-09JavaScript常用的返回,自動跳轉(zhuǎn),刷新,關(guān)閉語句匯總
這篇文章主要介紹了JavaScript常用的返回,自動跳轉(zhuǎn),刷新,關(guān)閉語句,實(shí)例匯總了常用的javascript技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01