html表格显示列与隐藏列
I was recently asked to create an report based on an HTML table. The report needed to contain many more columns than could be displayed across the page, but they would all be needed.
最近有人要求我根据HTML表创建报告。 该报告需要包含的列数比该页面上显示的列数还多，但是将需要全部这些列。
Fortunately, it was possible to group the columns of data into related subjects that would be viewed altogether or not at all.
幸运的是，有可能将数据列分组为相关主题，这些主题将被完全查看或根本不会查看。
I needed a simple way of hiding or displaying the groups of columns, that would also indicate that there was a hidden group of columns that was available for display.
我需要一种简单的方法来隐藏或显示列组，这也将表明存在可供显示的隐藏列组。
My solution looks like the screen shot below.
我的解决方案如下图所示。
Column group1 & 3 are both expanded, Group 2 is collapsed, indicated by the narrow blue column.
列组1和3均已展开，组2折叠，如蓝色窄列所示。
The 'ID' column is a fixed column that is always present
“ ID”列是始终存在的固定列
To expand Group 2, or collapse Group 1 and 3, it is simply necessary to double click in one of the header cells
要展开组2或折叠组1和3，只需双击其中一个标题单元格
// This value is updated when the document is loaded is inline-table style is not supported var showStyle = "inline-table"; function expcoll(cell) { var className = cell.className; var classType = className.substr(0, 2); var classID = className.substr(2); var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID; $("." + className).css("display", "none"); $("." + ctrlClass).css("display", showStyle); } function cssTest() { // inline-table doesn't work properly in IE8 (and presumably older versions) // The data columns get hidden, but the control columns don't appear. // I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet // Just using 'inline' breaks the table in Firefox and Opera - // the cell widths shrink to the minimum size required to show the contents // If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table' if ($("#testCell").css("display") == "block") showStyle = "inline"; }This function parses the CSS class name of the cell that has been double-clicked. All the cells in the column need the same class name. The first two letters of the class name indicate the column type - 'cg' is a column group, 'ct' is a control column (displayed when the other columns are hidden). Whatever letters you choose, use the same number of letters for each type, as this simplifies parsing the name.
此函数解析已双击的单元格CSS类名称。 列中的所有单元格都需要相同的类名。 类名的前两个字母表示列类型-'cg'是列组，'ct'是控制列（其他列隐藏时显示）。 无论选择哪种字母，每种类型都使用相同数量的字母，因为这样可以简化名称解析。
The rest of the class name is the column group number. So, each group will have a number of columns with a class cg1 (for example) and one control column ct1
类名称的其余部分是列组号。 因此，每个组将具有许多列，这些列具有一个类cg1（例如）和一个控制列ct1
The function uses JQuery to get a reference to all the cells with the selected class name, and hides them. It then gets a reference to all the columns with the other class name (cg or ct) and makes them visible.
该函数使用JQuery来获取对具有所选类名的所有单元格的引用，并将其隐藏。 然后，它获得对具有其他类名（cg或ct）的所有列的引用，并使它们可见。
IE does not seem to support 'inline-table' as an option for the 'display' style. Rather than clumsy user-agent parsing to detect support, I've developed a way of detecting CSS support. See my related tutorial Detecting cross browser CSS style support
IE似乎不支持将“内联表”作为“显示”样式的选项。 我没有笨拙的用户代理解析来检测支持，而是开发了一种检测CSS支持的方法。 请参阅我的相关教程“ 检测跨浏览器CSS样式支持”
You will need to download JQuery to make it work.
您将需要下载JQuery才能使其工作。
(JQuery is a JavaScript library; it is "... a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.")
（JQuery是一个JavaScript库；它是“ ...一个快速简洁JavaScript库，可简化HTML文档的遍历，事件处理，动画和Ajax交互，以实现快速的Web开发。”）
Complete solution:
完整的解决方案：
<html> <head> <style type="text/css"> table td { border:solid 1px black; border-collapse:collapse; padding: 1px; } .cc1 { width:150px; background-color:LightBlue; display:inline-table; } .cg1 { width:150px; background-color:LightGreen; display:inline-table; } .cg2 { width:150px; background-color:LightSkyBlue; display:inline-table; } .cg3 { width:150px; background-color:LightSeaGreen; display:inline-table; } .ct1 { width:10px; display:none; background-color:LightGreen; } .ct2 { width:10px; display:none; background-color:LightSkyBlue; } .ct3 { width:10px; display:none; background-color:LightSeaGreen; } </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> // This value is updated when the document is loaded is inline-table style is not supported var showStyle = "inline-table"; function expcoll(cell) { var className = cell.className; var classType = className.substr(0, 2); var classID = className.substr(2); var ctrlClass = ((classType == "ct") ? "cg" : "ct") + classID; $("." + className).css("display", "none"); $("." + ctrlClass).css("display", showStyle); } function cssTest() { // inline-table doesn't work properly in IE8 (and presumably older versions) // The data columns get hidden, but the control columns don't appear. // I suspect this style is not recognised at all, and is ignored when it is seen in the default style sheet // Just using 'inline' breaks the table in Firefox and Opera - // the cell widths shrink to the minimum size required to show the contents // If inline-table is not supported (as with IE) the initial style is 'block', so use 'inline' instead of 'inline-table' if ($("#testCell").css("display") == "block") showStyle = "inline"; } </script> </head> <body onload="cssTest()"> <table> <tr> <td class="cc1">ID</td> <td class="cg1" ondblclick="expcoll(this)" id="testCell">Group 1</td> <td class="cg1" ondblclick="expcoll(this)">Group 1</td> <td class="ct1" ondblclick="expcoll(this)"> </td> <td class="cg2" ondblclick="expcoll(this)">Group 2</td> <td class="cg2" ondblclick="expcoll(this)">Group 2</td> <td class="ct2" ondblclick="expcoll(this)"> </td> <td class="cg3" ondblclick="expcoll(this)">Group 3</td> <td class="cg3" ondblclick="expcoll(this)">Group 3</td> <td class="ct3" ondblclick="expcoll(this)"> </td> </tr> <tr> <td class="cc1">Row 1</td> <td class="cg1">Row 1</td> <td class="cg1">Row 1</td> <td class="ct1"> </td> <td class="cg2">Row 1</td> <td class="cg2">Row 1</td> <td class="ct2"> </td> <td class="cg3">Row 1</td> <td class="cg3">Row 1</td> <td class="ct3"> </td> </tr> <tr> <td class="cc1">Row 2</td> <td class="cg1">Row 2</td> <td class="cg1">Row 2</td> <td class="ct1"> </td> <td class="cg2">Row 2</td> <td class="cg2">Row 2</td> <td class="ct2"> </td> <td class="cg3">Row 2</td> <td class="cg3">Row 2</td> <td class="ct3"> </td> </tr> <tr> <td class="cc1">Row 3</td> <td class="cg1">Row 3</td> <td class="cg1">Row 3</td> <td class="ct1"> </td> <td class="cg2">Row 3</td> <td class="cg2">Row 3</td> <td class="ct2"> </td> <td class="cg3">Row 3</td> <td class="cg3">Row 3</td> <td class="ct3"> </td> </tr> </table> </body> </html>html表格显示列与隐藏列
[b]表格：显示/隐藏列[/b]
参考示例：[url=http://www.miniui.com/demo/datagrid/hidecolumn.html]显示/隐藏列[/url]
通过设置表格的showColumn和hideColumn方法，可以显示、隐藏表格列。
给列对象设置一个name：
<div name="loginnameColumn" field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
在运行时调用方法显示和隐藏列：
//显示列
grid.showColumn("loginnameColumn");
//隐藏列
grid.hideColumn("loginnameColumn");
在datatables中，当把表格整列隐藏时，用js是无法取得隐藏列的数据以及属性，我们只能通过操作表格的列index才可操作表格列的隐藏或显示。
没注意看官方文档，以为类和data-column属性是加入表格th中，其实并不是，是加入要进行操作的列表项，通过对列表项进行监听来显示及隐藏列。
1 //显示隐藏列，toggle-vis类加在要进行操作的列表项中，监听列表项，data-column是列的index 2 $('.toggle-vis').on('change', function (e) { 3 e.preventDefault(); 4 console.log($(this).attr('data-column')); 5 var column = table.column($(this).attr('data-column')); 6 column.visible(!column.visible()); 7 });
还是小白，走了很多弯路，记一次愚蠢的浪费时间的错误，下次要注意看文档。
转载于:https://www.cnblogs.com/echospace-/p/9235330.html
table控制列显示隐藏的功能
当选中时 table列显示，未选中时隐藏该列
首先造轮子 全局拿来用// 这是子组件 <template> <div style="text-align: right;"> <el-popover placement="right" title="列筛选" trigger="click" > <el-checkbox-group v-model="checkList" @change="filter" style="max-width:1500px;"> <el-checkbox v-for="(item, index) in tableList" :key="index" :label="item.value" ></el-checkbox> </el-checkbox-group> <el-button type="button" size="small" slot="reference" ><i class="el-icon-arrow-down el-icon-menu"></i ></el-button> </el-popover> </div> </template> <script> // import AddOrUpdate from "./advert-add-or-update"; export default { data() { return { tableList:[], checkList:[], result:[], list:[], }; }, props:{ datas:{ } }, created(){ // console.log(this.datas) this.tableList = this.datas }, mounted(){ this.tableList.forEach((item,index)=>{ this.checkList.push(item.value) }) }, methods:{ filter(val) { this.tableList.forEach((item,index)=>{ this.list.push(item.value) }) this.result = this.list.filter(number => !val.includes(number)) // console.log('result',result) if(this.result.length>=1){ this.result.forEach((item,index)=>{ this.tableList.forEach((items,indexs)=>{ if(items.value == item){ items.isTrue = false } }) }) } // console.log('val',val) val.forEach((item,index)=>{ // console.log(item) this.tableList.forEach((items,indexs)=>{ if(items.value == item){ items.isTrue = true } }) }) }, }, }; </script> <style lang="scss" scoped> </style>// 这是父组件 //！！！！！！！！！！！！！！！！引入<省略> // 调用 <screen :datas='tableList'></screen> //例如这是你的table <el-table :data="dataList" border row-key="categoryId" style="width: 100%;" v-loading="dataListLoading"> <el-table-column prop="id" header-align="center" align="center" label="ID" width="80" v-if="tableList[0].isTrue"></el-table-column> <el-table-column prop="status" header-align="center" align="center" label="状态" width="100" v-if="tableList[1].isTrue"></el-table-column> <el-table-column prop="prodName" header-align="center" align="center" label="产品名" width="200" v-if="tableList[2].isTrue"></el-table-column> </el-table> //在需要进行切换显示的列后面加上 v-if="tableList[*].isTrue" 这个然后js部分 在return 中加入这些
//下面tableList中对象的数量要和table中加入v-if的数量一致 // 因为用不到label 就直接删掉了 tableList:[ { value: 'ID', isTrue:true, }, { value: '状态', isTrue:true, }, { value: '产品名', isTrue:true, }, ], checkList:[], result:[], list:[],// components中别忘了注册 components: { screen },加油 ！
