首页 > 编程语言> 文章详细

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

2021-02-10 15:30:28 阅读：213 来源： 互联网

标签：JQuery function Layui Javascript tree JSON 树形 layui data

主要知识点：

代码

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 })
输出的将是你当前点击的节点下的子节点，并不是整个树

标签：JQuery,function,Layui,Javascript,tree,JSON,树形,layui,data
来源： https://blog.csdn.net/qq_23211951/article/details/113782079

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9