jsTree使用记录实例

1.创建交互式、快速动态网页应用的网页开发技术请求生成jsTree

[javascript]查看普通copy span style=' font-size :14 px；'脚本var r=[]；//权限树中被选中的叶子节点var currentGroupId函数showPermitTree(id){ currentGroupId=id；$.Ajax({ data : ' currentGroupId=' id，type : 'POST '，//dataType : 'json '，url : '/test/permittree '，错误：函数（数据){ alert('出错了！ '数据);}，成功：函数（数据){ //alert('success: '数据);createPermitTree(数据);} });$ { ' ButtonDiv ' }。风格。display=}函数createPermitTree(datatr){ datatr=eval(' datatr ' ')；$('#permitTree ').jstree({ ' plugins ' :['整行'，' checkbox '，' type '，' core ' : { ' themes ' : { ' responsive ' : false '，' data' : datastr '，' type ' : { ' default ' : { ' icon ' : ' fa-folder icon-state-warning icon-LG ' }，' file ' : { ' icon ' :侦听事件$('#permitTree ').on('changed.jstree '，函数(e，数据){ r=[]；var i，j；for (i=0，j=数据。选中。长度；I j；I){ var node=data。实例。get _ node(数据。选中[I])；if(数据。实例。is _ leaf(node)){ r . push(node。id)；} }//alert(' selected : ' r . join(' @ @ ')；})函数saveTree() { $ .Ajax({ data : { ' currentGroupId ' : currentGroupId，' selected nodes ' : r . join(' @ ')}，类型： 'POST '，//dataType : 'json '，url : '/test/savetree '，错误：函数(数据){ alert('出错了！ '数据);},成功：函数（数据){ alert('保存成功！');} });}/script/span span style=' font-size :24 px；/span

直接把测试项目中一段代码复制过来了，这是一棵带复选框的树。页面有地方点击之后触发showPermitTree(id)函数，发送创建交互式、快速动态网页应用的网页开发技术请求给后台，项目使用的是springmvc框架，后台返回JSONArray.toString。

2.jsTree更改事件

上面代码中含变化事件。把所有选中的节点的编号放到一个数组中。

页面上有个按钮，点击后触发保存树函数，发请求给后台，把选中的节点的编号发给后台。

3.jsTree自定义上下文菜单

[javascript]查看普通copyscript $('#jstree ').jstree({ core : { check _ callback : true，data : [ { 'id' : '1 '，' parent' : '# '，' text' : 'root' }，{ 'id' : '2 '，' parent ' 3: ' 1 '，' text ' : ' child 1 ' }，{ ' id ' : ' 3 '，' parent ' 33: ' 1 '，' text 'get _ node(obj。参考)；警报('添加操作-单击ed节点的编号为： '点击ed节点。id)；} }，' delete ' : { ' label ' : ' delete '，' action ' : function(obj){ var inst=jquery。jstree。参考文献。参考)；var点击了node=inst。get _ node(obj。参考)；警报('删除操作-点击节点的编号为： '点击节点。id)；} } } } }).on('ready.jstree '，函数(e，数据){数据。实例。open _ all()；});/script这段代码使用jsTree的上下文菜单插件，去掉jsTree自带的菜单，并自定义菜单

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！