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

layui 专栏收录该内容
3 篇文章 0 订阅

可把下列代码在https://www.layui.com/demo地址内演示

<!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 rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1586046995308" media="all">
  <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="//res.layui.com/layui/dist/layui.js?t=1586046995308"></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: '/demo/table/user/' //数据接口
            , 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> 
  • 1
    点赞
  • 2
    评论
  • 11
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

二字十一画与

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值