在bootstrap中使用ztree插件做树形架构,由于觉得原始的树形不够美观,所以改了其中的css插件
demo演示,以及各种属性的用法网站: http://www.treejs.cn/v3/demo.php#_107
修改页面风格网站: http://www.lai18.com/content/2450914.html?from=cancel
增删改查以及拖拽功能网站: http://www.cnblogs.com/lori/archive/2013/07/04/3171655.html
参考以上网站,可根据的自己的需要进行修改
下面贴出我在做项目时的代码(前端用的是bootstrap框架,对默认的css进行了修改)
1)先引入文件(一个css,一个js文件)
<link rel="stylesheet" href="${contextPath}/static/assets/css/zTreeStyle/metro.css"/>
"${contextPath}/static/assets/js/ztree-3.5/jquery.ztree.all-3.5.js" 2)页面
//注意这个地方的引入,否则页面不会显示任何东西
<div id="organizationTree" class="ztree" style="width:560px; overflow:auto;"></div> 3) js代码
var zTree; var setting = { check: { enable: true }, async: { enable: true, //开启异步加载处理 contentType: "application/json;charset=utf-8", // dataFilter: filter,//用于对 Ajax 返回数据进行预处理的函数 dataType: "json", url: "${contextPath}/organization/getOrganizations/list", //加载后台数据 //autoParam: ["id", "name"], type: "post", //autoParam:[] otherParam: [] // dataFilter: filter //用于对 Ajax 返回数据进行预处理的函数 }, view: { expandSpeed: "",//zTree 节点展开、折叠时的动画速度,设置方法同 JQuery 动画效果中 speed 参数。 addHoverDom: addHoverDom, //用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 removeHoverDom: removeHoverDom, //设置鼠标移到节点上,在后面显示一个按钮 selectedMulti: false, // 禁止多点同时选中的功能 fontCss: setFontCss_ztree //样式设置 }, edit: { enable: true, //设置 zTree 进入编辑状态 editNameSelectAll: true, removeTitle: '删除', renameTitle: '编辑', showRemoveBtn: true, showRenameBtn: true, }, data: { keep: { parent: true, leaf: false }, simpleData: { enable: true } }, callback: { beforeRemove: beforeRemove, //点击删除时触发,用来提示用户是否确定删除 beforeEditName: beforeEditName, //点击编辑时触发,用来判断该节点是否能编辑 // beforeRename:beforeRename,//编辑结束时触发,用来验证输入的数据是否符合要求 // onRemove:onRemove,//删除节点后触发,用户后台操作 // onRename:onRename,//编辑后触发,用于操作后台 // beforeDrag:beforeDrag,//用户禁止拖动节点 // onClick:clickNode//点击节点触发的事件 // onNodeCreated: zTreeOnNodeCreated onAsyncSuccess: zTreeOnAsyncSuccess, //默认展开所有节点 /*拖动回调*/ beforeDrag: beforeDrag, // beforeDrop: beforeDrop, // beforeDragOpen: beforeDragOpen, // onDrag: onDrag, onDrop: onDrop } };
//设置鼠标移到节点上,在后面显示一个按钮 function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.tId).unbind().remove(); } //加载树结构 function loadTreeData() { zTree = $.fn.zTree.init($("#organizationTree"), setting); } function reloadTree() { loadTreeData(); } function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) { zTree.expandAll(true); }
//实现拖拽 var log, className = "dark"; var treeID = "treeDemo"; var curDragNodes, autoExpandNode; var newCount = 1; function beforeDrag(treeId, treeNodes) { className = (className === "dark" ? "" : "dark"); for (var i = 0, l = treeNodes.length; i < l; i++) { if (treeNodes[i].drag === false) { curDragNodes = null; return false; } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) { curDragNodes = null; return false; } } curDragNodes = treeNodes; return true; }
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) { if (moveType == "inner") { $.ajax({ contentType: "application/json", url: "${contextPath}/organization/operateOrg", //传送请求数据 data: JSON.stringify({ oper: "changeParent", primaryKey: targetNode.id, primaryKeys: [treeNodes[0].id] }), // data: { id: treeNodes[0].id, pid: targetNode.id, name: treeNodes[0].name, moveType: moveType, isCopy: isCopy }, dataType: "json", method: 'post', success: function (data) { alert('拖拽成功!'); } }); } else { $.ajax({ contentType: "application/json", url: "${contextPath}/organization/operateOrg", //传送请求数据 data: JSON.stringify({ oper: "setSameParent", primaryKey: targetNode.id, primaryKeys: [treeNodes[0].id] }), // data: { id: treeNodes[0].id, pid: targetNode.id, name: treeNodes[0].name, moveType: moveType, isCopy: isCopy }, dataType: "json", method: 'post', success: function (data) { alert('拖拽成功!'); } }); } }
function keydownInput() { var event = event || window.event; if (event.keyCode == 13) { searchOrg(); } } function searchOrg() { //searchByFlag_ztree(treeId, search_orgainzation, ""); searchByFlag_ztree('organizationTree', 'search_orgainzation', ""); /*var searchName = $("#search_orgainzation").val(); $.ajax({ url: " ${contextPath}/organization/getOrganizations/list?keyword="+searchName, type : 'POST', dataType : 'json', success : function(data) { } });*/ } /** * 收起树:只展开根节点下的一级节点 * @param treeId */ function close_ztree(treeId) { var treeObj = $.fn.zTree.getZTreeObj(treeId); var nodes = treeObj.transformToArray(treeObj.getNodes()); var nodeLength = nodes.length; for (var i = 0; i < nodeLength; i++) { if (nodes[i].id == '0') { //根节点:展开 treeObj.expandNode(nodes[i], true, true, false); } else { //非根节点:收起 treeObj.expandNode(nodes[i], false, true, false); } } } /** * 搜索树,高亮显示并展示【模糊匹配搜索条件的节点s】 * @param treeId * @param search_orgainzation 文本框的id */ function searchOrganization(treeId, search_orgainzation) { searchByFlag_ztree(treeId, search_orgainzation, ""); } /** * 搜索树,高亮显示并展示【模糊匹配搜索条件的节点s】 * @param treeId * @param searchConditionId 搜索条件Id * @param flag 需要高亮显示的节点标识 */ function searchByFlag_ztree(treeId, search_orgainzation, flag) { //<1>.搜索条件 var searchCondition = $("#search_orgainzation").val(); //<2>.得到模糊匹配搜索条件的节点数组集合 var highlightNodes = new Array(); if (searchCondition && searchCondition != "") { // var treeObj = $.fn.zTree.init($("#organizationTree"), setting,treeId); // var treeObj=reloadTree(treeId); var treeObj = $.fn.zTree.getZTreeObj(treeId); highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null); //<3>.高亮显示并展示【指定节点s】 highlightAndExpand_ztree(treeId, highlightNodes, flag); } } /** * 高亮显示并展示【指定节点s】 * @param treeId * @param highlightNodes 需要高亮显示的节点数组 * @param flag 需要高亮显示的节点标识 */ function highlightAndExpand_ztree(treeId, highlightNodes, flag) { var treeObj = $.fn.zTree.getZTreeObj(treeId); //<1>. 先把全部节点更新为普通样式 var treeNodes = treeObj.transformToArray(treeObj.getNodes()); for (var i = 0; i < treeNodes.length; i++) { treeNodes[i].highlight = false; treeObj.updateNode(treeNodes[i]); } //<2>.收起树, 只展开根节点下的一级节点 close_ztree(treeId); //<3>.把指定节点的样式更新为高亮显示,并展开 if (highlightNodes != null) { for (var i = 0; i < highlightNodes.length; i++) { if (flag != null && flag != "") { if (highlightNodes[i].flag == flag) { //高亮显示节点,并展开 highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); //高亮显示节点的父节点的父节点....直到根节点,并展示 var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); } } else { //高亮显示节点,并展开 highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); //高亮显示节点的父节点的父节点....直到根节点,并展示 var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); } } } } /** * 递归得到指定节点的父节点的父节点....直到根节点 */ function getParentNodes_ztree(treeId, node) { if (node != null) { var treeObj = $.fn.zTree.getZTreeObj(treeId); var parentNode = node.getParentNode(); return getParentNodes_ztree(treeId, parentNode); } else { return node; } } /** * 设置树节点字体样式 */ function setFontCss_ztree(treeId, treeNode) { if (treeNode.id == 0) { //根节点 return {color: "#333", "font-weight": "bold"}; } else if (treeNode.isParent == false) { //叶子节点 return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : { color: "#660099", "font-weight": "normal" }; } else { //父节点 return (!!treeNode.highlight) ? {color: "#ff0000", "font-weight": "bold"} : { color: "#333", "font-weight": "normal" }; } }
//添加新的节点 function addHoverDom(treeId, treeNode) { $("#priorityTip").hide(); 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='add node' οnfοcus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_" + treeNode.tId); if (btn) btn.bind("click", function () { var zTree = $.fn.zTree.getZTreeObj("organizationTree"); // if (confirm("确认为 " + treeNode.name + " 添加子节点吗?")) { $("#modal-table").modal("show"); //设置新增窗口的一些属性,重置表单中的值 document.getElementById("title1").innerHTML = "新增组织架构"; $("#editOrganization").addClass("hidden"); $("#addOrganization").removeClass("hidden"); $("#form_organizationform")[0].reset(); $("#form_organizationParent").val(treeNode.id); $("#form_organizationParentName").val(treeNode.name); }); }
//编辑前的验证 function beforeEditName(treeId, treeNode) { $("#priorityTip").hide(); document.getElementById("title1").innerHTML = "编辑组织架构"; $("#addOrganization").addClass("hidden"); $("#editOrganization").removeClass("hidden"); var parentId = treeNode.pId; $.ajax({ url: "${contextPath}/organization/getOrganizations/query?id=" + parentId, type: 'POST', dataType: 'json', success: function (data) { $("#form_organizationParentName").val(data.orgname); } }); $("#form_organizationORG_ID").val(treeNode.id); $("#form_organizationName").val(treeNode.name); $("#form_organizationParent").val(treeNode.pId); $("#form_organizationORG_BRIEF").val(treeNode.orgbrief); $("#form_organizationORG_CODE").val(treeNode.orgcode); if (treeNode.isactive) { $("#form_organizationIsactive").val("true"); } else { $("#form_organizationIsactive").val("false"); } $("#form_organizationPRIORITY").val(treeNode.priority); $("#form_organizationADDWAY").val(treeNode.addway); $("#form_organizationDesc").val(treeNode.description); $("#modal-table").modal("show"); }
//删除节点信息 function beforeRemove(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("organizationTree"); zTree.selectNode(treeNode); var selectNodeId = treeNode.id; var selectNodeParentId = treeNode.pId; bootbox.confirm({ title: "提示", message: "删除组织架构[<font class='red'>" + treeNode.name + "</font>]" + "<br/><input type='radio' id='delOneorg' name='delOrg' checked/>如有下级架构,将会自动并入本级架构中" + "<br/><input type='radio' id='delPartOrg' name='delOrg'/>如有下级架构,将会一起被删除", buttons: { confirm: { label: "确认", //className: "btn-success", }, cancel: { label: "取消", //className: "btn-success", } }, callback: function (result) { if (result) {//OK if ($('#delOneorg').is(':checked')) { //开始发送数据 $.ajax({ contentType: "application/json", url: "${contextPath}/organization/operateOrg", dataType: "json", method: 'post', //传送请求数据 data: JSON.stringify({ oper: "delMerge", entry: { id: selectNodeId, parentid: selectNodeParentId } }), success: function (data_) { alert('删除成功!'); //重载tree数据 reloadTree(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('删除失败!'); } }); } else { $.ajax({ contentType: "application/json", url: "${contextPath}/organization/operateOrg", dataType: "json", method: 'post', //传送请求数据 data: JSON.stringify({ oper: "del", primaryKey: selectNodeId }), success: function (data_) { alert('删除成功!'); //重载tree数据 reloadTree(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('删除失败!'); } }); } } } }); return false; }
function addOrganization() { if ($("#form_organizationName").val().length == 0) { $("#form_organizationName").focus(); return false; } if ($("#form_organizationIsactive").val().length == 0) { $("#form_organizationIsactive").focus(); return false; } if ($("#form_organizationPRIORITY").val().length == 0||!isNumber($("#form_organizationPRIORITY").val())) { if(!isNumber($("#form_organizationPRIORITY").val())) $("#form_organizationPRIORITY").focus(); $("#priorityTip").show(); return false; } //开始发送数据 $.ajax ({ contentType: "application/json", url: "${contextPath}/organization/operateOrg", dataType: "json", method: 'post', //传送请求数据 data: JSON.stringify({ oper: "update", entry: { id: -1, parentid: $("#form_organizationParent").val(), orgname: $("#form_organizationName").val(), orgbrief: $("#form_organizationORG_BRIEF").val(), orgcode: $("#form_organizationORG_CODE").val(), isactive: $("#form_organizationIsactive").val(), priority: $("#form_organizationPRIORITY").val(), addway: $("#form_organizationADDWAY").val(), description: $("#form_organizationDesc").val() } }), success: function (data_) { //alert(data_); alert(data_.message); //重载grid数据 reloadTree(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("error:" + textStatus); } }); //$("#add_proj").modal("show"); $("#modal-table").modal("hide"); } function editOrganization() { if ($("#form_organizationName").val().length == 0) { $("#form_organizationName").focus(); return false; } if ($("#form_organizationIsactive").val().length == 0) { $("#form_organizationIsactive").focus(); return false; } if ($("#form_organizationPRIORITY").val().length == 0||!isNumber($("#form_organizationPRIORITY").val())) { if(!isNumber($("#form_organizationPRIORITY").val())) $("#form_organizationPRIORITY").focus(); $("#priorityTip").show(); return false; } //开始发送数据 $.ajax ({ contentType: "application/json", url: "${contextPath}/organization/operateOrg", dataType: "json", method: 'post', //传送请求数据 data: JSON.stringify({ oper: "update", entry: { id: $("#form_organizationORG_ID").val(), parentid: $("#form_organizationParent").val(), orgname: $("#form_organizationName").val(), orgbrief: $("#form_organizationORG_BRIEF").val(), orgcode: $("#form_organizationORG_CODE").val(), isactive: $("#form_organizationIsactive").val(), priority: $("#form_organizationPRIORITY").val(), description: $("#form_organizationDesc").val() } }), success: function (data_) { //alert(data_); alert(data_.message); //重载grid数据 reloadTree(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("error:" + textStatus); } }); //$("#add_proj").modal("show"); $("#modal-table").modal("hide"); }