layui treeSelect
官方地址: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的更多相关文章
- Layui treeSelect 回写与对应选中
今天遇到个问题就是Layui treeSelect 的回写与特定选中,网络上居然没啥资料,有的也是不全的,于是花了点时间处理好了,这里写一下,方便以后有遇到的朋友借鉴. 一.父页面 二.Form编辑框 ...
- 小白开学Asp.Net Core 《九》
小白开学Asp.Net Core <九> — — 前端篇(不务正业) 在<小白开学Asp.Net Core 三>中使用了X-admin 2.x 和 Layui将管理后端的界面重 ...
- layui 集成第三方和自定义组件到模块规范
1.新建一个layui.extend.js文件,页面调用时这个文件放到layui.js后面. 2.基础的配置卸载config中,扩展的组件写入extend,组件的路径是相对于config下base的路 ...
- layui常用方法
很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...
- 开源网站.NETMVC+ Layui+SqlSugar+RestSharp
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 日期时间组件 - layui.laydate
全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...
- 关于layui
之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.
- 日期控件,layui
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...
随机推荐
- 当pip安装因为网络超时而无法安装的时候慢
2.4 尝试pip --default-timeout=1000 install https://download.pytorch.org/whl/cu100/torch-1.1.0-cp36-cp ...
- UISearchDisplayController “No Results“ cancel修改
Recently I needed to fully customize a UISearchBar, so here are some basic "recipes" on ho ...
- canvas简单动画
实现场景:定义一个1000*800的方框,圆球在其中移动,碰撞到边框弹回的动画.方框背景是半径为10的小圆球组成.鼠标移动到移动圆球时,圆球停止运动. html代码: <div> < ...
- 基于Mysql实现分布式锁
一.分布式锁要解决的问题 可以保证在分布式部署的应用集群中,同一个方法在同一时间只能被一台机器上的一个线程执行. 这把锁要是一把可重入锁(避免死锁) 这把锁最好是一把阻塞锁(根据业务需求考虑要不要这条 ...
- NLP突破性成果 BERT 模型详细解读 bert参数微调
https://zhuanlan.zhihu.com/p/46997268 NLP突破性成果 BERT 模型详细解读 章鱼小丸子 不懂算法的产品经理不是好的程序员 关注她 82 人赞了该文章 Goo ...
- HDU1686 Oulipo 题解 KMP算法
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1686 题目大意:给你一个子串t和一个母串s,求s中有多少个子串t. 题目分析:KMP模板题. cal_ ...
- HDU3336 Count the string 题解 KMP算法
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3336 题目大意:找出字符串s中和s的前缀相同的所有子串的个数. 题目分析:KMP模板题.这道题考虑 n ...
- [转]SpringBoot整合Swagger2以及生产环境的安全问题处理
1.创建springboot项目 https://www.cnblogs.com/i-tao/p/8878562.html 这里我们使用多环境配置: application-dev.yml(开发环境) ...
- Python--day23--初识面向对象复习
面向对象编程是大程序编程思想:
- 2018-2-13-wpf-使用-Dispatcher.Invoke-冻结窗口
title author date CreateTime categories wpf 使用 Dispatcher.Invoke 冻结窗口 lindexi 2018-2-13 17:23:3 +080 ...