layui 动态列，splice首行添加，push尾部添加

最新推荐文章于 2025-03-28 11:22:56 发布

Aimyone

最新推荐文章于 2025-03-28 11:22:56 发布

阅读量996

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/118997419

layui 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种在前端动态表格中添加首部复选框和尾部操作列的方法。首先，从后端获取数据ColsList，然后通过JavaScript的Array方法`splice`在数据首部插入复选框列，再使用`push`方法在尾部添加操作列，包含编辑和删除按钮。最后，将处理后的数据传递给layui表格组件，实现了动态列展示及操作功能。

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

1，目标代码


 cols: [
        [
           {type: 'checkbox'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'operate', title: '操作', align: 'center', width: 100,  templet: function(d){
               return '<a style="color: #409EFF;" lay-event="edit">修改</a>' +
                   '<a style="color: #409EFF;margin-left: 10px" lay-event="del">删除</a>'
           }}
         ]
   ],

2，现有的动态数据

从后端传来的数据 ColsList 只有中间这段


   {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
   {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
   {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
   {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
   {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},

3，前端组合

首部添加


 {type: 'checkbox'}

尾部添加


 {field: 'operate', title: '操作', align: 'center', width: 100,  templet: function(d){
     return '<a style="color: #409EFF;" lay-event="edit">修改</a>' +
            '<a style="color: #409EFF;margin-left: 10px" lay-event="del">删除</a>'
 }}

最终代码：


  //初始化
 var ColsList= ${ColsList};
  //首部添加
 ColsList.splice(0,0,{type: 'checkbox'})  
 //尾部添加
 ColsList.push({field: 'operate', title: '操作', align: 'center', width: 100,  templet: function(d){
        return '<a style="color: #409EFF;" lay-event="edit">修改</a>' +
               '<a style="color: #409EFF;margin-left: 10px" lay-event="del">删除</a>'
 }});  

//最后放入layui的表格属性中
 cols: [
  		 ColsList
       ],