layui表格复选框赋值，获取表格复选框选中值，表格复选框回选

最新推荐文章于 2024-08-21 19:39:31 发布

慕云枫

最新推荐文章于 2024-08-21 19:39:31 发布

阅读量3.1k

点赞数

分类专栏： layui 前端文章标签： layui html javascript

本文链接：https://blog.csdn.net/weixin_43992507/article/details/120068983

版权

前端同时被 2 个专栏收录

94 篇文章 2 订阅

订阅专栏

layui

30 篇文章 4 订阅

订阅专栏

这篇博客介绍了如何使用layui库在表格中实现复选框的选择与取消，并展示了如何获取选中行的数据，以及如何通过AJAX提交选中行的用户ID到后台进行处理。示例代码包括表格初始化、数据回调后的选中状态设置，以及保存选中行数据的函数。

摘要由CSDN通过智能技术生成

layui获取表格复选框提交/回选

表格JS

table.render({
    elem: '#app-from',
    id: 'app-from',
    url:  '/plm/api/employee/listByRole?roleId=' + data.roleId,
    method: 'GET',
    page: true,
    limit:50,
    cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'no', width: 100, title: '编号'},
        {field: 'name', width: 150, title: '姓名'},
        {field: 'mobile', width: 150, title: '手机号码'},
        {field: 'phone', width: 150, title: '电话'}
    ]]
    ,done:function(result,currPage,count){//数据回调方法
        var data = result.data;
        data.forEach(function(value, i) {
            if(value.isRole > 0){
                //$('.layui-table .layui-table-body tr[data-index='+i+'] .layui-unselect').click();
                // layui-unselect和layui-form-checkbox都是同一个元素的class
                // 上面的方式也可以，但是如果一个页面有多个表格的话，建议还是使用下面这种方式
                // 没有开启浮动使用这个即可
                // $('div[lay-id="app-from"] .layui-table-body tr[data-index='+i+'] .layui-form-checkbox').click();
                // 开启左浮动使用这个
                $('div[lay-id="app-from"] .layui-table-fixed tr[data-index='+i+'] .layui-form-checkbox').click();                                  
            }
        })
    },
});

获取选中行

saveRoleUser:function(){
    var check = table.checkStatus('app-from');
    var userIds = [];
    $(check.data).each(function (i, o) {// o 即为表格中一行的数据
        userIds.push(o.userId);
    });
    var roleId= $("#roleId").val();
    tools.request({
        url: '/plm/api/role/updateUserRole',
        method: 'get',
        params: {userIds: userIds.join(","), roleId: roleId}
    }).done(res => {
        if (res.code == 0) {
            layer.closeAll();
            layer.msg('操作成功', {icon: 1});
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    })
},