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使用新的的更多相关文章

  1. JsTree实现简单的CRUD

    现在需要将省市县区域这块搞成树状图的形状,由于项目使用的AngularJS+ABP+WebAPI各个模块之间数据传输形式是json格式,那么对于JsTree来说就方便很多了,只需要将json数据搞成我 ...

  2. jstree使用小结(二)

    继续上一篇: 1.数据 按照官网的json数据返回格式: 有两种格式,我使用的格式如下: $('#jstree1').jstree({ 'core' : { 'data' : [ { "id ...

  3. jstree API

    https://www.jstree.com/ drag & drop support(拖放)  keyboard navigation(键盘导航)  inline edit, create ...

  4. jstree中文github文档

    jstree Bala...bala...这段就不翻译了. jstree就是个基于JQUERY的树形控件. 1 2 jsTree is jquery plugin, that provides int ...

  5. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  6. UWP中新加的数据绑定方式x:Bind分析总结

    UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...

  7. “四核”驱动的“三维”导航 -- 淘宝新UI(需求分析篇)

    前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...

  8. 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程

    读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...

  9. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

随机推荐

  1. 主元素问题 Majority Element

    2018-09-23 13:25:40 主元素问题是一个非常经典的问题,一般来说,主元素问题指的是数组中元素个数大于一半的数字,显然这个问题可以通过遍历计数解决,时间复杂度为O(n),空间复杂度为O( ...

  2. 记录python接口自动化测试--简单总结一下学习过程(第十目)

    至此,从excel文件中循环读取接口到把测试结果写进excel,一个简易的接口自动化测试框架就完成了.大概花了1周的时间,利用下班和周末的时间来理顺思路.编写调试代码,当然现在也还有很多不足,例如没有 ...

  3. centos 安装 和 linux 简单命令

    1. centos 安装 参照:https://www.cnblogs.com/tiger666/articles/10259102.html 安装过程注意点: 1. 安装过程中的选择安装Basic ...

  4. Python基础之文件的初识函数

    初识函数函数定义:定义一个事情或者功能. 等到需要的时候直接去用就好了了. 那么这里定义的东西就是一个函数即函数: 对代码块和功能的封装和定义1.1常用形式: def 函数名(): 函数体1.2 函数 ...

  5. Huffman Coding

    哈夫曼树 霍夫曼编码是一种无前缀编码.解码时不会混淆.其主要应用在数据压缩,加密解密等场合. 1. 由给定结点构造哈夫曼树 (1)先从小到大排序(nlogn) (2)先用最小的两个点构造一个节点,父节 ...

  6. CF-517C-思维/math

    http://codeforces.com/contest/1072/problem/C 题目大意是给出两个数a,b ,找出若干个数p,使得 SUM{p}<=a ,找出若干个数q使得SUM{q} ...

  7. CRM 价格批导2<上一个太多冗余>

    INCLUDE:LCRM_MKTPL_COND_IFF39 *--------------------------------------------------------------------- ...

  8. 784. Letter Case Permutation C++字母大小写全排列

    网址:https://leetcode.com/problems/letter-case-permutation/ basic backtracking class Solution { public ...

  9. visual studio利用 indent guides 格式化代码 添加竖线

    点击 Visual Studio 2013 工具—扩展和更新—联机 然后输入indent guides 自动搜索出来这个插件(如图).注:Visual Studio 2010需要自己在网上下载安装. ...

  10. [CodeForces - 197F] F - Opening Portals

    F - Opening Portals Pavel plays a famous computer game. A player is responsible for a whole country ...