layui表格下拉框选中后行获取

原创于 2023-11-23 11:14:33 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

本文介绍了如何使用layui框架构建一个前端学生基础维护系统，包括表格展示、下拉框选择和Ajax请求，展示了如何实现实时数据绑定和动态更新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>学生基础维护</title>
    <link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
    <style>
        /*设置下拉框高度和表格单元格相同*/
      td .layui-form-select{
         margin-top:-10px;
         margin-left:-15px;
         margin-right:-15px;
        }
      .layui-table-cell{
          overflow:visible;
      }
       .layui-table-box{
          overflow:visible;
      }
        .layui-table-body{
          overflow:visible;
      }
    </style>
</head>
<body>

    <div class="container-fluid">
        <div class="row  mt-3">
            <div class="col-1 mr-auto">
                <button type="button" class="btn btn-sm btn-primary" onclick="InserClassclick()">保存</button>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-sm btn-primary" onclick="openGrade()">批量设置班级</button>
                <button type="button" class="btn btn-sm btn-primary" onclick="openSpecialty()">批量设置课程</button>
               
            </div>
        </div>
        <div class="row">
            <div class="col">
                <table id="tabAcademe" lay-filter="tabAcademe"></table>
            </div>
        </div>
    </div>
    <script src="~/Plugins/jquery-3.2.1.min.js"></script>
    <script src="~/Plugins/layui/layui.js"></script>
    <script>
        var tabAcademe;
        var layer, layuiTable, form;

        $(function () {
            layui.use(['layer', 'table', 'form'], function () {
                layer = layui.layer,
                layuiTable = layui.table;
                form = layui.form;

                //初始化学生信息表
                tabAcademe = layuiTable.render({
                    elem: '#tabAcademe',
                    url: "/StudentManagement/StudentTeacher/selectStudently",
                    cols: [[//表头
                        { type: "checkbox", fixed: "left" },
                        { type: "numbers", title: "序号" },
                        { field: "studentID", title: "studentID", hide: true },
                        { field: "SpecialtyID", title: "SpecialtyID", hide: true },
                        { field: "RecruitStudentID", title: "RecruitStudentID", hide: true },
                        { field: "RecruitStudentName", title: "姓名", align: "center" },
                        { field: "RecruitStudentSex", title: "性别", align: "center"},
                        { field: "SpecialtyName", title: "专业名称", align: "center" },
                        { field: "RecruitIDcard", title: "身份证号", align: "center"},
                        { field: "Dateofbirth", title: "出生日期", align: "center" },
                        { field: "ClassID", title: '班级', templet: ClassName },
                    ]],
                    page: {
                        limit: 10,//指定每页显示的条数
                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                    },
                    data: [],
                    done: function (res, curr, count) {
                        tabAcademe = res.data;
                        //去掉下拉框失焦事件否则在下拉框里输入值
                        $('.layui-form-select').find('input').unbind("blur");
                        //表格重载回显下拉框里的数据
                        $('tr').each(function (e) {
                            var $cr = $(this);
                            var dataIndex = $cr.attr("data-index");
                            $.each(tabAcademe, function (index, value) {
                                if (value.LAY_TNDEX == dataIndex) {
                                    $cr.find('input').val(value.ClassName);
                                }
                            });
                        });
                    }                 
                });         
              //  表格中下拉框点击事件
                form.on('select(Classname)', function (data) {
                    //获取下拉框选中的值
                    var elem = data.othis.parents('tr');
                    var dataindex = elem.attr("data-index");
                    $.each(tabAcademe, function (index, value) {
                        if (value.LAY_TABLE_INDEX == dataindex) {
                            value.ClassID = data.value;//把选中下拉框id值赋值给表格缓存
                        }
                    });            
                });
            });
        });

        //自定义班级下拉框
        function ClassName() {
            var str = '<select lay-filter="Classname">';
            $.ajax({
                url: '/StudentManagement/StudentTeacher/selectClassName',
                type: 'post',
                async: false,
                success: function (data) {
                    for (i in data) {
                        str+='<option value='+data[i].id+'>'+data[i].text+'</option>';
                    }
                    str += '</select>';
                }
            });
            return str;
        }     
    </script>
</body>
</html>

在这里插入图片描述