树使用
## zTree
### 1. 功能
引入树形控件
### 2. 使用场景
进行商品分类等需要分级的模块操作时使用
### 3. 如何使用
#### 3.1 基本使用
##### 3.1.1 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>
```
##### 3.1.2 获取树的数据
以常用的分类列表为例, 需根据实际情况, 处理要渲染到树上的数据
```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();
```
##### 3.1.3 数据处理
```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;
}
```
##### 3.1.4 渲染树
```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);
}
```
##### 3.1.5 选择节点
通过调用 `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']);
}
//下一步操作
}
}
```
##### 3.1.6 获取选择状态
获取树中已被选择的界面
```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)
}
}
};
```
#### 3.2 数据回显
```javascript
//设置节点已被选中
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); // 得到树
for (var n = 0; n < zNodes.length; n++) { // 遍历树
for (var m = 0; m < letIds.length; m++) { // 遍历需要用到的数组, 由后台得到
if (zNodes[n].letId === letIds[m]) { // 数据匹配
var node = zTree.getNodeByParam("letId", zNodes[n].letId); // 数据添加
node.checked = true // 标为已选
zTree.updateNode(node); // 更新树
}
}
}
```
### 4. api定义
``` javascript
onion.api = function(){
}
```