jsTree使用记录，节点操作及选中等

2023-12-02 01:18
文章标签 使用 操作 记录 节点 选中 jstree

本文主要是介绍jsTree使用记录，节点操作及选中等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

         在开发过程中有一个场景，树是一个项目迭代树，每一个节点都是一个项目，树上面也可以创建文件夹节点将同一类型或者同一个项目的迭代版本放置到一起集中管理，这时候在页面新增了一个迭代版本，创建的时候逻辑并不是在树上面走，但是创建完了之后希望能在树上面体现出来，刷新树节点数据并且选中新建的这个节点，将新建迭代版本的内容呈现出来。

      好了业务场景描述完了，这时候实现按理是很简单的  $('#tree_1').jstree(true).select_node(data);这个方法按照给出的api是可以实现需求，但是实际应用的时候这个方法选中时可以，但是底色样式并没有变化，最后我是这样解决的问题

    //alert($("#"+data).attr("id")); 
                $('.jstree-wholerow-clicked').each(function(){
                    $(this).removeClass('jstree-wholerow-clicked');
                    //alert($(this).attr('class'));
                    //$(this).attr('class','jstree-wholerow');
                })
                //('.jstree-wholerow-clicked').removeClass('jstree-wholerow-clicked');
                $("#"+data).children("div:first").addClass('jstree-wholerow-clicked');
                //$('#tree_1').jstree(true).select_node(data);

当然了，可能会有更好的方式，然而select_node这个方法确实有很多问题，个人使用后觉得样式不会随着选择同步，需要自己改

下面贴一些代码大体都是写树的操作

var kanbanId ;
var onloadTrue = false;
var colnameDiv = '<div class="form-group"><label class="col-md-2 control-label">{kanbanColName}</label><div class="col-md-4">'+
                '<input type="text" name="editColName" id="editColName{length}" class="form-control" value="{name}" alt="{id}" maxlength="6" placeholder="最大长度为6"></div></div>';
var UITree = function () {
    /*$('#tree_1').bind("contextmenu",
            function(){
                return false;
            }
        );*/
    var handleSample = function (treeData) {
        var hostUrl = $("#hostUrl").val();
        $('#tree_1')
            
            .jstree({
            "core" : {
                "themes" : {
                    "responsive": false
                }, 
                // so that create works
               "check_callback" : true,
                'data' : treeData
            },
            "types":false,
           /* "types" : {
                "#" : {
                    "icon" : "fa fa-folder icon-state-warning icon-lg"
                },
                "file" : {
                    "icon" : "fa fa-file icon-state-warning icon-lg"
                }
            },*/
            "themes" : { "stripes" : true },
            "plugins" : [
                "contextmenu", "dnd", "search",
                "state", "types", "wholerow"
              ],
              "types": {
                      "1": {
                         
                          "icon": "jstree-node-online"
                      },
                      "2": {
                          "icon": "jstree-folder",
                         
                      }
                    
                  },
              "contextmenu":{
                "items":{
                    "create":null,
                    "rename":null,
                    "remove":null,
                    "ccp":null,
                    "新建文件夹":{
                        "label":"新建文件夹",
                        "action":function(data){
                            var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(obj.parent=="#"){
                                inst.create_node(obj, {}, "last", function (my_node) {
                                    setTimeout(function () { inst.edit(my_node); },500);
                                });
                            }else{
                                alert("该节点下不允许创建文件夹!!!");
                            }
                            
                        
                        //alert(ss)
                            /*var inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            dialog.show({"title":"新建“"+obj.text+"”的子菜单",url:"/accountmanage/createMenu?id="+obj.id,height:280,width:400});*/
                        }
                    },
                    "删除文件夹":{
                        "label":"删除文件夹",
                        "action":function(data){
                            var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(obj.parent!="#"&&obj.id>=1530843355688){
                                if(obj.children!=null&&obj.children.length!=0){
                                    alert("有子节点存在无法删除");
                                }else{
                                    if(inst.is_selected(obj)) {
                                        inst.delete_node(inst.get_selected());
                                    }
                                    else {
                                        inst.delete_node(obj);
                                    }
                                }
                                
                            }else{
                                alert("该节点不允许删除!!!");
                            }
                        
                           /* var inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(confirm("确定要删除此菜单？删除后不可恢复。")){
                                jQuery.get("/accountmanage/deleteMenu?id="+obj.id,function(dat){
                                    if(dat == 1){
                                        alert("删除菜单成功！");
                                        jQuery("#"+treeid).jstree("refresh");
                                    }else{
                                        alert("删除菜单失败！");
                                    }
                                });
                            }*/
                        }
                    },
                    "编辑文件夹":{
                        "label":"编辑文件夹",
                        "action":function(data){
                            var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                            if(obj.parent!="#"&&obj.id>=1530843355688){
                                //alert(JSON.stringify(obj))
                                inst.edit(obj);
                            }else{
                                alert("该节点不允许编辑!!!");
                            }
                        
                            
                           /* var inst = jQuery.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);editMyNode
                            dialog.show({"title":"编辑“"+obj.text+"”菜单",url:"/accountmanage/editMenu?id="+obj.id,height:280,width:400});*/
                        }
                    }
                }
              }
           /* "contextmenu":{  
                "items":{  
                    "create":null,  
                    "rename":null,  
                    "remove":null,  
                    "ccp":null,  
                    "新建菜单":{  
                        "label":"新建菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0])
                            var pid = node.parent;
                            _menu.operation.addMenu(pid,node);
                        }  
                    },
                    "删除菜单":{  
                        "label":"删除菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            _menu.operation.delMenu(node);
                        }  
                    },
                    "修改菜单":{  
                        "label":"修改菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]).original;
                            _menu.operation.editMenu(node);
                        }  
                    },
                    "上移菜单":{  
                        "label":"上移菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            var prev_dom = $(data.reference[0]).closest("li").prev();
                            _menu.operation.sortMenu(node,prev_dom);
                        }  
                    },
                    "下移菜单":{  
                        "label":"下移菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            var next_dom = $(data.reference[0]).closest("li").next();
                            _menu.operation.sortMenu(node,next_dom);
                        }  
                    },
                    "新建子菜单":{  
                        "label":"新建子菜单",  
                        "action":function(data){
                            var node = _menu.data.jsTree.jstree('get_node',data.reference[0]);
                            var pid = node.id;
                            _menu.operation.addMenu(pid,node);
                        }  
                    }
                }
            } */
            
        }).bind("load_node.jstree", function (event,data) {
             data.instance.clear_state();//这是清空选中的历史记录，若是需要历史回显 请注掉

     
        }).bind("create_node.jstree",function(event,data){
           // createCategory(event,data);
            //alert(data);
        }).bind("rename_node.jstree",function(event,data){
            rename(event,data);
            //alert(data);
        }).bind("delete_node.jstree",function(event,data){
            reMove(event,data);
            //alert(data);
        }).bind('move_node.jstree', function(event,data){
            //alert(JSON.stringify(data))
            if(data.node.id <=3){
                 freshTree();
                alert("该节点不允许移动")
            }else if(data.parent>3&&data.parent<1530843355688){
                 freshTree();
                 alert("不允许移动至当前节点下")
            }else if(data.node.id >=1530843355688&&data.parent>3){
                 freshTree();
                 alert("该节点不能移动至当前节点下");    
            }else if(data.parent=="#"){
                freshTree();
                alert("已经移出根节点范围了！！！");    
            }else{
                if(data.node.id >=1530843355688){
                    var parentId = data.node.parent;
                    var id = data.node.id;
                    var name = data.node.text;
                    var params = {"id":id,"name":name,"parentId":parentId};
                    //alert(parentId)
                   // alert(JSON.stringify(params) )
                    $.ajax({
                        'url':$("#hostUrl").val() + '/version/updateNode.do',
                        'type':'post',
                        'dataType':'json',
                        'async':false,
                        'data':params,
                        'cache':false,
                        'timeout':1000*10
                    }).fail(function(){
                       // Metronic.unblockUI();
                        alert("亲出错了，请稍后再试~");
                        freshTree();
                        return false;
                    }).done(function(json){
                        if(json.status=="success") {
                            //alert(json.info);
                        }
                    })
                }else{
                    var parentId = data.node.parent;
                    var id = data.node.id;
                    var name = data.node.text;
                    var params = {"id":id,"parentId":parentId};
                    //alert(parentId)
                   // alert(JSON.stringify(params) )
                    $.ajax({
                        'url':$("#hostUrl").val() + '/version/updateParentNodeId.do',
                        'type':'post',
                        'dataType':'json',
                        'async':false,
                        'data':params,
                        'cache':false,
                        'timeout':1000*10
                    }).fail(function(){
                       // Metronic.unblockUI();
                        alert("亲出错了，请稍后再试~");
                        freshTree();
                        return false;
                    }).done(function(json){
                        if(json.status=="success") {
                            //alert(json.info);
                        }
                    })
                }
                     
            }
            /*var inst = $.jstree.reference(data.reference),
            obj = inst.get_node(data.reference);
            if(obj.parent=="#"){
                inst.create_node(obj, {}, "last", function (my_node) {
                    //setTimeout(function () { inst.edit(my_node); },500);
                });
            }else{
                alert("该节点下不允许创建文件夹!!!");
            }*/
            //alert(JSON.stringify(event));
          //alert(data.old_parent);
          //return false;
            
       });
        $(document).bind("dnd_start.vakata", function(e, data) {
          // alert(data)
            var node = $('#tree_1').jstree("get_node", data.data.nodes[0]);
            //alert(mark)
           //alert(JSON.stringify(node));
        })
    }
    return {
        init: function (type) {
            $('#tree_1').data('jstree', false).empty();
            $.ajax({
                url: $("#hostUrl").val() + '/version/SelectVersionByUser.do',
                type: 'POST',
                async: false,
                success: function (treeData) {
                    handleSample(treeData);
                    if(type == 1){
                    
                            selectByPrimaryKey(treeData[1].id);
                        
                    }else if(type == 2){
                        selectByPrimaryKey($("#versionDataId").val());
                    }
                }
            });
        }
    };
}();

function createCategory(event,data){
    if(isNaN(data.node.id)){
          var parentId = data.node.parent;
            var newNodeName = data.node.text;
            var params = {"parentId":parentId,"name":newNodeName};
            $.ajax({
                'url':$("#hostUrl").val() + "/version/addNode.do",
                'type':"post",
                'dataType':'json',
                'async':false, 
                'cache':false,
                'data':params,
                'timeout':1000*10
            }).done(function(json){
                if(json.status=="success") {
                    var id = data.node.id;
                    var categoryId = json.info;
                    $("#"+id).attr("id",categoryId);//此处修改成后台返回的id
                    freshTree();
                   // $("#tree_1").jstree("rename_node",data.node);
                   /* setTimeout(function () { 
                        var inst = data.instance,
                         obj = data.node;
                        inst.edit(obj); },5000);*/
                    
                    //$jstree = $.jstree._focused();
                    //$('#tree_1').refresh("#" + parentId); 
                    //$('#tree_1').data('jstree', false).empty();
                    //UITree.init(1);
                   // $('#tree_1').jstree(true).refresh(); 
                    
                }else{
                     alert(json.info);
                     return false;
                }
               
            }).fail(function(e){
               // Metronic.unblockUI();
                alert("亲出错了，请稍后再试");
            })
    }
  
}

function rename(event,data) {
      var id = data.node.id;
      if(!isNaN(id)){
          var parentId = data.node.parent;
            var name = data.text;
            var params = {"id":id,"name":name,"parentId":parentId};
            //alert(parentId)
           // alert(JSON.stringify(params) )
            $.ajax({
                'url':$("#hostUrl").val() + '/version/updateNode.do',
                'type':'post',
                'dataType':'json',
                'async':false,
                'data':params,
                'cache':false,
                'timeout':1000*10
            }).fail(function(){
               // Metronic.unblockUI();
                alert("亲出错了，请稍后再试~");
                return false;
            }).done(function(json){
                if(json.status=="success") {
                    //alert(json.info);
                }
            })
      }else{
          createCategory(event,data);
      }
    
}

function reMove(event,data) {
     var parentId = data.node.parent;
        var id = data.node.id;
        var name = data.text;
    var str = data.node.id;
    if(parentId.match("#")) {
        alert("亲，不能删除根节点");
        return ;
    }
    //var id = str.substring(1);
    var params = {"id":id};
    $.ajax({
        'url':$("#hostUrl").val() + "/version/deleteNode.do",
        'type':"post",
        'dataType':"json",
        'async':false,
        'data':params,
        'cache':false,
        'timeout':1000*10
    }).done(function(json){
        if(json.ret==false) {
            alert(json.info);
        }
    }).fail(function(json){
       // Metronic.unblockUI();
        alert("亲出错了，请稍后再试~");
        return false;
    })

}
function freshTree(){
    $.ajax({
        url: $("#hostUrl").val() + '/version/SelectVersionByUser.do',
        type: 'POST',
        async: false,
        success: function (treeData) {
            var tree = $('#tree_1');
            tree.jstree(true).settings.core.data = treeData; // 新数据
            tree.jstree(true).refresh(); //刷新树
            //if(type == 1){
                    selectByPrimaryKey(treeData[1].id);
                
            //}else if(type == 2){
            //    selectByPrimaryKey($("#versionDataId").val());
            //}
        }
    });
    
}
//树搜索
function selectTreeProject(obj) {
    // 获取项目当前输入内容
    var searchTxt = obj.val().replace(/(^\s*)|(\s*$)/g, "");
    if (searchTxt != ""&&searchTxt.length>1) {
        $.ajax({
            url : hostUrl + '/defect/selectProject.do',
            type : 'post',
            async : false,
            // dataType: 'json',
            data : {
                "param" : searchTxt
            },
            success : function(data) {
                var jsonData = data.projectList;
                var htmlresp = '';
                for (var i = 0; i < jsonData.length; i++) {
                    if(jsonData[i]['productName']!=null){
                        htmlresp += '<li οnclick="selectedTreeRelatedProject($(this),\'' + jsonData[i]['id'] + '\')" style="cursor:pointer;">' + jsonData[i]['productName'] + '-' + jsonData[i]['versionnumber'] + '</li>';
                    }else{
                        htmlresp += '<li οnclick="selectedTreeRelatedProject($(this),\'' + jsonData[i]['id'] + '\')" style="cursor:pointer;">' + jsonData[i]['versionnumber'] + '</li>';
                    }
                    
                }
                obj.next().children("ul:last").html(htmlresp);
            }
        });
        obj.next().attr('style', 'display: block;margin-top: 34px;width:146.33px');
    } else {
        obj.next().attr('style', 'display: none;margin-top: 34px;width:146.33px');
        obj.attr('data-id', "");
    }
}
//选中后触发的事件,把内容写到是input中
function selectedTreeRelatedProject(obj, id) {
    var selectedTxt = obj.text();
    obj.parent().parent().prev().val(selectedTxt);
    obj.parent().parent().prev().attr('data-id', id);
    obj.parent().parent().attr('style', 'display: none;margin-top: 34px;width:146.33px');
    $.ajax({
        url : hostUrl + '/version/selectByPrimaryKey.do',
        type : 'post',
        // dataType: 'json',
        data : {
            "Id" : id
        },
        success : function(data) {
            var tree = $('#tree_1').jstree(true);;
                //tree.jstree(true).settings.core.data = treeData; // 新数据
                //tree.jstree(true).refresh(); //刷新树
            //alert($('#tree_1').jstree("get_node", data.id))
            if($('#tree_1').jstree("get_node", data.id)){
                //alert("sss")
                tree.deselect_all();
                tree.select_node(data.id);
            }else{
                //alert("www")
                 $("#tree_1").jstree("create_node", data.parentNodeId,  {id:data.id,a_attr:{style: "color:#C1C1C1"},icon:"glyphicon  glyphicon-tree-conifer myicon",parent:data.parentNodeId,text:data.versionnumber}, "last", false, true);
                 //createNode($('#tree_1').jstree("get_node", data.parentNodeId), data.id, data.versionnumber, "first"); 
                tree.deselect_all();
                tree.select_node(data.id);
            }    
        }
    });
}


 

这篇关于jsTree使用记录，节点操作及选中等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/443418。

相关文章

使用animation.css库快速实现CSS3旋转动画效果

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs
阅读更多...
使用雪花算法产生id导致前端精度缺失问题解决方案

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面：本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.
阅读更多...
Python文件操作与IO流的使用方式

Python文件操作与IO流的使用方式

《Python文件操作与IO流的使用方式》：本文主要介绍Python文件操作与IO流的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python文件操作基础1. 打开文件2. 关闭文件二、文件读写操作1.www.chinasem.cn 读取文件2. 写
阅读更多...
PyQt6中QMainWindow组件的使用详解

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW
阅读更多...
使用Python自动化生成PPT并结合LLM生成内容的代码解析

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤：代码片段：2. 应用 JSON 样式到
阅读更多...
java变量内存中存储的使用方式

java变量内存中存储的使用方式

《java变量内存中存储的使用方式》：本文主要介绍java变量内存中存储的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、变量的定义3、 变量的类型4、 变量的作用域5、 内存中的存储方式总结1、介绍在 Java 中，变量是用于存储程序中数据
阅读更多...
关于Mybatis和JDBC的使用及区别

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》：本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件
阅读更多...
macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后，新的macOSSequoia15.5现已公开发布，但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布！本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升，进一步增
阅读更多...
Java资源管理和引用体系的使用详解

Java资源管理和引用体系的使用详解

《Java资源管理和引用体系的使用详解》：本文主要介绍Java资源管理和引用体系的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Java的引用体系1、强引用 (Strong Reference)2、软引用 (Soft Reference)3、弱引用 (W
阅读更多...
ubuntu系统使用官方操作命令升级Dify指南

ubuntu系统使用官方操作命令升级Dify指南

《ubuntu系统使用官方操作命令升级Dify指南》Dify支持自动化执行、日志记录和结果管理，适用于数据处理、模型训练和部署等场景，今天我们就来看看ubuntu系统中使用官方操作命令升级Dify的方... Dify 是一个基于 docker 的工作流管理工具，旨在简化机器学习和数据科学领域的多步骤工作流。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2