代码拉取完成,页面将自动刷新
同步操作将从 一夏coco/lay_cascader 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/layui@2.9.10/dist/css/layui.css"/>
<!-- <link rel="stylesheet" type="text/css" href="./cascader/cascader.css"/>-->
<script src="https://unpkg.com/layui@2.9.10/dist/layui.js"></script>
<script src="./cascader/cascader.js?css=true"></script>
<script src="./data/options.js"></script>
<title>LayCascader级联组件演示</title>
<style>
.layui-colla-content {
max-height: 450px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<!--基础用法-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>基础用法</legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">默认 click 触发子菜单</div>
<div style="margin: 10px 20px;"><input id="demo1"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo1"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo1',
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">hover 触发子菜单</div>
<div style="margin: 10px 20px;"><input id="demo2"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo2"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo2',
options: options,
props: {
expandTrigger: 'hover'
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">默认 click 触发子菜单-监听选中变更</div>
<div style="margin: 10px 20px;"><input id="demo1_1"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo1_1"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
var demo1_1 = layCascader({
elem: '#demo1_1',
options: options
});
demo1_1.changeEvent(function (value, node) {
layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">hover 触发子菜单-获取当前选中值</div>
<div style="margin: 10px 20px;"><input id="demo2_1"/>
<button id="demo2_1_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
获取当前选中值
</button>
</div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo2_1"/>
<button id="demo2_1_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">获取当前选中值</button>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
var demo2_1 = layCascader({
elem: '#demo2_1',
options: options,
props: {
expandTrigger: 'hover'
}
});
$('#demo2_1_click').click(function () {
// 这里是单选,获取的是一个值,如果是多选则是一个数组
var value = demo2_1.getCheckedValues();
var node = demo2_1.getCheckedNodes();
if (!value) {
layer.msg('未选中值');
return;
}
layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--禁用选项-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>禁用选项</legend>
</fieldset>
<blockquote class="layui-elem-quote">通过在数据源中设置 disabled 字段来声明该选项是禁用的</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-panel">
<div class="layui-card">
<div style="margin: 10px 20px;"><input id="demo3"/></div>
<div class="layui-card-body">
<div class="layui-collapse option2">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo3"/>
/*本例中,options指定的数组中的第一个元素含有disabled: true键值对,因此是禁用的。在默认情况下,Cascader 会检查数据中每一项的disabled字段是否为true,如果你的数据中表示禁用含义的字段名不为disabled,可以通过props.disabled属性来指定(详见下方 API 表格)。当然,value、label和children这三个字段名也可以通过同样的方式指定。*/
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
var options = [{
value: 'zhinan',
label: '指南',
disabled: true,
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
}, {
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}];
layCascader({
elem: '#demo3',
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--可清空-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>可清空</legend>
</fieldset>
<blockquote class="layui-elem-quote">通过 clearable 设置输入框可清空</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-panel">
<div class="layui-card">
<div style="margin: 10px 20px;"><input id="demo4"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo4"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo4',
clearable: true,
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--多选-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>多选</legend>
</fieldset>
<blockquote class="layui-elem-quote">可通过 props.multiple = true 来开启多选模式</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">默认显示所有Tag</div>
<div style="margin: 10px 20px;"><input id="demo5"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo5"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo5',
clearable: true,
options: options,
props: {
multiple: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">折叠展示Tag</div>
<div style="margin: 10px 20px;"><input id="demo6"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo6"/>
//在开启多选模式后,默认情况下会展示所有已选中的选项的Tag,你可以使用collapseTags来折叠Tag
//默认情况下折叠仅展示一条tag,你可以使用minCollapseTagsNumber来指定最小tag
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo6',
clearable: true,
collapseTags: true,
minCollapseTagsNumber: 2,
options: options,
props: {
multiple: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--选择任意一级选项-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>选择任意一级选项</legend>
</fieldset>
<blockquote class="layui-elem-quote">在单选模式下,你只能选择叶子节点;而在多选模式下,勾选父节点真正选中的都是叶子节点。启用该功能后,可让父子节点取消关联,选择任意一级选项。<br>可通过
props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">单选选择任意一级选项</div>
<div style="margin: 10px 20px;"><input id="demo7"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo7"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo7',
clearable: true,
options: options,
props: {
checkStrictly: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">多选选择任意一级选项</div>
<div style="margin: 10px 20px;"><input id="demo8"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo8"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo8',
clearable: true,
options: options,
props: {
multiple: true,
checkStrictly: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--仅显示最后一级-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>仅显示最后一级</legend>
</fieldset>
<blockquote class="layui-elem-quote">可以仅在输入框中显示选中项最后一级的标签,而不是选中项所在的完整路径。<br>属性showAllLevels定义了是否显示完整的路径,将其赋值为false则仅显示最后一级
</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">仅显示最后一级</div>
<div style="margin: 10px 20px;"><input id="demo9"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo9"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo9',
showAllLevels: false,
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--可搜索-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>可搜索</legend>
</fieldset>
<blockquote class="layui-elem-quote">
将filterable赋值为true即可打开搜索功能,默认会匹配节点的label或所有父节点的label(由showAllLevels决定)中包含输入值的选项。你也可以用filterMethod自定义搜索逻辑,接受一个函数,第一个参数是节点node,第二个参数是搜索关键词keyword,通过返回布尔值表示是否命中。
</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">单选可搜索</div>
<div style="margin: 10px 20px;"><input id="demo10"/>
<button id="demo10_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
改变组件禁用状态
</button>
</div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo10"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo10',
clearable: true,
filterable: true,
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">多选可搜索</div>
<div style="margin: 10px 20px;"><input id="demo11"/>
<button id="demo11_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
改变组件禁用状态
</button>
</div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo11"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo11',
clearable: true,
filterable: true,
options: options,
props:{
multiple: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">单选无关联可搜索</div>
<div style="margin: 10px 20px;"><input id="demo12"/>
<button id="demo12_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
改变组件禁用状态
</button>
</div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo12"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo12',
filterable: true,
clearable: true,
options: options,
props: {
checkStrictly: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">多选无关联可搜索</div>
<div style="margin: 10px 20px;"><input id="demo13"/>
<button id="demo13_click" type="button" class="layui-btn layui-btn-primary layui-border-blue">
改变组件禁用状态
</button>
</div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo13"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#demo13',
options: options,
filterable: true,
clearable: true,
props: {
checkStrictly: true,
multiple: true
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--回显-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>回显</legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">单选回显</div>
<div style="margin: 10px 20px;"><input id="danXuanHuiXian"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="danXuanHuiXian"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
elem: '#danXuanHuiXian',
value: 'dingbudaohang',
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">多选回显</div>
<div style="margin: 10px 20px;"><input id="duoXuanHuiXian"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="duoXuanHuiXian"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
clearable: true,
disabledFixed: true, //固定禁用项,使禁用项不被清理删除,禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加
props: {
multiple: true
},
elem: '#duoXuanHuiXian',
value: ['yizhi', 'dingbudaohang', 'layout', 'cexiangdaohang'],
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">单选无关联回显</div>
<div style="margin: 10px 20px;"><input id="danXuanHuiXian2"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="danXuanHuiXian2"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
props: {
checkStrictly: true
},
elem: '#danXuanHuiXian2',
value: 'shejiyuanze',
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">多选无关联回显</div>
<div style="margin: 10px 20px;"><input id="duoXuanHuiXian2"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="duoXuanHuiXian2"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
props: {
multiple: true,
checkStrictly: true
},
disabledFixed: true, //固定禁用项,使禁用项不被清理删除,禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加
clearable: true,
elem: '#duoXuanHuiXian2',
value: ['shejiyuanze', 'layout', 'cexiangdaohang'],
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--多选数量限制-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>多选数量限制</legend>
</fieldset>
<blockquote class="layui-elem-quote">
通过maxSize开启多选最大数量限制,该属性对单选无效果。默认值为0,表示的是无限制选中最大个数,大于0则表示限制选中个数。
</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-panel">
<div class="layui-card">
<div class="layui-card-header">多选数量限制</div>
<div style="margin: 10px 20px;"><input id="demo15"/></div>
<div class="layui-card-body">
<div class="layui-collapse option">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo15"/>
layui.use('layCascader', function () {
var layCascader = layui.layCascader;
layCascader({
clearable: true,
maxSize: 3,
props: {
multiple: true
},
elem: '#demo15',
options: options
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--动态加载-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>动态加载</legend>
</fieldset>
<blockquote class="layui-elem-quote">
通过lazy开启动态加载,并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数,第一个参数node为当前点击的节点,第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态,还可以对节点数据添加是否为叶子节点的标志位
(默认字段为leaf,可通过props.leaf修改),否则会简单的以有无子节点来判断是否为叶子节点。
</blockquote>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-panel">
<div class="layui-card">
<div style="margin: 10px 20px;"><input id="demo14"/></div>
<div class="layui-card-body">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">代码</h2>
<div class="layui-colla-content">
<pre class="layui-code">
<input id="demo14"/>
layui.use('layCascader', function () {
var id = 0;
// 动态加载
layCascader({
elem: '#demo14',
props: {
lazy: true,
lazyLoad: function(node, resolve) {
var level = node.level;
setTimeout(function () {
var nodes = Array.from({length: level + 2})
.map(function (item) {
return {
value: ++id,
label: '选项' + id,
leaf: level >= 1
};
});
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>Attributes</legend>
</fieldset>
<div class="layui-form" style="margin: 0 40px;">
<table class="layui-table">
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>elem</td>
<td>绑定元素</td>
<td>String/jqueryObject/DOM</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>预设值</td>
<td>Object/Array</td>
<td>-</td>
<td>null</td>
</tr>
<tr>
<td>props</td>
<td>配置选项,具体见下表</td>
<td>Object</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>options</td>
<td>可选项数据源,键名可通过 props 属性配置</td>
<td>Array</td>
<td>-</td>
<td>[]</td>
</tr>
<tr>
<td>empty</td>
<td>无匹配选项时的内容</td>
<td>String</td>
<td>-</td>
<td>'暂无数据'</td>
</tr>
<tr>
<td>placeholder</td>
<td>输入框占位文本</td>
<td>String</td>
<td>-</td>
<td>'请选择'</td>
</tr>
<tr>
<td>disabled</td>
<td>是否禁用</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>clearable</td>
<td>是否支持清空选项</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>showAllLevels</td>
<td>输入框中是否显示选中值的完整路径</td>
<td>Boolean</td>
<td>true / false</td>
<td>true</td>
</tr>
<tr>
<td>collapseTags</td>
<td>多选模式下是否折叠Tag</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>minCollapseTagsNumber</td>
<td>最小折叠标签数</td>
<td>Number</td>
<td>-</td>
<td>1</td>
</tr>
<tr>
<td>separator</td>
<td>选项分隔符</td>
<td>String</td>
<td>-</td>
<td>' / '</td>
</tr>
<tr>
<td>filterable</td>
<td>是否可搜索选项</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>filterMethod</td>
<td>自定义搜索逻辑,第一个参数是节点node,第二个参数是搜索关键词keyword,通过返回布尔值表示是否命中</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>debounce</td>
<td>搜索关键词输入的去抖延迟,毫秒</td>
<td>Number</td>
<td>-</td>
<td>300</td>
</tr>
<tr>
<td>beforeFilter</td>
<td>筛选之前的钩子,参数为输入的值,若返回 false,则停止筛选</td>
<td>Function</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>popperClass</td>
<td>自定义浮层类名</td>
<td>String</td>
<td>-</td>
<td>''</td>
</tr>
<tr>
<td>extendClass</td>
<td>继承class样式</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>extendStyle</td>
<td>继承style样式</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>disabledFixed</td>
<td>固定禁用项,使禁用项不被清理删除,禁用项只能通过函数添加或初始值添加,默认禁用项不可被函数或初始值添加</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>maxSize</td>
<td>多选选中的最大数量,0表示不限制</td>
<td>Number</td>
<td>>=0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>Props</legend>
</fieldset>
<div class="layui-form" style="margin: 0 40px;">
<table class="layui-table">
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>strictMode</td>
<td>严格模式,设置value严格按照层级结构.获取的value和Node也将按照层级结构返回.<br/>例如:<br/>多选:[['zhinan','shejiyuanze','yizhi']]<br/>单选:['zhinan','shejiyuanze','yizhi']
</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>expandTrigger</td>
<td>次级菜单的展开方式</td>
<td>String</td>
<td>click / hover</td>
<td>'click'</td>
</tr>
<tr>
<td>multiple</td>
<td>是否多选</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>checkStrictly</td>
<td>是否严格的遵守父子节点不互相关联</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>lazy</td>
<td>是否动态加载子节点,需与 lazyLoad 方法结合使用</td>
<td>Boolean</td>
<td>true / false</td>
<td>false</td>
</tr>
<tr>
<td>lazyLoad</td>
<td>加载动态数据的方法,仅在 lazy 为 true 时有效</td>
<td>Function(node, resolve),node为当前点击的节点,resolve为数据加载完成的回调(必须调用)</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>value</td>
<td>指定选项的值为选项对象的某个属性值</td>
<td>String</td>
<td>-</td>
<td>'value'</td>
</tr>
<tr>
<td>label</td>
<td>指定选项标签为选项对象的某个属性值</td>
<td>String</td>
<td>-</td>
<td>'label'</td>
</tr>
<tr>
<td>children</td>
<td>指定选项的子选项为选项对象的某个属性值</td>
<td>String</td>
<td>-</td>
<td>'children'</td>
</tr>
<tr>
<td>disabled</td>
<td>指定选项的禁用为选项对象的某个属性值(可以配合禁用固定项disabledFixed使用)</td>
<td>String</td>
<td>-</td>
<td>'disabled'</td>
</tr>
<tr>
<td>leaf</td>
<td>指定选项的叶子节点的标志位为选项对象的某个属性值</td>
<td>String</td>
<td>-</td>
<td>'leaf'</td>
</tr>
</tbody>
</table>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>Option</legend>
</fieldset>
<div class="layui-form" style="margin: 0 40px;">
<table class="layui-table">
<thead>
<tr>
<th>选项名称</th>
<th>说明</th>
<th>类型</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>指定选项的值</td>
<td>String、Number、Array</td>
<td>'1'、1、[1]、[[1,2],[1,3]]</td>
</tr>
<tr>
<td>label</td>
<td>指定选项标签</td>
<td>String</td>
<td>'广东'</td>
</tr>
<tr>
<td>children</td>
<td>指定选项的子选项</td>
<td>Array<Option></td>
<td>[{label: '广东', value: 'guangdong'}]</td>
</tr>
<tr>
<td>disabled</td>
<td>指定选项是否禁用</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>leaf</td>
<td>指定选项是否是叶子节点</td>
<td>Boolean</td>
<td>true</td>
</tr>
</tbody>
</table>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>Event</legend>
</fieldset>
<div class="layui-form" style="margin: 0 40px;">
<table class="layui-table">
<thead>
<tr>
<th>方法名</th>
<th>说明</th>
<th>参数</th>
</tr>
</thead>
<tbody>
<tr>
<td>setOptions</td>
<td>设置当前选项</td>
<td>Array</td>
</tr>
<tr>
<td>setValue</td>
<td>覆盖当前值.单选时传对象,多选时传数组</td>
<td>非严格模式下。<br>单选:options中的value值<br>多选:options中的value值组成的数组<br>例如:<br>layCascader.setValue('yizhi')<br>layCascader.setValue(['yizhi','table'])
</td>
</tr>
<tr>
<td>changeEvent</td>
<td>当节点变更时,执行回调<br>多选时,参数是一个数组</td>
<td>单选:function(value,Node){}<br>多选:function(values,Nodes){}</td>
</tr>
<tr>
<td>openEvent</td>
<td>当面板打开时,执行回调</td>
<td>function(){}</td>
</tr>
<tr>
<td>closeEvent</td>
<td>当面板关闭时,执行回调</td>
<td>function(){}</td>
</tr>
<tr>
<td>destroyEvent</td>
<td>当面板销毁时,执行回调</td>
<td>function(){}</td>
</tr>
<tr>
<td>disabled</td>
<td>禁用组件</td>
<td>Boolean</td>
</tr>
<tr>
<td>open</td>
<td>展开面板</td>
<td>-</td>
</tr>
<tr>
<td>close</td>
<td>收起面板</td>
<td>-</td>
</tr>
<tr>
<td>destroy</td>
<td>销毁组件。销毁组件后不允许再次调用对象方法,但可以使用构造方法重新初始化组件。</td>
<td>-</td>
</tr>
<tr>
<td>getCheckedNodes</td>
<td>获取选中的节点,如需获取路径,使用node.path获取,将获取各级节点的node对象。严格模式下返回包含父级的层级结构</td>
<td>-</td>
</tr>
<tr>
<td>getCheckedValues</td>
<td>获取选中的值.严格模式下返回包含父级的层级结构</td>
<td>-</td>
</tr>
<tr>
<td>clearCheckedNodes</td>
<td>清空选中的节点</td>
<td>Boolean: 是否强制删除固定的禁用项,默认不会清空禁用项</td>
</tr>
<tr>
<td>expandNode</td>
<td>展开面板到节点所在的层级</td>
<td>value: 节点值,只能传单个值,不允许传数组</td>
</tr>
<tr>
<td>getConfig</td>
<td>获取当前配置副本</td>
<td>-</td>
</tr>
<tr>
<td>setConfig</td>
<td>设置配置参数</td>
<td>Object,参考Attributes</td>
</tr>
<tr>
<td>getData</td>
<td>获取数据对象副本</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--您的Layui代码start-->
<script type="text/javascript">
layui.use(['element', 'code', 'layCascader', 'layer', 'jquery'], function () {
var layer = layui.layer;
var element = layui.element;
var $ = layui.jquery;
var layCascader = layui.layCascader;
var optionContent = $('<div class="layui-colla-item">\n' +
' <h2 class="layui-colla-title">选项</h2>\n' +
' <div class="layui-colla-content"><pre class="layui-code">' + JSON.stringify(options, null, 2) + '</pre></div>\n' +
'</div>');
var optionContent2 = $('<div class="layui-colla-item">\n' +
' <h2 class="layui-colla-title">选项</h2>\n' +
' <div class="layui-colla-content"><pre class="layui-code">' + JSON.stringify(options2, null, 2) + '</pre></div>\n' +
'</div>');
$('.layui-collapse.option').append(optionContent);
$('.layui-collapse.option2').append(optionContent2);
element.render('collapse');
layui.code();
// 默认 click 触发子菜单
layCascader({
elem: '#demo1',
options: options
});
// hover 触发子菜单
layCascader({
elem: '#demo2',
options: options,
props: {
expandTrigger: 'hover'
}
});
// 默认 click 触发子菜单-监听值变更
var demo1_1 = layCascader({
elem: '#demo1_1',
options: options
});
demo1_1.changeEvent(function (value, node) {
layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
});
// hover 触发子菜单 获取当前选中菜单
var demo2_1 = layCascader({
elem: '#demo2_1',
options: options,
props: {
expandTrigger: 'hover'
}
});
$('#demo2_1_click').click(function () {
// 这里是单选,获取的是一个值,如果是多选则是一个数组
var value = demo2_1.getCheckedValues();
var node = demo2_1.getCheckedNodes();
if (!value) {
layer.msg('未选中值');
return;
}
layer.msg('value:' + value + ',Node:' + JSON.stringify(node.data));
});
// 禁用选项
layCascader({
elem: '#demo3',
options: options2
});
// 可清空
layCascader({
elem: '#demo4',
clearable: true,
options: options
});
// 多选-默认显示所有Tag
layCascader({
elem: '#demo5',
clearable: true,
options: options,
props: {
multiple: true
}
});
// 多选-折叠展示Tag
layCascader({
elem: '#demo6',
clearable: true,
collapseTags: true,
minCollapseTagsNumber: 2,
options: options,
props: {
multiple: true
}
});
// 单选选择任意一级选项
layCascader({
elem: '#demo7',
clearable: true,
options: options,
props: {
checkStrictly: true
}
});
// 多选选择任意一级选项
layCascader({
elem: '#demo8',
clearable: true,
options: options,
props: {
multiple: true,
checkStrictly: true
}
});
// 仅显示最后一级
layCascader({
elem: '#demo9',
showAllLevels: false,
clearable: true,
options: options
});
// 单选可搜索
var demo10 = layCascader({
elem: '#demo10',
filterable: true,
clearable: true,
options: options
});
$('#demo10_click').click(function () {
var config = demo10.getConfig();
demo10.disabled(!config.disabled);
})
// 多选可搜索
var demo11 = layCascader({
elem: '#demo11',
options: options,
filterable: true,
clearable: true,
props: {
multiple: true
}
});
$('#demo11_click').click(function () {
var config = demo11.getConfig();
demo11.disabled(!config.disabled);
})
// 单选无关联可搜索
var demo12 = layCascader({
elem: '#demo12',
filterable: true,
clearable: true,
options: options,
props: {
checkStrictly: true
}
});
$('#demo12_click').click(function () {
var config = demo12.getConfig();
demo12.disabled(!config.disabled);
})
// 多选无关联可搜索
var demo13 = layCascader({
elem: '#demo13',
options: options,
filterable: true,
clearable: true,
props: {
checkStrictly: true,
multiple: true
}
});
$('#demo13_click').click(function () {
var config = demo13.getConfig();
demo13.disabled(!config.disabled);
})
// 单选回显
layCascader({
// disabled: true,
clearable: true,
elem: '#danXuanHuiXian',
value: 'yizhi',
options: options
});
// 多选回显
layCascader({
clearable: true,
disabledFixed: true, //固定禁用项
props: {
multiple: true
},
elem: '#duoXuanHuiXian',
value: ['yizhi', 'dingbudaohang', 'layout', 'cexiangdaohang'],
options: options
});
// 多选数量限制
layCascader({
clearable: true,
maxSize: 3,
filterable: true,
props: {
multiple: true
},
elem: '#demo15',
options: options
});
// 单选无关联回显
layCascader({
props: {
checkStrictly: true
},
clearable: true,
elem: '#danXuanHuiXian2',
value: 'shejiyuanze',
options: options
});
// 多选无关联回显
layCascader({
props: {
multiple: true,
checkStrictly: true
},
disabledFixed: true, //固定禁用项
clearable: true,
elem: '#duoXuanHuiXian2',
value: ['shejiyuanze', 'layout', 'cexiangdaohang'],
options: options
});
var id = 0;
// 动态加载
layCascader({
elem: '#demo14',
props: {
lazy: true,
lazyLoad: function (node, resolve) {
var level = node.level;
setTimeout(function () {
var nodes = Array.from({length: level + 2})
.map(function (item) {
return {
value: ++id,
label: '选项' + id,
leaf: level >= 1
};
});
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。