<!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>