<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>formSelect使用文档 v1.0.4</title>
<link rel="stylesheet" href="../assets/layui/css/layui.css">
<link rel="stylesheet" href="doc.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<h1 class="site-h1">formSelect.js 下拉选择器使用文档</h1>
<small>当前版本：v1.0.4</small>
</div>
<hr>
<div class="layui-row" id="quick">
<blockquote class="layui-elem-quote">快速使用</blockquote>
<p>
下载地址：
<a href="https://gitee.com/wujiawei0926/treeselect" target="_blank">Gitee(码云)</a>
<a href='https://gitee.com/wujiawei0926/treeselect/stargazers'target="_blank"><img src='https://gitee.com/wujiawei0926/treeselect/badge/star.svg?theme=white' alt='star'></img></a>
<a href='https://gitee.com/wujiawei0926/treeselect/members'target="_blank"><img src='https://gitee.com/wujiawei0926/treeselect/badge/fork.svg?theme=white' alt='fork'></img></a>
</p>
<p>
使用文档：
<a href="https://gitee.com/wujiawei0926/treeselect" >Gitee Page</a>
</p>
<p>使用方式：</p>
<pre class="layui-code">
1. 引入layui.js
<script src="../assets/layui/layui.js"></script>
2. 在页面上添加input
<input type="text" id="tree" lay-filter="tree" class="layui-input"<
3. 加载formSelect模块
layui.config({
base: "../module/"
}).extend({
treeSelect: "treeSelect/treeSelect"
});
4. 初始化
layui.use(["treeSelect"], function () {
var treeSelect = layui.treeSelect;
treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: 'data/data3.json',
// 异步加载方式：get/post，默认get
type: 'get',
// 占位符
placeholder: '修改默认提示信息',
// 是否开启搜索功能：true/false，默认false
search: true,
// 一些可定制的样式
style: {
folder: {
enable: true
},
line: {
enable: true
}
},
// 点击回调
click: function(d){
console.log(d);
},
// 加载完成后的回调函数
success: function (d) {
console.log(d);
// 选中节点，根据id筛选
treeSelect.checkNode('tree', 3);
console.log($('#tree').val());
// 获取zTree对象，可以调用zTree方法
var treeObj = treeSelect.zTree('tree');
console.log(treeObj);
// 刷新树结构
treeSelect.refresh('tree');
}
});
});
</pre>
</div>
<div class="layui-row" id="param">
<blockquote class="layui-elem-quote">参数配置</blockquote>
<div class="">
<table lay-filter="param-table">
<thead>
<tr>
<th lay-data="{field:'key', sort:true}">属性名</th>
<th lay-data="{field:'name'}">说明</th>
<th lay-data="{field:'default'}">默认值</th>
<th lay-data="{field:'description'}">示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>指定原始input的选择器，必填</td>
<td>/</td>
<td>'#input'</td>
</tr>
<tr>
<td>data</td>
<td>异步数据地址，必填</td>
<td>/</td>
<td>'data/data3.json'</td>
</tr>
<tr>
<td>headers</td>
<td>请求头</td>
<td>/</td>
<td>{'token': 'xxx'}</td>
</tr>
<tr>
<td>type</td>
<td>异步请求方式：get/post</td>
<td>'get'</td>
<td>'get'</td>
</tr>
<tr>
<td>placeholder</td>
<td>占位符，input的提示文字</td>
<td>'请选择'</td>
<td>'修改默认提示信息'</td>
</tr>
<tr>
<td>search</td>
<td>是否开启搜索：true/false</td>
<td>true</td>
<td>true</td>
</tr>
<tr>
<td>style</td>
<td>样式定制项</td>
<td>/</td>
<td><a href="#style">详见style参数</a></td>
</tr>
<tr>
<td>click</td>
<td>点击回调函数</td>
<td>/</td>
<td><a href="#click">详见click回调</a></td>
</tr>
<tr>
<td>success</td>
<td>渲染完成回调函数</td>
<td>/</td>
<td><a href="#success">详见success回调</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="layui-row" id="style">
<blockquote class="layui-elem-quote">样式定制项</blockquote>
<p>支持一些简单的样式定制，后期版本将引入三方图标库并支持图标的自定义</p>
<pre class="layui-code">
treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: 'data/data3.json',
style: {
folder: { // 父节点图标
enable: true // 是否开启：true/false
},
line: { // 连接线
enable: true // 是否开启：true/false
}
},
});
</pre>
</div>
<div id="callback"></div>
<div class="layui-row" id="click">
<blockquote class="layui-elem-quote">点击回调</blockquote>
<p>树节点被点击时触发，返回一个object参数，携带三个成员：</p>
<pre class="layui-code">
treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: 'data/data3.json',
click: function(d){
console.log(d);
console.log(d.treeId); // 得到组件的id
console.log(d.current); // 得到点击节点的treeObj对象
console.log(d.data); // 得到组成树的数据
},
});
</pre>
</div>
<div class="layui-row" id="success">
<blockquote class="layui-elem-quote">渲染完成后回调</blockquote>
<p>组件渲染完成后触发，返回一个object参数，携带两个成员：</p>
<pre class="layui-code">
treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: 'data/data3.json',
success: function(d){
console.log(d);
console.log(d.treeId); // 得到组件的id
console.log(d.data); // 得
LayUI拓展组件：TreeSelect树形下拉选择器 （117个子文件） 
layui.css 68KB layer.css 14KB layui.mobile.css 10KB laydate.css 7KB code.css 1KB doc.css 541B iconfont.eot 40KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 0.gif 3KB 48.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB 54.gif 2KB 53.gif 2KB 56.gif 2KB 62.gif 2KB 31.gif 2KB 55.gif 2KB 35.gif 2KB 15.gif 2KB loading-2.gif 2KB 37.gif 1KB 68.gif 1KB 52.gif 777B loading-1.gif 701B
doc.html 14KB index.html 5KB layui.all.js 253KB jquery.js 95KB treeSelect.js 90KB mobile.js 33KB table.js 28KB laydate.js 27KB layer.js 22KB layedit.js 12KB colorpicker.js 11KB form.js 9KB slider.js 7KB element.js 7KB upload.js 7KB layui.js 7KB laypage.js 4KB carousel.js 4KB共 117 条
- 1
- 2
资源评论
