该博客展示了如何利用zTree插件创建一个下拉列表树，包括引入相关JS和CSS文件，设置HTML结构，定义zTree配置，以及处理节点点击和双击事件。示例中还包含了搜索功能，允许用户通过输入关键词筛选节点。
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.core.min.js" ></script>
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.excheck.min.js" ></script>
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.exedit.min.js"></script>
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css" />
<body id="bodyId">
<div>
<span class="mide">仓库位置:</span>
<input id="zzjgName" style=" margin-top:5px;display: none; width:210px" type="text" class="form-control input-text">
<input id="zzjgOfficeId" style=" margin-top:5px;display: none;width:210px" type="text" class="form-control input-text">
<input id="areaSel" name="areaSel" style="width:210px" type="text" readonly class="form-control input-text" onclick="showMenu(); return false;" placeholder="---请选择---"/>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute; z-index: 1000;background-color: #fff;border: 1px #666 solid;width:280px;">
<input style=" margin-top:5px;width:160px" type="text" class="form-control" onkeyup="AutoMatch(this)"><br>
<ul id="areaTree" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
var zTreeObj;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onDblClick: onDblClick,
onClick : onClick,
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
}
};
//可以判断哪些节点不可选
function beforeClick(treeId, treeNode) {
var check = true;
/*if(treeNode.id.toString().substring(8).match(/^0{4}$/)){
check = false;
alert("只能选择第三级菜单。。。");
}*/
return check;
}
//点击节点动作
function onClick(e, treeId, treeNode) {
/*var pNode = treeNode.getParentNode();
var ppNode = pNode.getParentNode();
$('#areaid').val(ppNode.id);
$('#areaname').val(ppNode.name);
$('#substationid').val(pNode.id);
$('#substationname').val(pNode.name);*/
$('#zzjgOfficeId').val(treeNode.id);
$('#zzjgName').val(treeNode.name);
$('#areaSel').val(treeNode.name);
}
//双击节点动作
function onDblClick(e, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("areaTree");
$('#zzjgOfficeId').val("");
$('#zzjgName').val("");
$('#areaSel').val("");
treeObj.cancelSelectedNode(treeNode);
}
//显示下拉树
function showMenu() {
var areaObj = $("#areaSel");
var areaOffset = $("#areaSel").offset();
$("#menuContent").css({left:areaOffset.left + "px", top:areaOffset.top + areaObj.outerHeight() + "px"}).slideDown("fast");
$("#bodyId").bind("mousedown", onBodyDown);
}
//隐藏下拉树
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("#bodyId").unbind("mousedown", onBodyDown);
}
//注册关闭下拉树的事件
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "areaSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
//下拉树搜索框搜索
function AutoMatch(txtObj) {
$.fn.zTree.init($("#areaTree"), setting, zNodes)
if (txtObj.value.length > 0) {
var treeObj = $.fn.zTree.getZTreeObj("areaTree");
var nodeList = treeObj.getNodesByParamFuzzy("name", txtObj.value,null);
//将找到的nodelist节点更新至Ztree内
$.fn.zTree.init($("#areaTree"), setting, nodeList);
} else {
$.fn.zTree.init($("#areaTree"), setting, zNodes);
}
}
$(function () {
$.ajax({
url: '',
type: 'POST',
dataType : "json",
data: {id: ""},
async: false,
success: function (data) {
var d = $.parseJSON(data);
//zNodes = d;
}
});
//初始化下拉树
$.fn.zTree.init($("#areaTree"), setting, zNodes);
});
var zNodes =[
{id:1, pId:0, name:"水果", open:true},
{id:101, pId:1, name:"苹果"},
{id:102, pId:1, name:"香蕉"},
{id:103, pId:1, name:"梨"},
{id:10101, pId:101, name:"红富士苹果"},
{id:10102, pId:101, name:"红星苹果"},
{id:10103, pId:101, name:"嘎拉"},
{id:10104, pId:101, name:"桑萨"},
{id:10201, pId:102, name:"千层蕉"},
{id:10202, pId:102, name:"仙人蕉"},
{id:10203, pId:102, name:"吕宋蕉"},
];
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.excheck.min.js" ></script>
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.exedit.min.js"></script>
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css" />
<body id="bodyId">
<div>
<span class="mide">仓库位置:</span>
<input id="zzjgName" style=" margin-top:5px;display: none; width:210px" type="text" class="form-control input-text">
<input id="zzjgOfficeId" style=" margin-top:5px;display: none;width:210px" type="text" class="form-control input-text">
<input id="areaSel" name="areaSel" style="width:210px" type="text" readonly class="form-control input-text" onclick="showMenu(); return false;" placeholder="---请选择---"/>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute; z-index: 1000;background-color: #fff;border: 1px #666 solid;width:280px;">
<input style=" margin-top:5px;width:160px" type="text" class="form-control" onkeyup="AutoMatch(this)"><br>
<ul id="areaTree" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
var zTreeObj;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onDblClick: onDblClick,
onClick : onClick,
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
}
};
//可以判断哪些节点不可选
function beforeClick(treeId, treeNode) {
var check = true;
/*if(treeNode.id.toString().substring(8).match(/^0{4}$/)){
check = false;
alert("只能选择第三级菜单。。。");
}*/
return check;
}
//点击节点动作
function onClick(e, treeId, treeNode) {
/*var pNode = treeNode.getParentNode();
var ppNode = pNode.getParentNode();
$('#areaid').val(ppNode.id);
$('#areaname').val(ppNode.name);
$('#substationid').val(pNode.id);
$('#substationname').val(pNode.name);*/
$('#zzjgOfficeId').val(treeNode.id);
$('#zzjgName').val(treeNode.name);
$('#areaSel').val(treeNode.name);
}
//双击节点动作
function onDblClick(e, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("areaTree");
$('#zzjgOfficeId').val("");
$('#zzjgName').val("");
$('#areaSel').val("");
treeObj.cancelSelectedNode(treeNode);
}
//显示下拉树
function showMenu() {
var areaObj = $("#areaSel");
var areaOffset = $("#areaSel").offset();
$("#menuContent").css({left:areaOffset.left + "px", top:areaOffset.top + areaObj.outerHeight() + "px"}).slideDown("fast");
$("#bodyId").bind("mousedown", onBodyDown);
}
//隐藏下拉树
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("#bodyId").unbind("mousedown", onBodyDown);
}
//注册关闭下拉树的事件
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "areaSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
//下拉树搜索框搜索
function AutoMatch(txtObj) {
$.fn.zTree.init($("#areaTree"), setting, zNodes)
if (txtObj.value.length > 0) {
var treeObj = $.fn.zTree.getZTreeObj("areaTree");
var nodeList = treeObj.getNodesByParamFuzzy("name", txtObj.value,null);
//将找到的nodelist节点更新至Ztree内
$.fn.zTree.init($("#areaTree"), setting, nodeList);
} else {
$.fn.zTree.init($("#areaTree"), setting, zNodes);
}
}
$(function () {
$.ajax({
url: '',
type: 'POST',
dataType : "json",
data: {id: ""},
async: false,
success: function (data) {
var d = $.parseJSON(data);
//zNodes = d;
}
});
//初始化下拉树
$.fn.zTree.init($("#areaTree"), setting, zNodes);
});
var zNodes =[
{id:1, pId:0, name:"水果", open:true},
{id:101, pId:1, name:"苹果"},
{id:102, pId:1, name:"香蕉"},
{id:103, pId:1, name:"梨"},
{id:10101, pId:101, name:"红富士苹果"},
{id:10102, pId:101, name:"红星苹果"},
{id:10103, pId:101, name:"嘎拉"},
{id:10104, pId:101, name:"桑萨"},
{id:10201, pId:102, name:"千层蕉"},
{id:10202, pId:102, name:"仙人蕉"},
{id:10203, pId:102, name:"吕宋蕉"},
];
扫一扫
1629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
