layui表格种单选框中的回显

2023-4-21    前端达人

let form = layui.form
        layui.table.render({
            id: 'commanderId',
            elem: '#users-list',
            url: '/team-cpt/competition/findUserByUnitId',
            method: 'post',
            request: {pageName: 'pageNum'},
            where: {cptId: cptId, unitId: unitId,realName:realName,phone:phone},
            parseData: convert2LayuiGrid,
            page: true,
            cols: [[
                {field: 'id', title: 'ID', fixed: 'left', hide: true},
                {type: 'radio', fixed: 'left', width: '10%', hide: false},
                {field: 'realName', title: '姓名', align: 'center', fixed: 'left'},
                {field: 'username', title: '手机号', align: 'center', fixed: 'left'}
            ]],
            done: function (res, curr, count) {
                for (let i = 0; i <res.data.length ; i++) {
                    if (res.data[i].id === commanedrId) {
                        $('div.layui-unselect.layui-form-radio')[i].click()//选中
                        //下面三句是通过更改css来实现选中的效果
                        var index = res.data[i]['LAY_TABLE_INDEX'];
                        // $('tr[data-index=' + index + '] ').addClass('layui-table-click');
                        $('tr[data-index=' + index + '] input[type="radio"]').prop('checked', true);
                        $('tr[data-index=' + index + '] input[type="radio"]').next().addClass('layui-form-radioed');
                        $('tr[data-index=' + index + '] i').addClass('layui-anim-scaleSpring');
                    }
                }
                form.render('radio'); //layui表单中改变属性一定要重新渲染

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作,也请与我们联系01063334945。  分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。  蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档