【JSTREE】 jstree 使用API

jstree 使用API
beforechange: function() { log("About to change"); return true },         

beforeopen : function() { log("About to open"); return true },         

beforeclose : function() { log("About to close"); return true },         

beforemove : function() { log("About to move"); return true },         

beforecreate: function() { log("About to create"); return true },         

beforerename: function() { log("About to rename"); return true },         

beforedelete: function() { log("About to delete"); return true },         

onselect : function() { log("Select"); },         

ondeselect : function() { log("Deselect"); },         

onchange : function() { log("Focus changed"); },         

onrename : function() { log("Rename"); },         

onmove : function() { log("Move"); },         

oncopy : function() { log("Copy"); },         

oncreate : function() { log("Create"); },         

ondelete : function() { log("Delete"); },         

onopen : function() { log("Open"); },         

onopen_all : function() { log("Open ALL"); },         

onclose : function() { log("Close"); },         

error : function() { },         

ondblclk : function() { log("Doubleclick"); 

TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE); 

TREE_OBJ.select_branch.call(TREE_OBJ, NODE); },         

onrgtclk : function() { log("Rightclick"); },         

onload : function() { log("Tree loaded"); },         

onfocus : function() { log("Tree got focus"); },         

ondrop : function() { log("Foreign node dropped"); } 

$("#Organizediv").jstree({
                        "plugins": ["thems", "html_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu"],
                        "types": {
                            "types": {
                                "department": {
                                    "valid_children": ["department", "root"],
                                    "icon": { "image": "/Images/report_user.png" }
                                },
                                "root": {
                                    "valid_children": ["department", "root"],
                                    "icon": { "image": "/Images/skysolar_logo.png" },
                                    "remove": false
                                }
                            }
                        }
                    })

.bind("select_node.jstree", function (event, data) {
                if (data.rslt.obj.attr("id") != undefined) {
                    var Url = window.location.href.toLowerCase();
                    var id = data.rslt.obj.attr("id").toString();
                }
})

//createnode
                 .bind("create.jstree", function (e, data) {
                     var createdata = "{";
                     createdata += ‘"organizeName":"‘ + data.rslt.name + ‘"‘;
                     createdata += ‘,"parentID":‘ + parseInt(data.rslt.parent.attr("id").replace("li_", ""));
                     createdata += "}";
                     $.ajax({
                         type: "post",
                         url: "/WCF/UserService.svc/AddOrganization",
                         contentType: "text/json;charset=utf-8",
                         data: createdata,
                         success: function (data1) {
                             var id = parseInt(data1.d);
                             $(data.rslt.obj).attr("id", "li_" + data1.d);
                         },
                         error: function () {
                             alert("Create Failure.");
                             $.jstree.rollback(data.rlbk);
                         }
                     })

                 })//remove node
                 .bind("remove.jstree", function (e, data) {
                     data.rslt.obj.each(function () {
                         var removedata = ‘{"ids":‘ + this.id.replace("li_", "") + ‘}‘;
                         $.ajax({
                             type: "post",
                             url: "/WCF/UserService.svc/DeleteOrganize",
                             contentType: "text/json;charset=utf-8",
                             data: removedata,
                             success: function (r) {
                                 alert(r.d);
                                 if (r.d != "Delete Success") {
                                     $.jstree.rollback(data.rlbk);
                                 }
                             },
                             error: function () {
                                 alert("Remove Failure.");
                                 $.jstree.rollback(data.rlbk);
                             }
                         });
                     });
                 })
                    //rename
                 .bind("rename.jstree", function (e, data) {
                     var id = parseInt(data.rslt.obj.attr("id").replace("li_", ""));
                     var newName = data.rslt.new_name;
                     if (newName != "" && newName != undefined) {
                         var renamedata = ‘{"id":‘ + id + ‘,"newName":"‘ + newName + ‘"}‘;
                         $.ajax({
                             type: "post",
                             url: "/WCF/UserService.svc/RenameOrganization",
                             contentType: "text/json;charset=utf-8",
                             data: renamedata,
                             success: function (r) {
                             },
                             error: function () {
                                 $.jstree.rollback(data.rlbk);
                             }
                         });
                     }

                 })
                    //move
                 .bind("move_node.jstree", function (e, data) {
                     data.rslt.o.each(function (i) {
                         var id = parseInt(this.id.replace("li_", ""));
                         var newparentid = 0;
                         if (data.rslt.np.attr("id") != "Organizediv") {
                             newparentid = parseInt(data.rslt.np.attr("id").replace("li_", ""));
                         }
                         var index = parseInt($("#" + this.id).parent().children().index($("#" + this.id)));
                         var movedata = ‘{‘ + ‘"id":‘ + id + ‘,"newParentId":‘ + newparentid + ‘,"index":‘ + index + ‘}‘;
                         $.ajax({
                             type: "post",
                             url: "/WCF/UserService.svc/SortOrganize",
                             contentType: "text/json;charset=utf-8",
                             data: movedata,
                             success: function (r) {
                             },
                             error: function () {
                                 alert("Move Failure.");
                                 $.jstree.rollback(data.rlbk);
                             }
                         });
                     });
                 });
时间: 2024-11-05 13:39:59

【JSTREE】 jstree 使用API的相关文章

利用jstree插件轻松构建树应用

利用jstree插件轻松构建树应用 最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树,利用jstree插件我们先在页面上静态的把这棵树渲染出来,参照官方文档(http://www.jstree.com/),代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head&g

jstree用法小结

jstree是一款功能强大的插件.官网地址http://www.jstree.com/ $('#jstree').jstree({ "core" : { "animation" : 0, "themes" : { "dots": true,"icons":true ,"stripes":false}, "check_callback" : true, "mu

树形菜单 jsTree 使用方法

jsTree版本:3.0.4 在ASP.NET MVC中使用jsTree Model: public class Department { public int Id { get; set; } public string Name { get; set; } public int PId { get; set; } } 数据库: Controller: jsTree既可以一次性把所有节点都加载到客户端,也可以只加载一层,点击节点后再去服务端获取下层节点.对于小的菜单可以一次性加载完,如果节点很

【JSTREE】生成jsTree-001

<span style="font-size:14px;"><script> var r = []; // 权限树中被选中的叶子节点 var currentGroupId; function showPermitTree(id) { currentGroupId = id; $.ajax({ data : "currentGroupId=" + id, type : "POST", //dataType : 'json',

jstree 全部选中事件 select_all 使用

select_all function of jstree not checked node for jstree-open branch of ajax-jstree 很尴尬啊,找了整个百度,360 整个中国网居然没有栗子,解决办法, google就是强大 up vote 1 down vote accepted Please try this: $('#jstree').jstree('select_all'); As requested, I am explaining it. $('#j

JsTree

一.JStree的简单介绍 1.关于jstree jsTree 使用了 jQuery 和 Sarissa,是一个是免费的但是设置灵活的,基于 JavaScript 跨浏览器支持的网页树形部件. jsTree 支持三种数据源头: 预先定义好的 HTML -嵌套的列表结构 JSON XML jsTree 的主要功能有: 同步导入 – 只需要提供一个 URL,就会去请求数据(只适合 JSON 和 XML 数据形式). 支持打开,关闭,重命名,创建,删除节点(通过预先定义好的规则) 支持多种回调函数(o

jstree高级使用,获取所有选中的值并且所有待选的父级结点值

var tree = $("#jstree").jstree({ "core": { "themes": { "responsive": false }, "check_callback": true, 'data': { 'url': function (node) { return '/test/jstreejson'; }, 'data': function (node) { return { 'pa

jstree的基本使用例子

var menu = (function() { var _menu = {data:{}, initMenu : function() { $.jstree.defaults.core.themes.variant = "large"; $.jstree.defaults.core.themes.responsive = true; $.jstree.defaults.sort=function(a,b){ return this.get_node(a).original.order

jsTree树形菜单分类

这里我演示的jsTree是基于ABP框架 ,展示部分代码,话不多说首先看效果如: 1:引入JS <link href="/jstree/themes/default/style.css" rel="stylesheet" /> <script src="/jstree/jstree.js"></script> 2:页面部分代码 1 <div class="row"> 2 <

jsTree 插件Ajax数据

完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H+ 后台主题UI框架 - 文件管理器</title> <meta name="