开发功能数据源管理之设置数据源弹出框,包含数据源新增同级、新增下级、修改、删除、上移下移。
类似于左侧树,右侧有以上按钮。
查询出数据源表中的数据,构造树数据。
for(var i=0;i<result.data.length;i++){
var obj = result.data[i];
var data = {
id:obj.id,
text:obj.name,
state:{'opened':true},
icon:false
};
if (obj.pid) {
data.parent = obj.pid;
} else {
data.parent = '#';
}
dataList.push(data);
}
先初始化jstree 树
var jstreeOpt = {
core:{
multiple:false,
animation:1,
force_text:true,
check_callback:true,
strings:{'New node':'xx分类'},
data:dataList,
themes:{ stripes:false,responsive:false,icons:false }
},
checkbox:{"undetermined":false,"three_state":false},
plugins: ["types", "search", "create_node", "unique"]//"sort",
};
//业务系统树选择事件
$('#dataSourceTree').on("changed.jstree", function (e, data) {
if(data.selected.length) {
var ref = $('#dataSourceTree').jstree(true);
_thisPage.selectNode = ref.get_selected(true);
_thisPage.parentNode = ref.get_node(ref.get_selected()[0]).original.parent;
var bizSystem = data.instance.get_node(data.selected[0]).text;//业务系统
selectOrgId = data.instance.get_node(data.selected[0]).id;
});
$('#dataSourceTree').on("loaded.jstree",function(e,data) {
//默认选中第一个子节点
var inst = data.instance;
if (e.target.firstChild.firstChild!=null) {
var rootNode = inst.get_node(e.target.firstChild.firstChild.lastChild.firstChild);
inst.select_node(rootNode);
}
});
$("#dataSourceTree").on("select_node.jstree",function(event, data){
initBtnTips();
});
$("#dataSourceTree").jstree(jstreeOpt);
/**
* 上移.
*/
$("#removeUpBtn").unbind("click").bind("click",function(){
var _this = this;
var ref = $('#dataSourceTree').jstree(true),
sel = ref.get_selected(true);
if(!sel.length) { return false; }
treeMoveData("prev");
});
$("#removeDownBtn").unbind("click").bind("click",function(){
var _this = this;
var ref = $('#dataSourceTree').jstree(true),
sel = ref.get_selected(true);
if(!sel.length) { return false; }
treeMoveData("next");
});
}
//上移、下移
function treeMoveData(moveType){
var ref = $('#dataSourceTree').jstree(true);
var currNode = ref.get_selected(true)[0];
var parentNode = ref.get_node(currNode.parent);
var nodes = [];
if (parentNode) {
var id = currNode.id;
var ids = $.extend(true, [], parentNode.children);
var index = $.inArray(id, ids);
var idx = index;
var ordernum = currNode.original.ordernum;
if ('next' == moveType) {
//下移上面一定有节点
if (index < 0 || index > ids.length - 2){
return;
}
var nextNode = ref.get_node(ids[index + 1]);
//var nextNode = ref.get_next_dom(currNode,true);
ref.move_node(currNode.id,currNode.parent,index+2,false,false,false);
currNode.original.ordernum = nextNode.original.ordernum;
nextNode.original.ordernum = ordernum;
if(currNode.original.saveState != 0){
currNode.original.saveState = 1;
}
if(nextNode.original.saveState != 0){
nextNode.original.saveState = 1;
}
saveNodeDatas[currNode.original.id] = currNode.original;
saveNodeDatas[nextNode.original.id] = nextNode.original;
idx++;
} else if ('prev' == moveType && parentNode) {
//上移上面一定有节点
if (index < 1){
return;
}
var prevNode = ref.get_node(ids[index - 1]);
//var prevNode = ref.get_prev_dom(currNode,true);
ref.move_node(currNode.id,currNode.parent,index-1,false,false,false);
currNode.original.ordernum = prevNode.original.ordernum;
prevNode.original.ordernum = ordernum;
if(currNode.original.saveState != 0){
currNode.original.saveState = 1;
}
if(prevNode.original.saveState != 0){
prevNode.original.saveState = 1;
}
saveNodeDatas[currNode.original.id] = currNode.original;
saveNodeDatas[prevNode.original.id] = prevNode.original;
idx--;
}
if(ids.length <2){
$("#removeUpBtn").attr("disabled", true);
$("#removeDownBtn").attr("disabled", true);
}else if(idx == 0){
//是否移动到最前面
$("#removeUpBtn").attr("disabled", true);
$("#removeDownBtn").attr("disabled", false);
}else if(idx == ids.length-1){
//是否移动到最后
$("#removeUpBtn").attr("disabled", false);
$("#removeDownBtn").attr("disabled", true);
}else{
$("#removeUpBtn").attr("disabled", false);
$("#removeDownBtn").attr("disabled", false);
}
}
}
将新增、修改、删除的数据存入saveNodeDatas里,然后通过后台进行处理。