layui table radio回显选中,layui列表单选或复选回显选中,layui列表radio回显选中

法国红酒洗大虾

已于 2023-11-27 17:14:14 修改

阅读量4.9k

点赞数 2

文章标签： javascript 前端

于 2020-09-14 09:14:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40248217/article/details/108572086

版权

本文详细介绍了如何使用layui框架在表格中回显已选择的用户列表，通过在table的done回调函数中进行列表单选选中的回显操作，实现了用户列表与合同关联用户的同步显示。代码示例清晰，直接复制即可使用。

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

1.效果描述:

查看该合同关联用户列表时,在列表中回显选中该合同已经关联的用户

DESC:以下均为layui原生代码完全可以直接复制

2.效果图:

弹出对话框,一个页面(里面是用户列表)

3.layui渲染table的代码:

我们的目标是在table的done回调函数中进行列表单选选中的回显操作,(最重要的就是第32和33行代码)

  var formHeight = $("#user-search-form").height();
    table.render({
      elem: '#user-table',
      url: config.base_server + config.route_user + '/user/v1/unauthorityuserlist',
      where: {
        userId: setter.getUser().userId,
        access_token: config.getToken().access_token,
        parentId: setter.getUser().organId
      },
      page: true,
      height: 'full-' + (70 + formHeight),
      cols: [[
        {type: 'radio'},
        {title: '序号', type: 'numbers'},
        {field: 'userId', hide: true},
        {field: 'appIdentification', hide: true},
        {field: 'appName', hide: true},
        {field: 'orgName', hide: true},
        {field: 'orgNo', hide: true},
        {field: 'userName', sort: true, title: '账号', width: 150},
        {field: 'name', sort: true, title: '用户名'},
        {align: 'center', toolbar: '#user-table-bar', width: 200, title: '操作', fixed: 'right'}
      ]],
      done: function (res, curr, count) {

        //看这里
        //利用回调函数进行回显
        var dataArr = res.data;
        for (var i = 0; i < dataArr.length; i++) {
            //如果符合条件那么点击选中
          if (dataArr[i].userId == t_contract.USERID) {
            $('div.layui-unselect.layui-form-radio')[i].click();//单选用这个
            //复选用这个 : $('div.layui-unselect.layui-form-checkbox')[(i+1)].click();
            break;
          }

        };
        //form.render();
      }
    });