Skip to content
章节导航

分页数据回显

学校名称回显

回显方法

javascript
function viewSchool(id) {
    if ('0' === id) {
        return '湖北大学';
    }
    return '';
}

layui 表格数据模板方法

javascript
{
                field: 'schoolId', title: '所属学校', align: "center", templet: function (d) {
                    return viewSchool(d.schoolId);
                }
            },

学院名称回显

回显方法

javascript
function viewAcademy(id) {
    if ('1' === id) {
        return '计算机与信息工程学院';
    }
    if ('2' === id) {
        return '数学与统计学学院';
    }
    if ('3' === id) {
        return '材料科学与工程学院';
    }
    return '';
}

layui 表格数据模板方法

javascript
{
    field: 'academyId', title: '所属学院', align: "center", templet: function (d) {
        return viewAcademy(d.academyId);
    }
},

性别回显

回显方法

javascript
function viewSex(value) {
    if ('1' === value) {
        return '';
    }
    if ('2' === value) {
        return '';
    }
    return '未知';
}

layui 表格数据模板方法

javascript
{
    field: 'sex', title: '性别', align: "center", templet: function (d) {
        return viewSex(d.sex);
    }
},

index.js 完整

javascript
const path = "/student/info";
layui.use(['table'], function () {
    let table = layui.table;

    /* 初始化表格 */
    table.render(tableOptions());

    /* 表头事件监听 */
    toolBar(table);

    /* 操作栏监听 */
    tool(table);

});

/**
 * 数据表格查询条件(必须有,不然表格重载不了)
 */
function queryWhere() {
    let name = $("#name").val();
    let schoolId = $("#schoolId").val();
    let academyId = $("#academyId").val();
    let sex = $("#sex").val();
    return {
        name: name,
        schoolId: schoolId,
        academyId: academyId,
        sex: sex,
    }
}

/**
 * 刷新表格数据
 * @param table
 */
function reloadTableData(table) {
    if (null === table || undefined === table) {
        table = layui.table;
    }
    let p = tableOptions();
    p.where = queryWhere();
    p.page.curr = 1;
    table.reloadData(p.id, p);
}

/**
 * 表头操作
 * @param table
 */
function toolBar(table) {
    table.on('toolbar(layFilter)', function (obj) {
        if ('search' === obj.event) {
            reloadTableData(table);
        }
        if ('saveStudentInfo' === obj.event) {
            layer.open({
                type: 2,
                title: '新增',
                content: path + '/add',
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });


        }
    })
}

/**
 * 表格操作
 * @param table
 */
function tool(table) {
    table.on('tool(layFilter)', function (obj) {
        console.log('tool ==> obj', obj);

        let data = obj.data;
        if ('delete' === obj.event) { // 删除
            let msg = '确定删除【' + data.name + '】信息吗?';
            layer.confirm('<div style="color: #ff000c">' + msg + '</div>', {
                icon: 3,
                title: '系统提示!'
            }, function () {
                $.ajax({
                    type: 'delete',
                    url: path + '/' + data.id,
                    success: function (res) {
                        if (res.success) {
                            reloadTableData(table); // 删除成功, 刷新表格
                            layer.msg(res.msg, {icon: 1, time: 1500});
                        } else {
                            layer.msg(res.msg, {icon: 1, time: 1500});
                        }
                    }
                })
            });
        }
        if ('update' === obj.event) { // 更新
            layer.open({
                type: 2,
                title: '编辑',
                content: path + '/edit/' + data.id,
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
        if ('view' === obj.event) { // 查看
            layer.open({
                type: 2,
                title: '查看学生信息',
                content: path + '/view/' + data.id,
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                btn: ['关闭'],
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
    })
}

/**
 * 表格参数初始化
 */
function tableOptions() {
    return {
        url: path + "/page",
        where: queryWhere(),
        cols: [[
            {field: 'name', title: '姓名', align: "center"},
            {
                field: 'schoolId', title: '所属学校', align: "center", templet: function (d) {
                    return viewSchool(d.schoolId);
                }
            },
            {
                field: 'academyId', title: '所属学院', align: "center", templet: function (d) {
                    return viewAcademy(d.academyId);
                }
            },
            {field: 'birthday', title: '出生日期', align: "center"},
            {field: 'stuNo', title: '学号', align: "center"},
            {
                field: 'sex', title: '性别', align: "center", templet: function (d) {
                    return viewSex(d.sex);
                }
            },
            {fixed: 'right', title: '操作', toolbar: '#toolbarHandle', width: "20%", align: "center"}
        ]],
        id: 'layTable',
        elem: '#layTable',
        toolbar: '#toolbar',
        layFilter: 'layFilter',
        defaultToolbar: ['filter', 'exports', 'print'],
        cellMinWidth: 80,
        response: {
            statusName: 'status', //规定数据状态的字段名称,默认:code
            statusCode: 200 //规定成功的状态码,默认:0
        },
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "status": res.status, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.rows //解析数据列表
            };
        },
        page: {
            theme: '#1E9FFF',
            groups: 5,
            limits: [10, 15, 30, 50, 100, 500, 10000],
            layout: ['prev', 'page', 'next', 'skip', 'refresh', 'limit', 'count'],
            prev: '上一页',
            next: '下一页'
        },
    }
}


/**
 * 回显学校名称
 * @param id
 * @returns {string}
 */
function viewSchool(id) {
    if ('0' === id) {
        return '湖北大学';
    }
    return '';
}

/**
 * 回显学院信息
 * @param id
 * @returns {string}
 */
function viewAcademy(id) {
    if ('1' === id) {
        return '计算机与信息工程学院';
    }
    if ('2' === id) {
        return '数学与统计学学院';
    }
    if ('3' === id) {
        return '材料科学与工程学院';
    }
    return '';
}

function viewSex(value) {
    if ('1' === value) {
        return '';
    }
    if ('2' === value) {
        return '';
    }
    return '未知';
}