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. MySQL命令行的备份与还原

    备份的语法;  mysqldump -uroot -p shop> 数据库路径 还原的语法:  mysql -uroot -p 具体数据库(shop0609)< 数据库路径

  2. Getting started with Processing 第十一章——数组

    Getting started with Processing 第十一章——数组 从变量到数组: 使用数组,无需为每一个变量创建一个新的名称/这让代码变得更短,更容易理解,更方便更新. 创建数组的三个 ...

  3. Spring Batch 使用场景

    一个标准的批处理程序通常会从数据库,文件或者队列中读取大量的数据和记录,然后对获取的数据进行处理,然后将修改后的格式写回到数据库中. 通常 Spring Batch 在离线模式下进行工作,不需要用户干 ...

  4. 使用scp上传和下载文件

    利用scp传输文件 1.从服务器下载文件 scp username@servername:/path/filename /tmp/local_destination 例如scp codinglog@1 ...

  5. Hadoop 2.7.3 完全分布式维护-动态增加datanode篇

    原有环境 http://www.cnblogs.com/ilifeilong/p/7406944.html  IP       host JDK linux hadop role 172.16.101 ...

  6. python安装MySQLdb(即mysql-Python)模块的一些问题

    1.超时问题 如果出现:ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out ...

  7. <Closing connections idle longer than 60000 MILLISECONDS> <Closing expired connections>

    日志信息如下: 2017-07-05 18:28:34 -18705 [idle_connection_reaper] DEBUG   - Closing expired connections 20 ...

  8. dubbo 负载均衡

    在系统中可以启动多个 provider 实例,consumer 发起远程调用时,根据指定的负载均衡算法选择一个 provider. 在本机配置多个 provider,使用不同的端口: <dubb ...

  9. js 时间戳转特定格式的日期

    var Tools = {}; Tools.formatDate = function (fmt,timestamp) { if(timestamp){ var date = new Date(par ...

  10. ssh和ssl的联系和区别

    ssh:Secure Shell,安全Shell,是一个软件,处于应用层旨在取代明文通信的telnet:对应的开源实现程序是openssh. ssl:Secure Sockets Layer,安全套接 ...