bsgrid动态表头（动态列）

最新推荐文章于 2025-05-15 15:11:36 发布

原创最新推荐文章于 2025-05-15 15:11:36 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#表格控件 #javascript

前端同时被 3 个专栏收录

7 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍如何使用bsgrid插件实现动态表头调整功能，根据不同的查询方式更改表格列，涉及清除表格数据、动态增删列等操作。

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

表格插件：bsgrid
实现功能：选择不同的查询方式，表格的列发生对应的改变

代码：

//动态表头
$("#types").change(function () {

   //清除表格数据
   gridObj.clearGridBodyData();

   //删除第2列
   var $tr =  $('#list_table tr');
   $tr.find('th:eq(1)').remove();

   //在第1列后面增加对应类型的列
   var types = $(this).val();
   var $h1 = $tr.find('th:eq(0)'); //第1列

   if (types == 0) {
       $h1.after('<th w_index="" w_align="center">窗口号</th>');
   }

   else if (types == 1) {
       $h1.after('<th w_index="" w_align="center">员工姓名</th>');
   }

   else if (types == 2) {
       $h1.after('<th w_index="" w_align="center">业务名称</th>');
   }

   //重新设置表格的列模型
   gridObj.options.columnsModel = $.fn.bsgrid.initColumnsModel(gridObj.options);

   $.extend(gridObj.options.columnsModel[0], {lineNumber:"line"}); //解决行号消失的BUG

});