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);
});
};