前端学习_Javascript_Layui、JQuery_树形选择组件、post请求

主要知识点：

代码

HTML
CSS
Javascript

插件

layui.js

效果：

学习记录：

创建一个树形组件

最近在设计一个系统，需要根据组织关系查看、并选中一些部门。用传统的复选框显得有些臃肿，于是想到之前在OA中看到的树形组织关系。

树形结构很像我们平常所使用的JSON结构，于是就在网上找有没有JSON转为树形图的组件，没想到还真给我找到了

Layui-tree的树形组件可以满足这个要求。

---

数据结构：

通过这个组件也了解了一下Layui这个前端框架，设计理念是非常不错的，都是模块化，低门槛开箱即用。其中后台管理模板也挺吸引我的，不过需要收费，以后可以研究一下。目前这个项目不打算整体使用Layui的框架。

模块的使用官网文档已经非常详细了，我在这里只指出一些值得注意的地方

在使用模块前需要加载所需模块，创建实例

layui.use(['tree', 'util'], function(){
  var tree = layui.tree
  ,layer = layui.layer
  ,util = layui.util

创建一个ID为“optiontree”的DIV，并通过render的elem绑定该div

---

值得注意的是render方法中的“id”为layui中的id，后面提取选中数据的时候需要用到。

tree.render({
  elem: '#optiontree'
  , data: data
  , id: 'tree1'
});

这里的data需要是JSON（数组）格式的，如果是字符串格式的话会出现问这种情况

这里有个坑，注意以下三种数据的类型

• JSON数组（[]中包裹许多{}）
• 和JSON字符串（由{}包裹）
• JSON数组字符串（[]外还有""）

---

处理方法分为

• JSON.parse()
• eval()

---

创建树时的data使用了eval()的方法进行解析
但后面获取树选中节点的data却用了JSON.parse()进行解析
具体区别有待研究，据说这两种处理方法在安全性上也有差异
之后会专门开一篇来记录

POST请求树节点的数据

在日常使用中，我们常常需要通过数据库的内容来修改Tree的节点，这里记录一下使用JQuery来执行post请求的学习。

jQuery.post('/data/get***tree', "", function createclasstree(data) {
 //console.log(data)
 tree.render({
   elem: '#optiontree'
   , data: eval(data)	//解析JSON数组
   , showCheckbox: true	//开启复选框
   , id: 'tree1'
 });
})

这里的后端是自己用Flask写的，会根据数据库字段，返回一个JSON数组，详情请进我空间看另一篇博客

小笔记：
JQuery.post可改为$.post

---

$.function(); 选取JQuery 定义的 function() （或内核函数）执行
$('input')就是 选取 HTML 当中全部的 input 标签

当树形组件被点击时触发函数

tree.render({
  elem: '#optiontree'
  , data: data
  , showCheckbox: true
  , id: 'tree1'
  ,oncheck: function(obj){
    layer.alert(JSON.stringify(tree.getChecked("tree1")), { shade: 0 })
  }
});

oncheck绑定了function()函数，当树被点击，会调用tree.getChecked()获取整个树选择的节点数据，通过JSON.stringfy()将对象转为字符串方便输出。

---

值得注意的是function的obj并不能用来直接使用，像这样：layer.alert(JSON.stringify(obj), { shade: 0 })
输出的将是你当前点击的节点下的子节点，并不是整个树