layui表格内下拉框联动的实现 layui2.8.18

ylens

已于 2023-11-27 23:57:04 修改

阅读量792

点赞数 11

文章标签： layui

于 2023-11-27 23:52:41 首次发布

本文链接：https://blog.csdn.net/ylens/article/details/134657376

版权

自己要用到，找了好久CSDN，找到一篇，但不能在layui 2.8.18 的demo下运行，只是稍加改动，好用，特贴出，共享。
layui 2.8.18测试链接：https://layui.dev/playground/2/

layui 2.8.18 表格内下拉框联动的实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>
  <link href="//cdn.staticfile.org/layui/2.8.18/css/layui.css" rel="stylesheet">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
/* 防止下拉框的下拉列表被隐藏---必须设置--- */
.layui-table-cell {
overflow: visible;
}
  </style>
</head>
<body>
 
<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删 除</a>
</script>
 <script type="text/html" id="checkChildTypeTpl">
    <select name="{{d.name}}" lay-filter="{{d.filter}}">
        <option value=""></option>
{{# layui.each(d.data, function(index,item){ }}
        <option  value="{{item.value}}" {{item.value == d.value ? 'selected' : ''}}>{{item.name}}</option>
{{# }) }}

      </select>
</script>
   <script src="//cdn.staticfile.org/layui/2.8.18/layui.js"></script>
<script>
layui.config({
        version: '1586046995308' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'laytpl', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var layer = layui.layer //弹层
            , table = layui.table //表格
        var laytpl = layui.laytpl;
        var $ = layui.$;
        var form = layui.form;
//模拟ajax 同步获取数据  
        var checkChildTypeData = [{name: '男', value: '男'}, {name: '女', value: '女'}]
        //根据性别获取职业
        function getClassifyData(value) {
            if (value == '男') {
                return [{name: '作家', value: '作家'}, {name: '词人', value: '词人'}]
            } else if (value == '女') {
                return [{name: '画家', value: '画家'}, {name: '舞蹈', value: '舞蹈'}]
            }
            return [];
        }

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: '/static/json/2/table/user.json' //数据接口
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
                , {
                    event: 'sex', title: '性别', width: 80, sort: true, templet: function (d) {

                        return laytpl($('#checkChildTypeTpl').html()).render({
                            name: 'sex',
                            filter: 'sex',
                            value: d.sex,
                            data: checkChildTypeData
                        });
                    }
                }
                , {
                    event: 'classify', title: '职业', width: 80, templet: function (d) {
                        var classifyData = getClassifyData(d.sex)
                        return laytpl($('#checkChildTypeTpl').html()).render({
                            name: 'classify',
                            filter: 'classify',
                            value: d.classify,
                            data: classifyData
                        });
                    }
                }
                , {field: 'city', title: '城市', width: 150}
            ]], done: function () {
                layui.form.render();
            }
        });
        //操作栏操作按钮的事件
        table.on('tool(test)', function (obj) {
            switch (obj.event) {
                case 'sex':
                    form.on('select(sex)', function (data) {
                        //得到被选中的值
                        obj.update({sex: data.value});
                        var classifyData = getClassifyData(data.value)
                        //级联更新下拉
                        obj.tr.find('td[lay-event="classify"]>.layui-table-cell').html(laytpl($('#checkChildTypeTpl').html()).render({
                                name: 'classify',
                                filter: 'classify',
                                data: classifyData
                            })
                        );
                        form.render();
                    });

                    break;
            }
        });
    });
</script>
</body>
</html>