<!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); // 得