layui多选级联选择器_layui多选级联选择器,layui级联选择器资源-CSDN文库

共112个文件

gif：75个

js：23个

css：6个

layui

级联选择器

多选级联选择器

无限级联选择器

需积分: 50 90 浏览量 2021-02-23 10:59:56 上传评论 1 收藏 642KB RAR 举报

layui是一款流行的前端UI框架，以其简洁、优雅的代码风格和丰富的组件库深受开发者喜爱。在layui中，级联选择器是一种常用于数据层级关系展示和选择的组件，尤其适用于地区选择、部门结构等场景。本篇文章将深入探讨layui的多选级联选择器及其无限级联功能。我们要理解什么是级联选择器。级联选择器通常包含一个或多个下拉菜单，每个菜单的选择都会影响下一个菜单的内容，以此形成一种逐级递进的关系。在layui的实现中，级联选择器允许用户在一个层级结构中进行多选，提高了用户在大量数据中筛选信息的效率。要创建一个多选级联选择器，你需要在HTML中定义一个元素作为选择器容器，并为其添加layui的class属性，如`layui-cascader`。接下来，通过layui的JS接口初始化这个选择器，设置相应的配置项。例如： ```html <div id="cascadeDemo" class="layui-cascader"></div> ``` 在JavaScript中： ```javascript layui.use('form', function() { var form = layui.form; form.cascader({ elem: '#cascadeDemo' // 指定元素 ,data: [ // 数据，一般是从服务器获取，这里仅作示例 { value: '1' ,label: '浙江' ,children: [ { value: '101', label: '杭州' } ,{ value: '102', label: '宁波' } ] } ,{ value: '2' ,label: '广东' ,children: [ { value: '201', label: '广州' } ,{ value: '202', label: '深圳' } ] } ] ,isMulti: true // 设置为多选模式 ,change: function(value, item) { // 选择后的回调 console.log('当前选中的值：', value); console.log('对应的DOM对象：', item); } }); }); ``` 在这个例子中，`data`属性定义了级联选择器的数据源，`isMulti`参数设为`true`表示开启多选模式。`change`回调函数会在用户做出选择时被调用，提供当前选中的值和对应的DOM元素。对于无限级联选择器，layui提供了动态加载子级数据的功能。当用户展开某一节点时，可以通过异步请求获取其子级数据。这需要用到`load`事件，结合服务器端的数据接口来实现。例如： ```javascript layui.use('form', function() { var form = layui.form; form.cascader({ elem: '#cascadeDemo' ,isMulti: true ,change: function(value, item) { // 当展开某一节点时，获取其子级数据 if (item && item.data && !item.data.children) { form.cascaderLoad(item, function(data) { // 假设这是从服务器获取的数据 data = [ { value: '101', label: '杭州' } ,{ value: '102', label: '宁波' } ]; // 调用load接口加载数据 form.cascaderLoadDone(item, data); }); } } }); }); ``` 在实际应用中，你可能需要根据服务器返回的JSON数据格式来调整`cascaderLoad`和`cascaderLoadDone`的参数。同时，为了提供更好的用户体验，可以考虑添加加载提示和错误处理。 layui的多选级联选择器是一个强大且灵活的工具，可以轻松处理复杂的层级选择需求。通过合理的配置和适当的服务器交互，你可以构建出满足各种业务场景的级联选择功能。在使用过程中，一定要注意数据的处理和用户的交互体验，确保组件的易用性和稳定性。

资源详情

资源评论

资源推荐

收起资源包目录

layui多选级联选择器（112个子文件）

layui.css 73KB

layer.css 14KB

layui.mobile.css 10KB

laydate.css 7KB

cascader.css 3KB

code.css 1KB

iconfont.eot 46KB

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

index.html 5KB

layui.all.js 272KB

jquery.js 95KB

table.js 31KB

mobile.js 31KB

laydate.js 27KB

layer.js 22KB

layedit.js 12KB

colorpicker.js 11KB

tree.js 11KB

cascader.js 11KB

form.js 9KB

upload.js 7KB

layui.js 7KB

element.js 7KB

slider.js 7KB

transfer.js 6KB

laypage.js 4KB

共 112 条

<html lang="en"> <meta charset="utf-8"> <title>LayUI RC-Cascader</title> <link rel="stylesheet" href="./js/layui-v2.5.6/layui/css/layui.css"> <style> html, body { margin: 0; padding: 0; } .rc-cascader { width: 282px; } #app { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .main { padding: 16px; } </style> <body> <div id="app" class="main"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="areas" value="1000,1368,1398" lay-filter="areasChange" style="display: none;" /> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即提交</button> </div> </div> </form> </div> </body> <script src="./js/layui-v2.5.6/layui/layui.js"></script> <script type="text/javascript"> layui.config({ base: './ext/' }).extend({ cascader: 'cascader/cascader' }).use(['form', 'jquery', 'cascader'], function () { var $ = layui.jquery, cascader = layui.cascader, form = layui.form; var areaTree = '[{"id":1000,"province_city":"\u5317\u4eac","fid":"0","children":[{"id":1368,"province_city":"\u5317\u4eac\u5e02","fid":"1000","children":[{"id":1397,"province_city":"\u4e1c\u57ce\u533a","fid":"1368"},{"id":1398,"province_city":"\u897f\u57ce\u533a","fid":"1368"},{"id":1399,"province_city":"\u5d07\u6587\u533a","fid":"1368"},{"id":1400,"province_city":"\u5ba3\u6b66\u533a","fid":"1368"},{"id":1401,"province_city":"\u671d\u9633\u533a","fid":"1368"},{"id":1402,"province_city":"\u6d77\u6dc0\u533a","fid":"1368"},{"id":1403,"province_city":"\u4e30\u53f0\u533a","fid":"1368"},{"id":1404,"province_city":"\u77f3\u666f\u5c71\u533a","fid":"1368"},{"id":1405,"province_city":"\u623f\u5c71\u533a","fid":"1368"},{"id":1406,"province_city":"\u901a\u5dde\u533a","fid":"1368"},{"id":1407,"province_city":"\u987a\u4e49\u533a","fid":"1368"},{"id":1408,"province_city":"\u95e8\u5934\u6c9f\u533a","fid":"1368"},{"id":1409,"province_city":"\u660c\u5e73\u533a","fid":"1368"},{"id":1410,"province_city":"\u5927\u5174\u533a","fid":"1368"},{"id":1411,"province_city":"\u6000\u67d4\u533a","fid":"1368"},{"id":1412,"province_city":"\u5e73\u8c37\u533a","fid":"1368"},{"id":1413,"province_city":"\u5bc6\u4e91\u53bf","fid":"1368"},{"id":1414,"province_city":"\u5ef6\u5e86\u533a","fid":"1368"}]}]},{"id":1001,"province_city":"\u4e0a\u6d77","fid":"0","children":[{"id":1369,"province_city":"\u4e0a\u6d77\u5e02","fid":"1001","children":[{"id":1433,"province_city":"\u9ec4\u6d66\u533a","fid":"1369"},{"id":1434,"province_city":"\u5362\u6e7e\u533a","fid":"1369"},{"id":1435,"province_city":"\u5f90\u6c47\u533a","fid":"1369"},{"id":1436,"province_city":"\u957f\u5b81\u533a","fid":"1369"},{"id":1437,"province_city":"\u9759\u5b89\u533a","fid":"1369"},{"id":1438,"province_city":"\u666e\u9640\u533a","fid":"1369"},{"id":1439,"province_city":"\u95f8\u5317\u533a","fid":"1369"},{"id":1440,"province_city":"\u8679\u53e3\u533a","fid":"1369"},{"id":1441,"province_city":"\u6768\u6d66\u533a","fid":"1369"},{"id":1442,"province_city":"\u5b9d\u5c71\u533a","fid":"1369"},{"id":1443,"province_city":"\u95f5\u884c\u533a","fid":"1369"},{"id":1444,"province_city":"\u5609\u5b9a\u533a","fid":"1369"},{"id":1445,"province_city":"\u677e\u6c5f\u533a","fid":"1369"},{"id":1446,"province_city":"\u91d1\u5c71\u533a","fid":"1369"},{"id":1447,"province_city":"\u9752\u6d66\u533a","fid":"1369"},{"id":1448,"province_city":"\u6d66\u4e1c\u65b0\u533a","fid":"1369"},{"id":1449,"province_city":"\u5357\u6c47\u533a","fid":"1369"},{"id":1450,"province_city":"\u5949\u8d24\u533a","fid":"1369"},{"id":1451,"province_city":"\u5d07\u660e\u53bf","fid":"1369", "children": [{"id":14511,"province_city":"\u5d07\u660e\u53bf","fid":"1451"}]}]}]}]'; cascader.render({ elem: $('input[name=areas]')[0], multiple: true, showAllLevels: true, separator: "/", //显示文本的分隔符号（showAllLevels开启时生效）默认 / valueSeparator: ",", //选择值的级联分隔符号默认 , groupSeparator: "|", //多选时选择值的组分隔符号默认 | props: { label: 'province_city', value: 'id', children: 'children' }, options: JSON.parse(areaTree) }); form.on('submit(*)', function(data){ console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 }); }); </script> </html>