jsTree使用記錄實(shí)例
1. ajax請(qǐng)求生成jsTree
[javascript] view plain copy <span style="font-size:14px;"><script> var r = []; // 權(quán)限樹(shù)中被選中的葉子節(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>
直接把測(cè)試項(xiàng)目中一段代碼copy過(guò)來(lái)了,這是一棵帶復(fù)選框的樹(shù)。頁(yè)面有地方點(diǎn)擊之后觸發(fā)showPermitTree(id)函數(shù),發(fā)送ajax請(qǐng)求給后臺(tái),項(xiàng)目使用的是springmvc框架,后臺(tái)返回JSONArray.toString。
2. jsTree change事件
上面代碼中含change事件。把所有選中的節(jié)點(diǎn)的id放到一個(gè)數(shù)組中。
頁(yè)面上有個(gè)按鈕,點(diǎn)擊后觸發(fā)saveTree函數(shù),發(fā)請(qǐng)求給后臺(tái),把選中的節(jié)點(diǎn)的id發(fā)給后臺(tái)。
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自帶的菜單,并自定義菜單
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家有所幫助,同時(shí)也希望多多支持腳本之家!
- jstree創(chuàng)建無(wú)限分級(jí)樹(shù)的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用
- jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
- jquery下jstree簡(jiǎn)單應(yīng)用 - v1.0
- jquery.jstree 增加節(jié)點(diǎn)的雙擊事件代碼
- 基于jsTree的無(wú)限級(jí)樹(shù)JSON數(shù)據(jù)的轉(zhuǎn)換代碼
- JQery jstree 大數(shù)據(jù)量問(wèn)題解決方法
- jsTree樹(shù)控件(基于jQuery, 超強(qiáng)悍)[推薦]
- jstree的簡(jiǎn)單實(shí)例
相關(guān)文章
點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
下面小編就為大家?guī)?lái)一篇點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06javascript 通用loading動(dòng)畫(huà)效果實(shí)例代碼
這篇文章主要介紹了javascript 通用loading動(dòng)畫(huà)效果實(shí)例代碼,有需要的朋友可以參考一下2014-01-01js 純數(shù)字不重復(fù)排列的另類(lèi)方法
有一組數(shù)據(jù),大概10萬(wàn)個(gè)左右,每一單位的值不會(huì)大于30000,要求按照由大到小的順序不重復(fù)輸出。2010-07-07javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡(jiǎn)單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對(duì)數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼,可實(shí)現(xiàn)基本的JS響應(yīng)鼠標(biāo)事件動(dòng)態(tài)展開(kāi)與折疊菜單欄的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript實(shí)現(xiàn)簡(jiǎn)單的日歷效果
本文給大家分享的是一個(gè)簡(jiǎn)單的JavaScript制作的日歷模板,小伙伴們可以根據(jù)自己的需求,繼續(xù)補(bǔ)充,希望大家能夠喜歡2016-09-09JavaScript常用的返回,自動(dòng)跳轉(zhuǎn),刷新,關(guān)閉語(yǔ)句匯總
這篇文章主要介紹了JavaScript常用的返回,自動(dòng)跳轉(zhuǎn),刷新,關(guān)閉語(yǔ)句,實(shí)例匯總了常用的javascript技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01