树控件
### 基本使用
#### HTML 模板
```html
<!-- css -->
<link rel="stylesheet" href="../../../css/zTreeStyle.css" />
<!-- html -->
<ul class="ztree" id="treeDemo"></ul>
<!-- javascript -->
<script type="text/javascript" src="../../../lib/jquery.ztree.all.min.js"></script>
```
#### 获取树的数据
以常用的分类列表为例, 需根据实际情况, 处理要渲染到树上的数据
```javascript
function searchResources() {
onion.ajax.get("/common/let_list", function (res) {
if (res.code == onion.networkState.SUCC) {
var renderData = dataTransform(res.data);
renderTree(renderData);
}
});
}
searchResources();
```
#### 数据处理
```javascript
function dataTransform(data) {
var result = [];
for (var i = 0; i < data.length; i++) {
var tempObj = {};
tempObj["letId"] = data[i]["letId"];
tempObj["letParentId"] = data[i]["letParentId"];
tempObj["letName"] = data[i]["letName"];
tempObj["letIsEnd"] = data[i]["letIsEnd"];
result.push(tempObj);
}
return result;
}
```
#### 渲染树
```javascript
function renderTree(zNodes) {
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
check: {
enable: true
},
data: {
key: {
name: "letName"
},
simpleData: {
enable: true,
pIdKey: "letParentId",
idKey: "letId"
}
},
callback: {
onCheck: onCheck // 选择后的回调函数
}
};
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
```
#### 选择节点
通过调用 `onCheck` 来实现
```javascript
function onCheck(e, treeId, treeNode) {
var selectedNode = zTreeObj.getCheckedNodes(true);
if (selectedNode.length > 0) {
var selectedIdArr = [];
for (var i = 0; i < selectedNode.length; i++) {
// 获得了选择的id , 存入 selectedIdArr
selectedIdArr.push(selectedNode[i]['letId']);
}
//下一步操作
}
}
```
### 获取选择状态
获取树中已被选择的界面
```javascript
function zTreeOnCheck(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo1");
nodes = treeObj.getCheckedNodes(true);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].parentId == null) {
nodes.splice(i, 1)
}
}
};
```
### 数据回显
```javascript
//设置节点已被选中
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); // 得到树
for (var n = 0; n < zNodes.length; n++) { // 遍历树
for (var m = 0; m < window.letIds.length; m++) { // 遍历需要用到的数组
if (zNodes[n].letId === window.letIds[m]) { // 数据匹配
var node = zTree.getNodeByParam("letId", zNodes[n].letId); // 数据添加
node.checked = true // 标为已选
zTree.updateNode(node); // 更新树
}
}
}
```
### 不通过接口进行数据搜索
可在操作栏表单添加搜索按钮, 实际添加位置无限制
#### HTML 模板
```html
<input id="keyword" type="text" class="layui-input" placeholder="搜索商品分类" >
<span class="layui-btn limitBtn layui-hide" id="letSearch">
<i class="layui-icon"></i>查询
</span>
```
#### JS 中的操作
#### 获取用户输入的关键字
```javascript
$("#letSearch").on('click', function () {
var inputData = $('#keyword').val();
searchNode(inputData); // 传入关键字
})
```
#### 搜索树
```javascript
function searchNode(value) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
if (value == "") {
onion.layer.tipMsg('请输入搜索字段')
return;
};
// 获取与value匹配的节点，使用的ztreeAPI getNodesByParamFuzzy
var nodes = treeObj.getNodesByParamFuzzy("letName", value);
// 关闭所有节点的高亮
// 使用API transformToArray获取所有的节点
// getNodes()只能获得根节点，属性children也只能获取下一级节点
var allNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < allNodes.length; i++) {
// 关闭高亮是利用节点属性highlight来控制fontCss实现的
// 需要配合setting.view中设置的fontCss使用，后面代码会说
allNodes[i].highlight = false;
// 更新节点，因为hightlight改变了，使用updateNode可以更新节点
treeObj.updateNode(allNodes[i]);
}
// 先关闭所有节点
treeObj.expandAll(false);
// 展开根节点, 如果不展开根节点，下面的节点无法展开
treeObj.expandNode(treeObj.getNodes()[0], true);
// 高亮并展开搜索到的节点
for (var i = 0; i < nodes.length; i++) {
nodes[i].highlight = true;
treeObj.updateNode(nodes[i]); // 更新节点，让高亮生效
// 展开搜索到的节点的父节点
treeObj.expandNode(nodes[i].getParentNode(), true);
}
}
```
#### 更改css操作
```javascript
function setHighlight(treeId, treeNode) {
return (treeNode.highlight) ? {
color: "#5FB878",
"font-weight": "bold",
} : {
color: "#000",
"font-weight": "normal"
};
}
// 在setting view 中调用该函数, 不用加()
// fontCss: setHighlight
```
#### 页面效果
含有关键字的树节点会展开
### 通过接口进行数据搜索
#### 在此已属性列表为例, html与前者相同
```html
<div class="flexbox pt10 pb10">
<div class="jeflex ml10">
<input class="layui-input" id="propName" name="propName">
</div>
<span class="layui-btn mr10 ml5" id="search">
<i class="layui-icon" ></i>搜索
</span>
</div>
```
#### 获取搜索的关键字
```javascript
$('#search').on('click', function () {
var keyword = $('#propName').val();
getDataByUrl(keyword);
})
```
#### 通过接口获取数据
```javascript
getDataByUrl(); // 初次调用, 获得全部数据
function getDataByUrl(keyword) {
// 如果有关键字
if (keyword) {
var url = "/goods/prop/list?propName=" + keyword;
} else {
var url = "/goods/prop/list";
}
onion.ajax.get(url, function (res) {
if (res.code == onion.networkState.SUCC) {
var data = res.data;
renderTree(data);
}
})
}
```
#### 更新数据, 重新渲染树
#### 实际效果
##### 返回全部数据
##### 进行搜索
