一款支持自定义编辑，添加列表，删除列表等功能的bootstrap风格的zTree树形菜单代码，jQuery树形结构菜单插件下载。
js代码
<scripttype="text/javascript"src="js/jquery.ztree.core.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.excheck.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree.exedit.js"></script>
<SCRIPTtype="text/javascript">
<!--
varsetting={
view:{
addHoverDom:addHoverDom,
removeHoverDom:removeHoverDom,
selectedMulti:false
},
check:{
enable:true
},
data:{
simpleData:{
enable:true
}
},
edit:{
enable:true
}
};varzNodes=[
{id:1,pId:0,name:"[core]基本功能演示",open:true},
{id:101,pId:1,name:"最简单的树--标准JSON数据"},
{id:102,pId:1,name:"最简单的树--简单JSON数据"},
{id:103,pId:1,name:"不显示连接线"},
{id:104,pId:1,name:"不显示节点图标"},
{id:108,pId:1,name:"异步加载节点数据"},
{id:109,pId:1,name:"用zTree方法异步加载节点数据"},
{id:110,pId:1,name:"用zTree方法更新节点数据"},
{id:111,pId:1,name:"单击节点控制"},
{id:112,pId:1,name:"展开/折叠父节点控制"},
{id:113,pId:1,name:"根据参数查找节点"},
{id:114,pId:1,name:"其他鼠标事件监听"},{id:2,pId:0,name:"[excheck]复/单选框功能演示",open:false},
{id:201,pId:2,name:"Checkbox勾选操作"},
{id:206,pId:2,name:"Checkboxnocheck演示"},
{id:207,pId:2,name:"CheckboxchkDisabled演示"},
{id:208,pId:2,name:"CheckboxhalfCheck演示"},
{id:202,pId:2,name:"Checkbox勾选统计"},
{id:203,pId:2,name:"用zTree方法勾选Checkbox"},
{id:204,pId:2,name:"Radio勾选操作"},
{id:209,pId:2,name:"Radionocheck演示"},
{id:210,pId:2,name:"RadiochkDisabled演示"},
{id:211,pId:2,name:"RadiohalfCheck演示"},
{id:205,pId:2,name:"用zTree方法勾选Radio"},{id:3,pId:0,name:"[exedit]编辑功能演示",open:false},
{id:301,pId:3,name:"拖拽节点基本控制"},
{id:302,pId:3,name:"拖拽节点高级控制"},
{id:303,pId:3,name:"用zTree方法移动/复制节点"},
{id:304,pId:3,name:"基本增/删/改节点"},
{id:305,pId:3,name:"高级增/删/改节点"},
{id:306,pId:3,name:"用zTree方法增/删/改节点"},
{id:307,pId:3,name:"异步加载&编辑功能共存"},
{id:308,pId:3,name:"多棵树之间的数据交互"},{id:4,pId:0,name:"大数据量演示",open:false},
{id:401,pId:4,name:"一次性加载大数据量"},
{id:402,pId:4,name:"分批异步加载大数据量"},
{id:403,pId:4,name:"分批异步加载大数据量"},{id:5,pId:0,name:"组合功能演示",open:false},
{id:501,pId:5,name:"冻结根节点"},
{id:502,pId:5,name:"单击展开/折叠节点"},
{id:503,pId:5,name:"保持展开单一路径"},
{id:504,pId:5,name:"添加自定义控件"},
{id:505,pId:5,name:"checkbox/radio共存"},
{id:506,pId:5,name:"左侧菜单"},
{id:507,pId:5,name:"下拉菜单"},
{id:509,pId:5,name:"带checkbox的多选下拉菜单"},
{id:510,pId:5,name:"带radio的单选下拉菜单"},
{id:508,pId:5,name:"右键菜单的实现"},
{id:511,pId:5,name:"与其他DOM拖拽互动"},
{id:512,pId:5,name:"异步加载模式下全部展开"},{id:6,pId:0,name:"其他扩展功能演示",open:false},
{id:601,pId:6,name:"隐藏普通节点"},
{id:602,pId:6,name:"配合checkbox的隐藏"},
{id:603,pId:6,name:"配合radio的隐藏"}
];$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});varnewCount=1;
functionaddHoverDom(treeId,treeNode){
varsObj=$("#"+treeNode.tId+"_span");
if(treeNode.editNameFlag||$("#addBtn_"+treeNode.tId).length>0)return;
varaddStr="<spanclass='buttonadd'id='addBtn_"+treeNode.tId
+"'title='addnode'></span>";
sObj.after(addStr);
varbtn=$("#addBtn_"+treeNode.tId);
if(btn)btn.bind("click",function(){
varzTree=$.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode,{id:(100+newCount),pId:treeNode.id,name:"newnode"+(newCount++)});
returnfalse;
});
};
functionremoveHoverDom(treeId,treeNode){
$("#addBtn_"+treeNode.tId).unbind().remove();
};
//-->
</SCRIPT>
下载
|
|
置顶卡
变色卡