layui数据表格，加入自定义templet表单input元素，获取它的值并通过ajax传回后端

不念不忘少年蓝@ 2022-11-01 15:55 488阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all"/>
        <script type="text/javascript" th:src="@{/plugins/echarts/echarts.js}"></script>
        <script type="text/javascript" th:src="@{/plugins/layui/layui.all.js}"></script>
        <script type="text/javascript" th:src="@{/js/jquery3.min.js}"></script>
        <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
        <title>课程学生信息</title>
        <style>
            html,body{
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div class="layui-fluid" style="height: 100%">
    
        <fieldset class="layui-elem-field layui-field-title">
            <legend>课程学生信息</legend>
    
            <div class="layui-row">
                <table class="layui-hide" id="courseStudentLinkTable" lay-filter="tableOne"></table>
            </div>
        </fieldset>
    
    </div>
    
    
    
    <script type="text/html" id="checkboxLink">
        <input lay-filter="linkFilter" lay-event="linkEvent" type="checkbox" id="linkInput" name="linkInput" value="{
       {d.linkCourse}}" lay-skin="switch" lay-text="加入|移除"  {
       { d.linkCourse == 1 ? 'checked' : '' }}>
    </script>
    
    
    <script th:inline="javascript">
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        let submitAdminDepartment = [[${session.adminInfo.adminDepartment}]];
        //console.log("session = "+JSON.stringify(${session.adminInfo}));
    
    
    
        layui.use(['table','form'], function () {
            var submitSwitchValue;
            table.render({
                elem: '#courseStudentLinkTable'
                , url: '/adminController/getCourseStudentLinkController'
                , title: '课程学生信息'
                , id: 'tableOne'
                , where: {'courseNumber': parent.courseNumber,'departmentId':submitAdminDepartment}
                , page: true
                , cols: [                    //两个中括号不能写在一起，不然会被解析成thymeleaf表达式
                    [
                        , {field: 'id', width: 60, title: 'ID', sort: true}
                        , {field: 'stuUsername', width: 120, title: '学生学号', sort: true}
                        , {field: 'stuName', width: 150, title: '学生姓名', align: 'center'}
                        , {field: 'stuMajor', width: 200, title: '学生专业', align: 'center'}
                        , {field: 'linkCourse', width: 200, title: '是否加入课程', align: 'center', templet:'#checkboxLink' ,event:'linkEvent'}
    
                    ]
                ]
            });
    
            //监听开关操作
            form.on('switch(linkFilter)', function(formObj){
                if(formObj.elem.checked == true)
                {
    
                     submitSwitchValue = 1;
                     //console.log("submitSwitchValue = "+submitSwitchValue );
                }
                else if(formObj.elem.checked == false)
                {
                     submitSwitchValue = 0;
                     //console.log("submitSwitchValue = "+submitSwitchValue );
                }
            });
    
            table.on('tool(tableOne)', function (obj) {
                let toolData = obj.data;
                let submitData = new Object();
                submitData.stuUsername = toolData.stuUsername;
                submitData.courseNumber = parent.courseNumber;
                if (obj.event === 'linkEvent'){
                    if(submitSwitchValue == 1)//添加学生与该课程的联系，insert操作
                    {
                        submitSwitchValue = 5;//赋新值，以免出bug
                        console.log("submitData = "+JSON.stringify(submitData));
                        $.ajax({
                            type : "POST",
                            //请求地址
                            url : "/adminController/insertStuCourseLinkController",
                            data : submitData,
                            success : function(result) {
                                if(result >= 1)
                                {
                                    layer.msg('已加入课程！', {icon: 6});
                                }
                                else
                                {
                                    layer.msg('操作失败，请刷新重试！', {icon: 5});
                                }
                            },
                            error : function(e){
                                layer.msg('操作失败，请刷新重试！', {icon: 5});
                                console.log(e.status);
                                console.log(e.responseText);
                            }
                        });
                    }
                    else if(submitSwitchValue == 0)//消除学生与该课程的联系，delete操作
                    {
                        submitSwitchValue = 5;//赋新值，以免出bug
                        console.log("submitData = "+JSON.stringify(submitData));
                        $.ajax({
                            type : "POST",
                            //请求地址
                            url : "/adminController/deleteStuCourseLinkController",
                            data : submitData,
                            success : function(result) {
                                if(result >= 1)
                                {
                                    layer.msg('已移除课程！', {icon: 6});
                                }
                                else
                                {
                                    layer.msg('操作失败，请刷新重试！', {icon: 5});
                                }
                            },
                            error : function(e){
                                layer.msg('操作失败，请刷新重试！', {icon: 5});
                                console.log(e.status);
                                console.log(e.responseText);
                            }
                        });
                    }
    
                }
            });
    
    
        });
    
    
    </script>
    
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzYzOTI5_size_16_color_FFFFFF_t_70]: /images/20221024/3527bba2d2c1462190ccd9644f19e8c2.png