树搜索
## searchNode
### 1. 功能
对树控件进行搜索
### 2. 使用场景
商品分类搜索时使用
### 3. 如何使用
#### 3.1 不通过接口进行数据搜索
可在操作栏表单添加搜索按钮, 实际添加位置无限制
##### 3.1.1 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>
```
##### 3.1.2 JS 中的操作
##### 3.1.3 获取用户输入的关键字
```javascript
$("#letSearch").on('click', function () {
var inputData = $('#keyword').val();
searchNode(inputData); // 传入关键字
})
```
##### 3.1.4 搜索树
```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);
}
}
```
##### 3.1.5 更改css操作
```javascript
function setHighlight(treeId, treeNode) {
return (treeNode.highlight) ? {
color: "#5FB878",
"font-weight": "bold",
} : {
color: "#000",
"font-weight": "normal"
};
}
// 在setting view 中调用该函数, 不用加()
// fontCss: setHighlight
```
##### 3.1.6 页面效果
含有关键字的树节点会展开
#### 3.2 通过接口进行数据搜索
##### 3.2.1 在此已属性列表为例, 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>
```
##### 3.2.2 获取搜索的关键字
```javascript
$('#search').on('click', function () {
var keyword = $('#propName').val();
getDataByUrl(keyword);
})
```
##### 3.2.3 通过接口获取数据
```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);
}
})
}
```
##### 3.2.4 更新数据, 重新渲染树
##### 3.2.5 实际效果
###### 返回全部数据
###### 进行搜索
### 4. api定义
``` javascript
onion.api = function(){
}
```