标签：pdo znode 使用教程 跳转 mouse node llb width i++
1、首先去官网下载http://www.ztree.me/v3/main.php#_zTreeInfo
2、之后引入：
<script src="js/jquery.ztree.all-3.5.js"></script> <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
3、写js：
<!--树形结构 JS--> <script type="text/javascript"> var setting= { data: { simpleData: {enable: true} }, check: { enable: true, chkStyle: "radio", radioType: "all" }, view: { showLine: true }, callback: { onClick: onClick, onCheck: onCheck, } }; var zNodes =[ <#if selectNewsTypeAll?size gt 0> <#list selectNewsTypeAll as sNewsTypeAll> {id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name:"${sNewsTypeAll.name}"}, </#list> </#if> ]; $(document).ready(function() { $.fn.zTree.init($("#treeConfig"), setting, zNodes); }); function onClick(e,treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeConfig"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } function onCheck(e,treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeConfig"), nodes = zTree.getCheckedNodes(true); var name = "", id = ""; for (var i = 0, l = nodes.length; i < l; i++) { name = nodes[i].name; newsTypeId = nodes[i].id; } $("#treeName").val(name); $("#treeId").val(id); } function showMenu() { var dropdownObj = $("#treeName"); var dropdownOffset = $("#treeName").offset(); $("#treeContainer").css({ left: dropdownOffset.left + "px", top: dropdownOffset.top + dropdownObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); var w = $("#treeName").width(); var p = $("#treeName").css("padding-left"); $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2); } function hideMenu() { $("#treeContainer").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function onBodyDown(event) { if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) { hideMenu(); //以下代码暂时没用到 start var height = top.$("#mainFrame").contents().find("body").height(); if (height < 850) { height = 850; } top.$("#mainFrame").height(height); //以下代码暂时没用到 end } } </script>
文本框的代码：
<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>
树状图显示的地方：
<div id="treeContainer" class="treeContainer"> <ul id="treeConfig" class="ztree"></ul> </div>
必要的样式：
.treeContainer{
display:none;
position: absolute;
}
以下是详解：
数据填充
重点就在于zNodes的配置。就是要配置好id、pId、name;这三个属性。
var zNodes =[ <#if selectNewsTypeAll?size gt 0> <#list selectNewsTypeAll as sNewsTypeAll> { id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name:"${sNewsTypeAll.name}" }, </#list> </#if> ];
setting 中callback是回调函数，我上面写了两个
callback: { //节点点击事件 onClick: onClick, //节点选中事件 onCheck: onCheck, }
setting中其他属性默认，就行。
由于一加载页面就要把树状图准备好，只不过没有显示出来而已！所以需要以下代码
$(document).ready(function() { //初始化 $.fn.zTree.init($("#treeConfig"), setting, zNodes); });
节点点击事件，没什么说的，这样配置就可以了：
function onClick(e,treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeConfig"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; }
节点选择事件：
function onCheck(e,treeId,treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeConfig"), nodes = zTree.getCheckedNodes(true); var name = "", id = ""; for (var i = 0, l = nodes.length; i < l; i++) { name = nodes[i].name; newsTypeId = nodes[i].id; } $("#treeName").val(name); $("#treeId").val(id); }
其中：
$("#treeName").val(name);
$("#treeId").val(id);
是根据自己的业务来的，我是因为在选择节点之后，要把，你选择的名字显示出来，并且id要写入隐藏字段，以便保存到数据库。
树状图是在什么时候显示出来呢？我设置的是当点击文本框的时候显示出来
function showMenu() { var dropdownObj = $("#treeName"); var dropdownOffset = $("#treeName").offset(); $("#treeContainer").css({ left: dropdownOffset.left + "px", top: dropdownOffset.top + dropdownObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); //获取文本框的宽度 var w = $("#treeName").width(); //获取文本框的内填充 var p = $("#treeName").css("padding-left"); //设置树状图的宽度 $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2); }
其中：
$("body").bind("mousedown", onBodyDown);
是绑定了一个鼠标点击事件，当点击其他区域，会触发onBodyDown事件。
function onBodyDown(event) { if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) { hideMenu(); //以下代码暂时没用到 start var height = top.$("#mainFrame").contents().find("body").height(); if (height < 850) { height = 850; } top.$("#mainFrame").height(height); //以下代码暂时没用到 end } }
这里面又调用hideMenu()把树状图隐藏掉。
需要用到的文本框代码：
<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()">
<input type="hidden" name="newsTypeId" id="treeId"/>
而用于显示树状图的代码是： 这段代码不一定要和上面那段文本框代码放在一起。
<div id="treeContainer" class="treeContainer"> <ul id="treeConfig" class="ztree"></ul> </div>
因为，这里面做了位置的偏移。
function showMenu() { var dropdownObj = $("#treeName"); //获取偏移量 var dropdownOffset = $("#treeName").offset(); $("#treeContainer").css({ left: dropdownOffset.left + "px", top: dropdownOffset.top + dropdownObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); var w = $("#treeName").width(); var p = $("#treeName").css("padding-left"); $("#treeConfig").css("width",parseInt(w)+parseInt(p)*2); }
由于zTree自带的样式不好看，我进行了细微的跳转，只是让显示稍微好看些
/*一定要的*/ .treeContainer{ display:none; position: absolute; } /*根据自己情况而定*/ .treeContainer .ztree{ background-color:#FFF; }
标签：pdo znode 使用教程 跳转 mouse node llb width i++
原文地址：https://www.cnblogs.com/huangjinyong/p/9340801.html
