标签：text func XML ret json asc 节点 html5 添加
这次做项目还用到了另一个tree树的插件，就是input输入框下拉tree树
先看图片
http://www.treejs.cn/v3/api.php
引入的js
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
<script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta charset="UTF-8"> <!-- for HTML5 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
<script src="js/jquery.ztree.excheck-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
var setting = {
view: {
showIcon: false//设置 zTree 是否显示节点的图标。默认值：true
showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true
},
data: {
simpleData: {
enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
默认值：false
ztree有两种数据格式1、标准数据格式 2、简单数据格式（我们常用的json数据格式，也就是我下面的数据格式）
idKey: "id",//你后台返回的json的id字段（节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
pIdKey: "pId",//你后台返回的json的父级id字段（节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]）
rootPId: 0（用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]）
}
},
callback: {
onClick: onClick//用于捕获节点被点击的事件回调函数
//如果设置了 setting.callback.beforeClick 方法，且返回 false，将无法触发 onClick 事件回调函数。
}
};
var filename;
var parentids;
var parentId;
function onClick(e, treeId, treeNode) {
$(‘#txtTreeSelect‘).val(treeNode.name);
alert(treeNode.tId + ", " + treeNode.name);//每次点击节点后， 弹出该节点的 Id、name 的信息
filename = getFilePath(treeNode);//获取所有父节点的名字
parentids = getFileId(treeNode);//获取所有父节点的id
parentId = treeNode.id;//获取点击节点的id
}
//获取所有父节点名字
function getFilePath(treeObj){
if(treeObj==null)return "";
var filename = treeObj.name;
var pNode = treeObj.getParentNode();
if(pNode!=null){
filename = getFilePath(pNode) +">"+ filename;
}
return filename;
}
//获取所有父节点id
function getFileId(treeObj){
if(treeObj==null)return "";
var id = treeObj.id;
var pNode = treeObj.getParentNode();
if(pNode!=null){
id = getFileId(pNode) +">"+ id;
}
return id;
}
function showMenu() {//输入框的点击事件
var cityObj = $(‘#txtTreeSelect‘);
var cityOffset = cityObj.offset();
$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {//初始化隐藏下拉树
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {//树的主体
if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
hideMenu();
}
}
$(document).ready(function () {//一进页面就会加载的方法
var zNodes =[//自定义json
{ id:1, pId:0, name:"父节点1 - 展开", open:true,url:"jyy"},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes); //zTree的初始化方法
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txtTreeSelect" type="text" onclick="showMenu(); return false;"/>//输入框
</div>
<div id="menuContent" class="menuContent" style="display: none; position: absolute;">
<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 120px; height:80px;">
</ul>
</div>//tree树的div块
</form>
</body>
</html>标签：text func XML ret json asc 节点 html5 添加
原文地址：https://www.cnblogs.com/lvgeaibingyue/p/10167674.html
