如何隐藏表格中的列切换按钮？答案

【问题标题】：How to hide the column-toggle button from the table?如何隐藏表格中的列切换按钮？
【发布时间】：2013-07-23 08:19:34
【问题描述】：

我想从表格中隐藏列切换按钮或列选择器按钮出现在表格上方。我正在使用 jQuery Mobile 版本。 1.3.2.

我正在使用这个：

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
 <thead class="pearlHeading">
  <tr>
   <th data-priority="1">S.No.</th>
   <th >Name of the Programme</th>
   <th data-priority="2">Campus</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

我删除了

data-role="table" id="table-column-toggle" data-mode="columntoggle"

但它不能正常工作

【问题讨论】：

标签： jquery-mobile tablesorter jquery

【解决方案1】：

挖矿更专业，使用：

data-mode="columntoggle:none"

工作示例：

<!DOCTYPE html>
<html>

<head>
  <title>jQM Complex Demo</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
  <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
  <div data-role="page" id="index">
    <div data-theme="b" data-role="header">
      <h1>Index page</h1>
    </div>

    <div data-role="content">
      <table data-role="table" id="table-column-toggle" data-mode="columntoggle:none" class="ui-responsive table-stroke">
        <thead class="pearlHeading">
          <tr>
            <th data-priority="1">S.No.</th>
            <th>Name of the Programme</th>
            <th data-priority="2">Campus</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

http://jsfiddle.net/Lsoesxtv/1/

【讨论】：

这应该是公认的答案。 @Gajotres 答案隐藏了所有切换按钮。这可以防止它在特定表上呈现。谢谢他！

【解决方案2】：

工作示例：http://jsfiddle.net/Gajotres/pdYre/

CSS：

.ui-table-columntoggle-btn {
    display: none !important;
}

【讨论】：

我很高兴帮助兄弟:)
嘿兄弟你能帮我解决这个问题吗：stackoverflow.com/questions/17782523/…

【解决方案3】：

我找到了一个更简单的解决方案

1) 声明以下 CSS 类

.ui-btn-z {
    display: none !important;
}

2) 在table标签上设置这个属性

data-column-btn-theme="z"

应该是这样的:)

【讨论】：

【解决方案4】：

我使用“Gajotres”的响应但是......

适用于所有“按钮表切换”，您无法“选择”哪个适用，如果你稍微编辑一下 .js：

jquery.mobile - 1.3.2.min.js (gzip) 第 6 行第 11429 列

d=a(k.columnBtnText===""?"":"<a href='#"+m+"' class='"+k.classes.columnBtn+"' data-"+l+"rel='popup' data-"+l+"mini='true'>"+k.columnBtnText+"</a>")

jquery.mobile - 1.3.2.js 第 10872 行

if ( event ! == " refresh" ) {
self.element.addClass ( o.classes.columnToggleTable ) ;
if ( o.columnBtnText === "") {
$MenuButton = $(""),
else {
$menuButton = $("<a href='#" + id + "' class='" + o.classes.columnBtn + "' data-" + ns         + "rel='popup' data-" + ns + "mini='true'>" + o.columnBtnText + "</a>" ),
}
$ popup = $ (" < div data- " + ns + " role = ' popup' data- " + ns + " role = ' fieldcontain ' class = '" + o.classes.popup + " ' id = ' " + id + "' > < / div >") ,
$ menu = $ (" + ns + <fieldset data-" "role='controlgroup'> < / fieldset >") ;

代码呢？，如果“文本”按钮为空白data-column-btn-text=""... 不显示按钮，因此可以决定显示哪个以及隐藏哪个

然后只有一点编辑。 js不再需要css，你可以选择隐藏按钮的位置

【讨论】：