layui 前端动态修改数据表格某一列段的值。

热心市民魏魏师傅

于 2021-05-20 17:13:10 发布

阅读量3.4k

点赞数 2

分类专栏： js前端备忘录文章标签： java layui

本文链接：https://blog.youkuaiyun.com/weixin_44426352/article/details/117083593

版权

js前端备忘录专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何使用layui库在前端实现数据表格的动态编辑。首先，展示了创建一个包含教师信息和评卷数量（可编辑）的数据表格的代码。接着，详细说明了如何通过ID获取表格数据，遍历并修改选中行的评卷数量，以及如何将更新后的数据重新加载到表格中。这为前端数据操作提供了一个实用的示例。

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

1.常用获取数据表格

table.render({
            elem: '#xx'
            ,id: 'examList'
            ,url:'xx'
            ,cols: [ [
                {type:'checkbox'}
                ,{ type:"numbers",title:'序号'}
                ,{ field:'userName', title: '教师账号'}
                ,{ field:'realName', title: '教师姓名'}
                ,{ field:'paperCount', title: '评卷数量(可编辑)',edit: 'text',}
            ] ],
            where:{
            }
        });

2.动态修改评卷数量的值。
2.1：通过id获取当前表格数据

var tableDas = layui.table.cache["examList"];

2.2：遍历数据将选中的数据，指定的字段重新赋值。

for (let i = 0; i < tableDas.length; i++) {
                     if(tableDas[i].LAY_CHECKED){
                         tableDas[i].paperCount= result.data;
                     }
                }

3.重新加载数据表格，data数据就是上面的tableDas ；

function initData(data) {
        table.render({
            elem: '#examList'
            ,id: 'examList'
            ,data:data
            ,cols: [ [
                {type:'checkbox'}
                ,{ type:"numbers",title:'序号'}
                ,{ field:'userName', title: '教师账号'}
                ,{ field:'realName', title: '教师姓名'}
                ,{ field:'paperCount', title: '评卷数量(可编辑)',edit: 'text',}
            ] ]
        });

    }