ztree配置:
js 主要拖拽部分在标红处:
var fromChangeStatus=false;//form表单是否修改过
//ztree设置
var setting={
view : {
dblClickExpand : false, //设置双击展开
expandSpeed: "",//zTree 节点展开、折叠时的动画速度:("slow", "normal", or "fast",""为不显示)
fontCss : {color:"black"},//个性化文字样式
selectedMulti: false,//设置是否允许同时选中多个节点
showIcon: true,//设置 zTree 是否显示节点的图标
showLine: true,//设置 zTree 是否显示节点之间的连线
showTitle: false,//设置 zTree 是否显示节点的 title 提示信息
txtSelectedEnable: true,//设置 zTree 是否允许可以选择 zTree DOM 内的文本
addHoverDom: addHoverDom,//用于在节点上固定显示用户自定义控件
removeHoverDom: removeHoverDom//用于在节点上固定隐藏用户自定义控件
},
data : {
simpleData : {
enable : true,//将list强行转换为复杂的 json嵌套格式,也就是父子节点关系
idKey : "id",
pIdKey : "pId"
},
key: {
name: "name"
}
},
check:{
enable: false,//设置 zTree 的节点上是否显示 checkbox或者 radio
chkStyle: "checkbox",//勾选框类型(checkbox 或 radio）
autoCheckTrigger: false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数
chkboxType: { "Y": "", "N": "ps" }//勾选 checkbox 对于父子节点的关联关系,Y 属性定义 checkbox 被勾选后的情况；N 属性定义 checkbox 取消勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。
},
callback:{
beforeClick:zTreeBeforeClick,//点击节点
beforeRename: beforeRename,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
onRemove: onRemove,
beforeDrag:zTreeBeforeDrag,//拖拽验证
beforeDrop:zTreeBeforeDrop,//拖拽
//onDrop:zTreeOnDrop//拖拽结束后的操作
// beforeExpand: beforeExpand
},
edit:{
enable:true,//是否允许拖拽,修改
editNameSelectAll:false,//input 初次显示时,设置 txt 内容是否为全选状态
removeTitle:"删除节点",//设置鼠标移动到 删除按钮 上时，浏览器自动弹出的辅助信息内容
renameTitle:"重新命名",//设置鼠标移动到 编辑名称按钮 上时，浏览器自动弹出的辅助信息内容
showRemoveBtn:true,//设置是否显示删除按钮
showRenameBtn:true,//设置是否显示重新命名按钮
drag:{
isCopy:false,
isMove:true,
prev:canPrev,
next:true,
inner:true
}
}
}
$(function(){
loadTree();
$("#attrForm").change(function() {
$("#attrForm").data("changed",true);
fromChangeStatus=true;
});
//回车事件
$('#searchValue').keydown(function(e) {
if (e.keyCode == 13) {
search();
}
});
initValidation();
});
//初始化加载zTree
function loadTree() {
$().hisAjax(basePath + "/systemTreeClass/specialAjax/loadAllTreeNode.action?stringMap.treeTypeCode="+$('#treeTypeCode').val(), {
}, {},
function (data) {
zTreeNodes=data.nodes;
for(var i = 0;i < zTreeNodes.length;i ++){
if(!zTreeNodes[i].pId){
zTreeNodes[i].drag=false;//顶级节点禁止拖拽
}
}
});
$.fn.zTree.init($("#treeDemo"), setting,zTreeNodes);
}
//查询
function search(){
var searchVal = $('#searchValue').val();
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodeObj = treeObj.getNodeByParam("name", searchVal, null);
if(nodeObj){
//关闭所有节点
treeObj.expandAll(false);
//选中节点
treeObj.selectNode(nodeObj);
zTreeBeforeClick(nodeObj.id,nodeObj,1);
}else{
return alert('没找到数据！');
}
}
function addHoverDom(treeId, treeNode) {
var newCount = 1;
if(treeNode.children){
newCount = treeNode.children.length+1;
}
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='新增节点' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodeParm={"stringMap.parentNodeId":treeNode.id,"stringMap.newCount":newCount,"stringMap.id":treeNode.id};
//添加节点
$().hisAjax(basePath + "/systemTreeClass/specialAjax/addTreeNode.action", nodeParm, {},function (data) {
if(data.id!=null&&data.id!=''){
zTree.addNodes(treeNode, {id:data.id, pId:treeNode.id, name:"新增节点" + (newCount++)});
}
});
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
//单击节点之前的事件回调函数,用于查询右侧各项属性
function zTreeBeforeClick(treeId, treeNode, clickFlag){
$().hisAjax(basePath + "/systemTreeClass/specialAjax/queryAttrById.action", {"stringMap.id":treeNode.id}, {},function (data) {
if(data.DictTreeClassSystemVo){
var vo = data.DictTreeClassSystemVo;
$('input:[name="dictTreeClassSystemVo.id"]').val(vo.id);
$('input:[name="dictTreeClassSystemVo.parentNodeId"]').val(vo.parentNodeId);
$('input:[name="dictTreeClassSystemVo.nodeCode"]').val(vo.nodeCode);
$('input:[name="dictTreeClassSystemVo.nodeName"]').val(vo.nodeName);
$('input:[name="dictTreeClassSystemVo.pinyin"]').val(vo.pinyin);
$('input:[name="dictTreeClassSystemVo.queryCode"]').val(vo.queryCode);
$('input:[name="dictTreeClassSystemVo.treeTypeCode"]').val(vo.treeTypeCode);
$('input:[name="dictTreeClassSystemVo.treeTypeName"]').val(vo.treeTypeName);
$('input:[name="dictTreeClassSystemVo.nodeAttr1"]').val(vo.nodeAttr1);
$('input:[name="dictTreeClassSystemVo.nodeAttr2"]').val(vo.nodeAttr2);
$('input:[name="dictTreeClassSystemVo.nodeAttr3"]').val(vo.nodeAttr3);
$('input:[name="dictTreeClassSystemVo.nodeAttr4"]').val(vo.nodeAttr4);
$('input:[name="dictTreeClassSystemVo.nodeAttr5"]').val(vo.nodeAttr5);
$('input:[name="dictTreeClassSystemVo.nodeAttr6"]').val(vo.nodeAttr6);
$('input:[name="dictTreeClassSystemVo.nodeAttr7"]').val(vo.nodeAttr7);
$('input:[name="dictTreeClassSystemVo.nodeAttr8"]').val(vo.nodeAttr8);
}else{
$(':input','#attrForm').val('');
}
$("#attrForm")._reset();//清空验证提示
});
}
function beforeEditName(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.selectNode(treeNode);
setTimeout(function() {
if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
setTimeout(function() {
zTree.editName(treeNode);
}, 0);
}
}, 0);
return false;
}
function beforeRename(treeId, treeNode, newName, isCancel){
if (newName.length == 0) {
setTimeout(function() {
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}else if(newName==treeNode.name){
return true;
}else{
$().hisAjax(basePath + "/systemTreeClass/specialAjax/updateNodeNameOnTree.action",{"stringMap.id":treeNode.id,"stringMap.newName":newName}, {},function (data) {
alert('修改成功');
//修改后回显修改数据
$().hisAjax(basePath + "/systemTreeClass/specialAjax/queryAttrById.action", {"stringMap.id":treeNode.id}, {},function (data) {
if(data.DictTreeClassSystemVo){
var vo = data.DictTreeClassSystemVo;
$('input:[name="dictTreeClassSystemVo.id"]').val(vo.id);
$('input:[name="dictTreeClassSystemVo.parentNodeId"]').val(vo.parentNodeId);
$('input:[name="dictTreeClassSystemVo.nodeCode"]').val(vo.nodeCode);
$('input:[name="dictTreeClassSystemVo.nodeName"]').val(vo.nodeName);
$('input:[name="dictTreeClassSystemVo.pinyin"]').val(vo.pinyin);
$('input:[name="dictTreeClassSystemVo.queryCode"]').val(vo.queryCode);
$('input:[name="dictTreeClassSystemVo.treeTypeCode"]').val(vo.treeTypeCode);
$('input:[name="dictTreeClassSystemVo.treeTypeName"]').val(vo.treeTypeName);
$('input:[name="dictTreeClassSystemVo.nodeAttr1"]').val(vo.nodeAttr1);
$('input:[name="dictTreeClassSystemVo.nodeAttr2"]').val(vo.nodeAttr2);
$('input:[name="dictTreeClassSystemVo.nodeAttr3"]').val(vo.nodeAttr3);
$('input:[name="dictTreeClassSystemVo.nodeAttr4"]').val(vo.nodeAttr4);
$('input:[name="dictTreeClassSystemVo.nodeAttr5"]').val(vo.nodeAttr5);
$('input:[name="dictTreeClassSystemVo.nodeAttr6"]').val(vo.nodeAttr6);
$('input:[name="dictTreeClassSystemVo.nodeAttr7"]').val(vo.nodeAttr7);
$('input:[name="dictTreeClassSystemVo.nodeAttr8"]').val(vo.nodeAttr8);
}
});
});
return true;
}
}
//是否删除
function beforeRemove(treeId, treeNode) {
if(!treeNode.pId){
alert('根节点不允许删除!');
return false;
}
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.selectNode(treeNode);
if(treeNode.isParent){
return confirm("确认删除 此节点 -- " + treeNode.name + " 以及该节点下的所有节点吗？");
}
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
//删除
function onRemove(event, treeId, treeNode) {
$().hisAjax(basePath + "/systemTreeClass/specialAjax/delNodeById.action",{"stringMap.id":treeNode.id}, {},function (data) {
alert('删除成功');
$(':input','#attrForm').val('');
});
}
//拖拽之前的事件回调函数,判断是否允许拖拽
function zTreeBeforeDrag(treeId, treeNodes){
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
//于捕获节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作
function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType, isCopy){
console.log(moveType);
if(moveType=='inner' && confirm('确定要将[ '+treeNodes[0].name+' ]移动到[ '+targetNode.name+' ]下?')){
$().hisAjax(basePath + "/systemTreeClass/specialAjax/moveTreeNode.action",{"stringMap.id":treeNodes[0].id,"stringMap.parentNodeId":targetNode.id,"stringMap.moveType":"inner"}, {},function (data) {
alert('移动成功');
});
return true;
}else if(moveType=='prev' && confirm('确定要将[ '+treeNodes[0].name+' ]移动到[ '+targetNode.name+' ]的前面?')){
//禁止拖拽到根节点前面
if(!targetNode.pId){
alert('禁止拖拽到根节点前面!');
return false;
}
$().hisAjax(basePath + "/systemTreeClass/specialAjax/moveTreeNode.action",{"stringMap.id":treeNodes[0].id,"stringMap.brotherId":targetNode.id,"stringMap.moveType":"prev"}, {},function (data) {
alert('移动成功');
});
return true;
}else if(moveType=='next' && confirm('确定要将[ '+treeNodes[0].name+' ]移动到[ '+targetNode.name+' ]的后面?')){
$().hisAjax(basePath + "/systemTreeClass/specialAjax/moveTreeNode.action",{"stringMap.id":treeNodes[0].id,"stringMap.brotherId":targetNode.id,"stringMap.moveType":"next"}, {},function (data) {
alert('移动成功');
});
return true;
}else{
return false;
}
}
//保存属性信息
function saveAttr(){
if(!$('#attrForm')._do()){
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node = zTree.getSelectedNodes();
if(node==""||node==null){
alert("请选中一个节点,然后再保存!");
return;
}
if(fromChangeStatus){
$().hisAjax(basePath + "/systemTreeClass/specialAjax/saveAttr.action", $("#attrForm").serialize(), {},function (data) {
alert('保存成功');
node[0].name=$('input:[name="dictTreeClassSystemVo.nodeName"]').val();
zTree.updateNode(node[0]);
fromChangeStatus=false;
});
}else{
alert('保存成功');
}
}
//验证
function initValidation() {
//初始化验证
$("#attrForm")._init({
"dictTreeClassSystemVo.nodeName":{
required:true,
attrVal: "name",
maxLength:20,
position: "top",
},
"dictTreeClassSystemVo.nodeCode":{
required:true,
attrVal: "name",
maxLength:20,
position: "top",
isFocus:true
}
});
}
//拖拽排序
function canPrev(treeId, nodes, targetNode) {
//禁止拖拽到顶级节点前面的操作
/* if(!targetNode.pId){
alert('禁止拖拽到根节点前面!');
return false;
}*/
return true;
}
//禁止拖拽到根节点后面的操作
function canNext(treeId, nodes, targetNode) {
/*if(targetNode.isParent){
alert('禁止拖拽到父节点后面!');
return false;
}*/
return true;
}
/*function canInner(treeId, nodes, targetNode) {
return !(targetNode && targetNode.level === 0);
}*/var fromChangeStat
