zTree的使用
最近工程要用到树形结构，就在网上找到了jquery插件ztree，成功的知足了需求。
需求详见如上图
1.从后台获取栏目树数据
2.初始化栏目树时，层级所有展开
3.支持搜索，点击"查找"按钮以后，1>展开搜索到的栏目;2>将搜索到的结果标红
4.栏目支持多选，下面还有个肯定按钮，将选中的栏目树id传送给后台
直接上样例，很详细的说明
1.ztree官方文档地址
ztree官网地址
注意查看demo演示与api文档，很详细，几乎能够知足全部常见需求。
2.代码样例
`<!DOCTYPE html>javascript
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>ztree demo 2</title> <!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> --> <link rel="stylesheet" type="text/css" href="./css/demo.css"> <link rel="stylesheet" type="text/css" href="./css/zTreeStyle/zTreeStyle.css"> <style> body { background-color: white; margin: 0; padding: 0; text-align: left; }php
div,
p,
table,
th,
td
{
list-style: none;
margin: 0;
padding: 0;
color: #333;
font-size: 12px;
font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}
#testIframe
{
margin-left: 10px;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./js/jquery.ztree.excheck.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTree;
var demoIframe;
var setting =
{
check: {
enable: true,
//父子节点联动
chkboxType: { "Y": "ps", "N": "ps" }
},
view: {
nameIsHTML: true,
fontCss: setFontCss
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onCheck: onCheckMethod
}
};
var zNodes = [
{
id: 1,
pId: 0,
name: "一级栏目1",
open: true
},
{
id: 100,
pId: 1,
name: "一级栏目1/二级栏目1",
open: true
},
{
id: 101,
pId: 1,
name: "一级栏目1/二级栏目2",
open: true
},
{
id: 2,
pId: 0,
name: "一级栏目2",
open: true
},
{
id: 200,
pId: 2,
name: "一级栏目2/二级栏目1",
open: true
},
{
id: 201,
pId: 2,
name: "一级栏目2/二级栏目2",
open: true
},
{
id: 201001,
pId: 201,
name: "一级栏目2/二级栏目2/小敏",
open: true
},
{
id: 3,
pId: 0,
name: "产品一级",
open: true
},
{
id: 301,
pId: 3,
name: "产品一级/小敏",
open: true
},
{
id: 4,
pId: 0,
name: "新闻",
open: true
},
{
id: 401,
pId: 4,
name: "新闻/舆论",
open: true
},
{
id: 401001,
pId: 401,
name: "新闻/舆论/小敏",
open: true
},
{
id: 5,
pId: 0,
name: "大数据",
open: true
},
{
id: 501,
pId: 5,
name: "大数据/小敏",
open: true
},
];
$(document).ready(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
demoIframe = $("#testIframe");
demoIframe.bind("load", loadReady);
//var zTree = $.fn.zTree.getZTreeObj("tree");
//zTree.selectNode(zTree.getNodeByParam("id", 1));
});
function loadReady() {
var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH),
minH = Math.min(bodyH, htmlH),
h = demoIframe.height() >= maxH ? minH : maxH;
if(h < 530) h = 530;
demoIframe.height(h);
}
/**
* 展开树
* [@param](https://my.oschina.net/u/2303379) treeId
*/
function expand_ztree(treeId) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
/**
* 收起树：只展开根节点下的一级节点
* [@param](https://my.oschina.net/u/2303379) 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](https://my.oschina.net/u/2303379) treeId
* [@param](https://my.oschina.net/u/2303379) searchConditionId 文本框的id
*/
function search_ztree(treeId, searchConditionId) {
//1.先清空全部节点的高亮
//2.在搜索
searchByFlag_ztree(treeId, searchConditionId,"");
}
/**
* 搜索树，高亮显示并展现【模糊匹配搜索条件的节点s】
* [@param](https://my.oschina.net/u/2303379) treeId
* @param searchConditionId 搜索条件Id
* @param flag 须要高亮显示的节点标识
*/
function searchByFlag_ztree(treeId, searchConditionId, flag) {
//<1>.搜索条件
var searchCondition = $('#' + searchConditionId).val();
console.log(searchCondition);
//<2>.获得模糊匹配搜索条件的节点数组集合
var highlightNodes = new Array();
if(searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮显示并展现【指定节点s】
highlightAndExpand_ztree(treeId, highlightNodes, searchCondition, flag);
}
/**
* 高亮显示并展现【指定节点s】
* @param treeId
* @param highlightNodes 须要高亮显示的节点数组
* @param flag 须要高亮显示的节点标识
*/
function highlightAndExpand_ztree(treeId, highlightNodes, tx, 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].checked = true;
//var t = highlightNodes[i].name;
//t = t.replace(eval("/" + tx + "/gi"), "<span style='background-color: yellow;color:red'>" + tx + "</span>");
//highlightNodes[i].name = t;
//treeObj.updateNode(highlightNodes[i]);
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();
if(parentNode != null){
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 onCheckMethod(treeId, treeNode) {
var treeObj=$.fn.zTree.getZTreeObj("tree");
nodes=treeObj.getCheckedNodes(true);
var v='';
for(var i=0;i<nodes.length;i++){
v = v+nodes[i].name+",";
console.log("节点id:"+nodes[i].id+"节点name:"+v);
}
}
function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("tree"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
zTree.setting.check.chkboxType = type;
showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
var code;
function showCode(str) {
if (!code) code = $("#code");
code.empty();
code.append("<li>"+str+"</li>");
}
//高亮显示
function setFontCss(treeId, treeNode)
{
return (!!treeNode.highlight) ? {color:"#FF0000", "font-weight":"bold","font-size":"14px"} : {color:"#000", "font-weight":"normal"};
};
</SCRIPT>
</head> <body> <div style="clear: both;"> <input type="text" id="ser" value="check"/> <input type="button" value="查找" onclick="search_ztree('tree', 'ser')"/> </div> <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul> </body> </html>` css
以下是处理zTree初始化时默认选中某些节点
思路：确定是在初始化的时候，设置某些节点选中
var articleTagslist = "所有节点"; var _modifyArticleTags = $("#modifyArticleTags").val(); var setting = { check: { enable: true }, view: { nameIsHTML: true, fontCss: setFontCss }, data: { simpleData: { enable: true, idKey: "id", rootPId: "" } }, callback: { onCheck:onCheckMethod } }; t = $.fn.zTree.init($("#tree"), setting, articleTagslist); var menuIds = _modifyArticleTagsHide.split(','); for(var i = 0; i < menuIds.length; i++) { var node = t.getNodeByParam("id", menuIds[i]); if(node != null) { //选中 t.checkNode(node, true) } } articleTagNameGlobal = _modifyArticleTags;html
相关文章
- 1. zTree使用心的
- 2. 【zTree】 zTree使用的 小例子
- 3. jq-zTree使用
- 4. ztree使用
- 5. 【zTree】zTree开发使用说明【20140610】
- 6. 201. ztree 的简单使用
- 7. Ztree的简单使用
- 8. ztree插件的使用
- 9. zTree的简单使用
- 10. ZTree的简单使用
- 更多相关文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安装与使用
- • 使用Rxjava计算圆周率
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. zTree使用心的
- 2. 【zTree】 zTree使用的 小例子
- 3. jq-zTree使用
- 4. ztree使用
- 5. 【zTree】zTree开发使用说明【20140610】
- 6. 201. ztree 的简单使用
- 7. Ztree的简单使用
- 8. ztree插件的使用
- 9. zTree的简单使用
- 10. ZTree的简单使用