jsTree使用记录实例

1. ajax请求生成jsTree

[javascript] view plain copy
<span style="font-size:14px;"><script>
 var r = []; // 权限树中被选中的叶子节点
 var currentGroupId;
 function showPermitTree(id) {
 currentGroupId = id;
 $.ajax({
 data : "currentGroupId=" + id,
 type : "POST",
 //dataType : 'json',
 url : "/test/permittree",
 error : function(data) {
  alert("出错了！！:" + 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("出错了！！:" + data);
 },
 success : function(data) {
  alert("保存成功!");
 }
 });
 }
 </script></span><span style="font-size:24px;">
</span>

直接把测试项目中一段代码copy过来了，这是一棵带复选框的树。页面有地方点击之后触发showPermitTree(id)函数，发送ajax请求给后台，项目使用的是springmvc框架，后台返回JSONArray.toString。

2. jsTree change事件

上面代码中含change事件。把所有选中的节点的id放到一个数组中。

页面上有个按钮，点击后触发saveTree函数，发请求给后台，把选中的节点的id发给后台。

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自带的菜单，并自定义菜单

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

赞 (0)

相关推荐

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • jsTree树控件(基于jQuery, 超强悍)[推荐]

    1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example

  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示

  • jquery下jstree简单应用 - v1.0

    第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j

  • JQery jstree 大数据量问题解决方法

    问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re

  • jsTree 基于JQuery的排序节点 Bug

    例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • 基于jsTree的无限级树JSON数据的转换代码

    基于jsTree的无限级树JSON数据的转换代码

    jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式: 复制代码 代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的值必须是它定义的json数据形式: 复制代码 代码如下: $("#demo2").tree({ data :

  • jstree的简单实例

    最近使用到了jstree,感觉是一款灵活的.可多项定制的tree插件: 我这边使用过程记录下: 参考的jstree api网站,以及demo介绍: https://www.jstree.com/api/#/ jstree api github: https://github.com/vakata/jstree#populating-the-tree-using-a-callback-function 使用中的例子介绍: html代码: <!-- 搜索框 --> <div class=&q

  • jsTree使用记录实例

    jsTree使用记录实例

    1. ajax请求生成jsTree [javascript] view plain copy <span style="font-size:14px;"><script> var r = []; // 权限树中被选中的叶子节点 var currentGroupId; function showPermitTree(id) { currentGroupId = id; $.ajax({ data : "currentGroupId=" + id

  • Oracle 如何规范清理v$archived_log记录实例详解

    Oracle 如何规范清理v$archived_log记录实例详解 单机实例上面,v$archived_log 很多,有上万条记录了,所以得清理一下,不然每次查询都直接滚屏幕了 SQL> select sequence#,applied from v$archived_log order by sequence# ; SEQUENCE# APPLIED .................... SEQUENCE# APPLIED ---------- --------- 9376 NO 9377

  • VC List Control控件如何删除选中的记录实例详解

    VC List Control控件如何删除选中的记录实例详解 实例代码: OnButtonDelete() { POSITION pos = m_list.GetFirstSelectedItemPosition(); int idx = m_list.GetNextSelectedItem(pos); while (idx != -1){ LVITEM lvi; lvi.iItem = idx; lvi.iSubItem = 0; lvi.mask = LVIF_IMAGE; if (m_li

  • THINKPHP项目开发中的日志记录实例分析

    本文实例讲述了THINKPHP项目开发中的日志记录用法.分享给大家供大家参考.具体方法如下: 1.建立日志表 复制代码 代码如下: CREATE TABLE `logs` (    `id` int(11) NOT NULL auto_increment,    `guid` varchar(100) character set utf8 NOT NULL,    `addtime` timestamp NOT NULL default CURRENT_TIMESTAMP,    `accoun

  • C#生成word记录实例解析

    本文以实例形式讲述了C#生成Word记录的方法,具体实现代码如下: private void button1_Click(object sender, System.EventArgs e) { object oMissing = System.Reflection.Missing.Value; object oEndOfDoc = "\\endofdoc"; /* \endofdoc是预定义的bookmark */ //创建一个document. Word._Application

  • .net jMail邮件发送(含抄送、密送、多发、日志记录)实例代码

    jmail是一个第三方邮件操作组件,通常位于web服务器端,实现收邮件及发邮件功能(客户端用Foxmail这类就很好了).可以利用它轻松实现发邮件.抄送.密送.多发.日志记录及收邮件功能.本章要讲的,就是:发邮件.抄送.密送.多发.日志记录. 一.组件准备下载JMail44_pro并安装(记下安装路径) 找到安装路径,将其中的jmail.dll复制到项目中 二.核心发送代码新建MailAPI.cs,并输入以下代码 复制代码 代码如下: using System;using System.Coll

  • 使用Cookies保存网站历史浏览记录实例代码

    下面的代码,注意利用了cookies的多个增加判定等,学习cookies操作的朋友,非常值得一看.核心代码: 复制代码 代码如下: function glog(evt){ evt=evt?evt:window.event; var srcElem=(evt.target)?evt.target:evt.srcElement; try{ while(srcElem.parentNode&&srcElem!=srcElem.parentNode){ if(srcElem.tagName&

  • mysql随机抽取一定数量的记录实例讲解

    以前碰见这种使用场景都是直接order by rand()来处理的,但是效率实在是不敢恭维,所以最近又碰见这种场景,在网上找寻下比较好的解决办法. 1.order by rand() 写法: SELECT id FROM `table` ORDER BY rand() 这种写法的缺点是rand函数在order by中被执行多次,影响效率. 2.max(id) * rand() 使用join 写法: SELECT * FROM `table` AS t1 JOIN ( SELECT ROUND(

  • 防止mysql重复插入记录的方法

    防止mysql重复插入记录的方法有很多种,常用的是ignore,Replace,ON DUPLICATE KEY UPDATE,当然我们也可以在php中加以判断了. 方案一:使用ignore关键字 如果是用主键primary或者唯一索引unique区分了记录的唯一性,避免重复插入记录可以使用: 代码如下: 复制代码 代码如下: INSERT IGNORE INTO `table_name` (`email`, `phone`, `user_id`) VALUES ('test9@163.com'

随机推荐