1.首先准备jstree树的dom元素
<p id="flowList_ul" class="flowList_ul"></p>
2.初始化jstree使用
??$(‘#flowList_ul‘).data(‘jstree‘, false).empty();//清空
??function getFlowLists(){
??$("#flowList_ul").jstree({
??"core" : {
??????"animation" : 0,
??????"check_callback" : true,
??????"themes" : {
??????"theme" : "classic",
??????????????"dots" : true,
??????????????"icons" : true,
??????????????"stripes" : true
??????????????},
???????????????‘data‘ : function (obj, callback) {//jstree 数据全部请求出来 不是懒加载的方式
???????????????????var jsonstr="[]";
???????????????????var jsonarray = eval(‘(‘+jsonstr+‘)‘);
???????????????????$.ajax({
???????????????????????type: "GET",
???????????????????????url:root+"/flowchart/getAllCasFlowchart",
???????????????????????dataType:"json",
???????????????????????async: false,
???????????????????????data: {
???????????},
???????????????????????success:function(data) {
???????????????????????if(data.isSuccess == 1){
???????????????????????????????var arrays= data.rootArray;
???????????????????????????????for(var i=0 ; i<arrays.length; i++){
???????????????????????????????console.log(arrays[i]);
???????????????????????????????
???????????????????????????????????var arr = {
???????????????????????????????????????????"id":arrays[i].id,
???????????????????????????????????????????"parent":arrays[i].parent=="root"?"#":arrays[i].parent,
???????????????????????????????????????????"text":arrays[i].text,
???????????????????????????????????????????"type":arrays[i].type,
???????????????????????????????????????????"a_attr":arrays[i].a_attr 自定义属性放在这里
???????????????????????????????????}
???????????????????????????????????jsonarray.push(arr);
???????????????????????????????}
???????????????????????}else{
???????????????????????layer.msg(data.msg,{icon:5,time:1500});
???????????????????????}
???????????????????????}
???????????????????});
???????????????????callback.call(this, jsonarray);
???????????????}
????},
????"types" : { 根据types设置图标
???"default" : {
???"icon": "assets/tree/greyPoint.png"
????????????},
??????"rootAllFlow" : {
????????"max_children" : 1,
????????"max_depth" : 10000,
????????"icon": "assets/tree/home.png",
????????"valid_children" : [‘users‘,‘flows‘]
??????},
??????????"users": {
?????????????"icon": "assets/tree/users.png",
?????"valid_children" : ?[‘flows‘]
???},
??????????"flows": {
?????????????"icon": "assets/tree/greenPoint.png",
?????????"valid_children" : ?[]
??????},
????},
????????"checkbox" : { ?
????????????"keep_selected_style" : false, ?
????????????"real_checkboxes" : true ?
????????},
???????"contextmenu" : {
??????????‘items‘ : customMenu ????//每个节点都会调用这个函数 自定义右键菜单，不通节点反应不同的右键菜单
????????},
????"plugins" : [
???????????????"state" 会记住状态, "search", ?"types", "wholerow",/*"checkbox",*/"contextmenu"
????]
??});
??
??
?????function customMenu(node){
???var items = {
??????????‘remove‘ : {
??????????????‘label‘ : ‘删除模型‘,
???????????????????"icon": "assets/tree/action_delete.gif",
??????????????????????"action": function(data) { ???????????????????????
??????????????layer.open({
???????????????????content: ‘确定要删除此模型？删除后不可恢复。‘
???????????????????,btn: [‘是‘, ‘取消‘]
????????????????,resize:false
???????????????????,yes: function(index, layero){
?????????????????layer.close(index);
??????????????????????????var inst = jQuery.jstree.reference(data.reference), ?
??????????????????????????obj = inst.get_node(data.reference);
?????????????????var nodeId = obj.id;
?????????????????var contentId = obj.a_attr.contentId;
?????????????????var ref = $(‘#flowList_ul‘).jstree(true);//获得整个树
?????????????????????var flowIdArr = ref.get_selected(); //获得所有选中节点，返回值为数组
?????????????????????var isletter = /[a-z]/i;
?????????????????????if(isletter.test(flowIdArr)){//true,说明有英文字母。没有保存的流程
????????????????????????ref.delete_node(flowIdArr); 删除某一个节点，只是前台删除
????????????????????????delFlowPaprmeter();
????????????????????????return;
?????????????????????}
??????????????????if(!flowIdArr.length){
??????????????????????layer.msg("请先选择一个节点",{icon:1,time:1500});
??????????????????????return;
??????????????????}
?????????????????var ii;
?????????????????????$.ajax({
?????????????????async: true,
?????????????????type: ‘post‘,
?????????????????????url:root+"/flowchart/deleteProcess",
?????????????????dataType: ‘json‘,
???beforeSend:function(){
??ii = layer.load();
??},
?????????????????data: {
?????????????????????flowIdArr:flowIdArr
?????????????????},
?????????????????success: function(data) {
?????????????????????layer.close(ii);
?????????????????if(data.isSuccess == 1){
?????????????????$.each(flowIdArr,function(index,elem){
???????????????????ref.delete_node(elem);
???????????????????????delFlowPaprmeter();
???????????????????????$("#"+contentId).parent().remove();
???????????????????????del_bottomjournal(contentId);
???????????????????????
?????????????????});
???????????????????????????????????layer.msg("删除设备成功",{icon:1,time:1500});
??????????????}else{
??????????????layer.msg(data.names+data.msg,{icon:5,time:1500});
??????????????}
?????????????????
??????????????????????????????????????
?????????????????}
?????????????????});
???????????????????},btn2: function(index, layero){
?????????????????????//按钮【按钮二】的回调
??????????????????layer.close(index);
?????????????????????//return false 开启该代码可禁止点击该按钮关闭
???????????????????},cancel: function(){
????????????????????//右上角关闭回调
??????????????????layer.close(); ???
????????????????//return false 开启该代码可禁止点击该按钮关闭
????????????????????}
?????????????????????})
?????????????????}
??????????},
?????????"create": {
???????????????????"label": "新建模型",
???????????????????"icon": " assets/tree/edit.gif",
???????????????????"action":function (data) {
???????????????????
?????????????????????var inst = $.jstree.reference(data.reference),
???????????????obj = inst.get_node(data.reference);
???????????????????
???????????????????
???????????????????
?????????????????????//判断是否是第一次新建
?????????????????????if((newSign != 0||flowId != 0) && newFlowchart != 0){//不是第一次新建流程
???????????????????????var saveflowchartJson = checkFlowchart();
???????????????????????var saveglobalAttr = checkglobalAttr();
???????????????????????if(saveflowchartJson === flowchartJson && saveglobalAttr === globalAttr){//没有改动，直接新建
???????????????????????if(newChartSign == 0){
???????????????????????????????layer.open({
???????????????????????????content:‘是否要新建流程？‘
???????????????????????????,btn: [‘是‘, ‘否‘]
????????????????????????????????,resize:false
???????????????????????????,yes: function(index, layero){
?????????????????????????layer.close(index);
?????????????????????????newChar1(inst,obj); ?
???????????????????????????},btn2: function(index, layero){
?????????????????????????layer.close(index);
???????????????????????????}
???????????????????????????????})
?????????????????????????????}else{
?????????????????????????????newChar1(inst,obj); ?
?????????????????????????????}
???????????????????????
???????????????????????}else{//有改动，先询问是否保存
???????????????????????layer.open({
????????????????????????content: ‘是否保存当前流程？‘
????????????????????????,btn: [‘保存‘, ‘取消‘]
????????????????????????????,resize:false
????????????????????????,yes: function(index, layero){
??????????????????????layer.close(index);
?????????????????????????var timeselSign = $("#start1").attr("disabled");
???????????????????????flowchartJson = checkFlowchart();
???????????????????????console.log(flowchartJson);
???????????????????????getGlobalAttr();
???????????????????????isDebug = get_DebugCookie("isDebug");;
???????????????????????savechar();
???????????????????????newChar1(inst,obj); ?
?????????????????????????}
????????????????????????,btn2: function(index, layero){
??????????????????????????//按钮【按钮二】的回调
??????????????????????newChar1(inst,obj); ?
??????????????????????????//return false 开启该代码可禁止点击该按钮关闭
????????????????????????}
????????????????????????,cancel: function(){
??????????????????????????//右上角关闭回调
????????????????????????layer.close();
??????????????????????????//return false 开启该代码可禁止点击该按钮关闭
????????????????????????}
??????????????????????});
???????????????????????????}
???????????????????????
??????????????????????????}else{//第一次新建流程
??????????????????????????newChar1(inst,obj); ?
??????????????????????????}
???????????????????}
???????????????},
???????????????"refresh": {
???????????????????"label": "刷新列表",
???????????????????"icon": " assets/tree/arrow_refresh.png",
???????????????????"action":function (data) {
???????????????????//jQuery("#flowList_ul").jstree("refresh"); ?
???????????????????/*var nodeParentId = data.reference.prevObject[0].id;
???????????????????var inst = jQuery.jstree.reference(data.reference), ?
???????????????????????obj = inst.get_node(data.reference);
???????????????????inst.refresh_node("#"+obj.parent);*/
???????????????????//$(‘#flowList_ul‘).jstree(true).refresh_node("#" + nodeParentId);
???????????????????$(‘#flowList_ul‘).jstree("refresh");
???????????????????
???????????????????
?}
???????????????}
??????}
???
??????if ( node.type === ‘rootAllFlow‘) {
??????????delete items.remove; ?//删除右键菜单remove 隐藏不需要的菜单
??????????delete items.create;
??????} else if (node.type === ‘users‘){
??????????delete items.remove; ?//删除右键菜单remove
??????} else if (node.type === ‘flows‘) {
??????????delete items.create;
??????}else{
??????????delete items.remove; ?//删除右键菜单remove
???????delete items.create;
??????}
???
??????return items;
?????}
??
??????$(‘#flowList_ul‘).on("rename_node.jstree",function(e,d){
???????????var oldName = d.old;
???????????var newName = d.text;
???????????var flowNodeId = d.node.id;
???????????var parentnodeId = d.node.parent;
???????????var ref = $(‘#flowList_ul‘).jstree(true);//获得整个树
???????????var flowName = newName.replace(/\s/g,‘‘);
?var pattern = new RegExp("[`~!@#$^&%^*()=|{}‘:;‘,\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“‘。，、？]");
if (flowName != null && flowName !="" && !pattern.test(flowName)){
?proName(flowName,ref,flowNodeId);
}else if(flowName ==""){
?ref.delete_node(flowNodeId);
?layer.msg(‘请输入流程名称‘,{icon: 5,time:1500});
???}else if(pattern.test(flowName)){
?????ref.delete_node(flowNodeId);
?layer.msg(‘流程名中不能存在特殊符号‘,{icon: 5,time:1500});
???}
??????????
??????});
?
??????
??????//双击打开流程
??????$(‘#flowList_ul‘).on("dblclick.jstree", ".jstree-anchor",function(e){
??????var flowId = e.target.id;
??????var flowName = e.target.text;
??????var flowType = e.target.type;
??????if(flowType == "flows"){
??????loadFlowchart(flowId);
??????addTab($(this));
??????}else{
??????layer.msg("对不起,此项不能打开",{icon:5,time:1500});
??????}
??????
??????});
??????
?????function newChar1(inst,obj){
???inst.create_node(obj, {}, "first", function (new_node) {
try {
//设置create 节点的默认属性
new_node.text = "newModel";
new_node.type = "flows";
//new_node.attr =
inst.edit(new_node);//创建节点
} catch (ex) {
setTimeout(function () { inst.edit(new_node); },0);
}
??});
?????}
?????
?????
????// ??}
????//输入框输入定时自动搜索
??????var to = false;
??????$(‘#flowlists_search‘).keyup(function () {
??????????if(to) {
clearTimeout(to);
??????????}
???????
??????????to = setTimeout(function () {
??????????????$(‘#flowList_ul‘).jstree(true).search($(‘#flowlists_search‘).val()); 模糊搜索
???????
??????????}, 250);
??????});
?????};
jstree使用新的
原文地址：https://www.cnblogs.com/joer717/p/9648061.html