官方地址:https://fly.layui.com/extend/treeSelect/

下面介绍一下这个插件的使用方法

1.html页面

<div class="layui-input-block">
<input name="pid" value="" type="text" id="tree" lay-filter="tree" class="layui-input">
</div>

2.js引入插件(引入多个插件的方法)

layui.config({
base: '__ROOT__/static/' //公共的文件夹
,version: new Date().getTime()
}).extend({ //需要引入的插件
treetable: 'plugs/treetable-lay/treetable',
treeSelect: 'treeSelect', //这是此文章需要的插件
authtree: 'authtree'
});

3.写入js方法

treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: "{:url('systemmenu/getAllRule')}", //写成自己的接口(切记这里的数据一定是json格式)
// 异步加载方式:get/post,默认get
type: 'get',
// 占位符
placeholder: '修改默认提示信息',
// 是否开启搜索功能:true/false,默认false
search: true,
// 一些可定制的样式
style: {
folder: {
enable: true
},
line: {
enable: true
}
},
// 点击回调(可以获取到点击时候的值)
click: function(d){
$('#tree').val(d.current.id);
},
// 加载完成后的回调函数
success: function (d) {
//选中节点,根据id筛选
treeSelect.checkNode('tree',$("#tree").val()); //获取zTree对象,可以调用zTree方法
var treeObj = treeSelect.zTree('tree'); }
});

4.PHP接口(这里根据自己的需求写好接口处理成树形接口,返回方式必须是json格式)

public function  getAllRule(){
$list = $this->modelSystemMenuModel->field(['id', 'pid', 'name'])->order('sort desc,id desc')
->select()
->toArray();
$list = list_to_tree($list);
array_unshift($list, ['id' => 0, 'pid' => -1, 'name' => '顶级菜单']); return json($list);
}
function list_to_tree($list, $pk = 'id', $pid = 'pid', $child = 'children', $root = 0) {
// 创建Tree
$tree = array(); if (is_array($list)) {
// 创建基于主键的数组引用
$refer = array();
foreach ($list as $key => $data) {
$refer[$data[$pk]] = & $list[$key];
}
foreach ($list as $key => $data) {
// 判断是否存在parent
$parentId = $data[$pid];
if ($root == $parentId) {
$tree[] = & $list[$key];
} else {
if (isset($refer[$parentId])) {
$parent = & $refer[$parentId];
$parent[$child][] = & $list[$key];
}
}
}
}
return $tree;
}

下面就是完成后的显示样子

作者:dream

layui treeSelect的更多相关文章

  1. Layui treeSelect 回写与对应选中

    今天遇到个问题就是Layui treeSelect 的回写与特定选中,网络上居然没啥资料,有的也是不全的,于是花了点时间处理好了,这里写一下,方便以后有遇到的朋友借鉴. 一.父页面 二.Form编辑框 ...

  2. 小白开学Asp.Net Core 《九》

    小白开学Asp.Net Core <九> — — 前端篇(不务正业) 在<小白开学Asp.Net Core 三>中使用了X-admin 2.x 和 Layui将管理后端的界面重 ...

  3. layui 集成第三方和自定义组件到模块规范

    1.新建一个layui.extend.js文件,页面调用时这个文件放到layui.js后面. 2.基础的配置卸载config中,扩展的组件写入extend,组件的路径是相对于config下base的路 ...

  4. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  5. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  6. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  8. 关于layui

    之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.

  9. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

随机推荐

  1. 从遇见到信任 | Apache Dubbo 的毕业之旅

    所谓信任,就是多一次机会. 2018年2月16日,Apache Dubbo 加入 Apache 基金会孵化器. ... 2019年5月16日,Apache 软件基金会董事会决议通过了 Apache D ...

  2. [Offer收割]编程练习赛108 - 树上的最短边 树链剖分

    直接点权下放到边权,每次查询从dfs序的st[u]+1,ed[v]之间查询, #include<iostream> #include<stdio.h> #include< ...

  3. 传说中Python最难理解的点|看这完篇就够了(装饰器)

    https://mp.weixin.qq.com/s/B6pEZLrayqzJfMtLqiAfpQ 1.什么是装饰器 网上有人是这么评价装饰器的,我觉得写的很有趣,比喻的很形象 每个人都有的内裤主要是 ...

  4. idea乱码问题(全)

    中文乱码问题分类: 编码普通中文乱码 properties文件中文乱码 console控制台中文乱码 搜索框中文乱码 svn注释中文乱码 问题截图: 2.properties文件中文乱码 4,.搜索框 ...

  5. 禁用GPU版本TensorFlow,切换到CPU版本TensorFlow。

    #禁用gpu版本TensorFlow,因为CUDA号码从0开始,这里直接让CUDA使用-1的GPU,自然就无法使用gpu了. 代码前面加入: import osos.environ["CUD ...

  6. ThinkPHP5.1接收post、get参数

    我们要先认识的是请求对象Request类 <?php//要用Request类 第一步就要引入他,才能在当前控制器上使用//知识点:use 与 namespace前面不可有空格等其他操作.name ...

  7. 【原生JS】图片预加载之有序预加载

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  8. Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow pip命令

    引言: Tensorflow大名鼎鼎,这里不再赘述其为何物.这里讲描述在安装python包的时候碰到的“No matching distribution found for tensorflow”,其 ...

  9. [转]VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)

    源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...

  10. [C++] 获取IE代理服务器的账号密码

    很多程序需要使用'浏览器设置'的代理服务器,IE设置的代理服务器有可能是需要账号密码的.怎样编程获取浏览器设置的代理服务器的账号密码呢? InternetQueryOption(NULL, INTER ...