如图,ztree的树形图,这个插件是国产的,功能也很强大,很多人在使用,样式也有很多选择,推荐大家使用,这边介绍一下我的使用心得,主要之前就介绍过一次,然后不全面,有bug,这次借鉴了大神的经验,特此发出来分享,不多说上干货:
附上ztree的地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
jsp:
js:
var zTreeObj;
var setting = {
//checkable : true,
view : {
enable : true,
showLine : true,
showIcon : showIconForTreeRight,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
// fontCss: getFontCss //个性化样式
},
/**
check : {
enable : true,
//chkStyle : "checkbox",
//chkboxType:{"Y":"s","N":"s"}
},*/
data : {
simpleData : {
enable : true
}
/**,
key: {
children: "nodes"
}*/
},
callback : {
onClick : zTreeOnClickRight,
beforeRemove: beforeRemove,
onRename: zTreeOnRename,
onRemove: zTreeOnRemove,
},
edit:{
enable: true,
showRemoveBtn :true,
showRenameBtn :true,
removeTitle :"删除",
renameTitle :"修改"
}
};
function showIconForTreeRight(treeId, treeNode) {
return !treeNode.isParent;
};
// 树的单击事件
function zTreeOnClickRight(event, treeId, treeNode) {
var treeid = zTreeObj.getSelectedNodes()[0].id;
var treepid = zTreeObj.getSelectedNodes()[0].pId;
var treename = zTreeObj.getSelectedNodes()[0].name;
$("#grid-table").jqGrid('setGridParam',{
datatype:'json',
postData:{'workOrderTDTO1.classification':treename}
}).trigger("reloadGrid");
}
function zTreeOnRename(event, treeId, treeNode, isCancel) {
$.post('updateNode.action', {
'classification.id': $.trim(treeNode.id),
'classification.perId': $.trim(treeNode.pId),
'classification.classification': treeNode.name
}, function(data, textStatus, xhr) {
/*optional stuff to do after success */
if (textStatus == "success") {
toastr.success("修改成功");
} else {
toastr.error("修改失败");
}
});
}
function zTreeOnRemove(event, treeId, treeNode) {
$.post('deleteNode.action', {
'classification.id': treeNode.id,
}, function(data, textStatus, xhr) {
// optional stuff to do after success
if (textStatus == "success") {
toastr.success("删除成功");
} else {
toastr.error("删除失败");
}
});
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
var addBtn = $("#addBtn_" + treeNode.tId)
if (treeNode.editNameFlag || addBtn.length > 0) return;
var addStr = "";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function() {
// var zTree = $.fn.zTree.getZTreeObj("ztree1");
var name = "新增节点" + (newCount++);
$.post('addClassification.action', {
'classification.perId': treeNode.id,
'classification.classification': name
}, function(data, textStatus, xhr) {
/*optional stuff to do after success */
if (textStatus == "success") {
var newID = data;
zTreeObj.addNodes(treeNode, {
id: newID,
pId: treeNode.id,
name: name
});
var node = zTreeObj.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
zTreeObj.selectNode(node); //让新添加的节点处于选中状态+
} else {
toastr.error("加载错误");
}
});
return false;
});
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
}
function beforeRemove(treeId, treeNode) {
if(treeNode.isParent){
toastr.warning("请先删除子节点");
return false;
}
return confirm("确认删除 节点 -- " + treeNode.name + " 吗?");
}
/**
//选中checkbox节点事件 这边只能选择一个,checkbox隐藏
function zTreeOnCheck(event, treeId, treeNode) {
//$("#parentName").val("");
nodes = zTree.getCheckedNodes(true);
for ( var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
alert(nodes[i].pId);
alert(v);
}
//hideMenu(); $("#parentName").html(nodes[j].name);
}*/
/**
* 显示ztree
*/
function treeShow(data) {
zTreeObj = $.fn.zTree.init($("#ztree1"), setting, data);
zTreeObj.expandAll(true);
}
/**
* 加载ztree
*/
$(function(){
var basePath=$("#basePath").val();
$.ajax({
async : true, //是否异步
cache : false, //是否使用缓存
type : 'get', //请求方式,post
dataType : "json", //数据传输格式
url : ""+basePath+"findZtree.action", //请求链接
success : function(data) {
treeShow(data);
},error : function(XMLHttpRequest,data) {
toastr.error("加载错误");
}
});
});
$("#addcla").click(function(){
var name = "新增根节点" + (newCount++);
$.post('addClassification.action', {
'classification.classification': name
}, function(data, textStatus, xhr) {
/*optional stuff to do after success */
if (textStatus == "success") {
var newID = data;
zTreeObj.addNodes(null, {
id: newID,
name: name
});
var node = zTreeObj.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
zTreeObj.selectNode(node); //让新添加的节点处于选中状态+
} else {
toastr.error("加载错误");
}
});
})
借鉴博客: http://blog.csdn.net/wangjingna/article/details/50487111