githab
/
bootstrap-table


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title data-zh="常见问题 &middot; Bootstrap Table" data-es="FAQ &middot; Bootstrap Table">FAQ &middot; Bootstrap Table</title>
    <meta name="author" content="zhixin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bulletin/bulletin.css">
    <link rel="stylesheet" href="../src/bootstrap-table.css">
    <link rel="stylesheet" href="docs.css">
    <!--<link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">-->
    <!--[if lt IE 9]>
    <script src="//wenzhixin.net.cn/js/html5shiv.js"></script>
    <script src="//wenzhixin.net.cn/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<a class="sr-only" href="#content">Skip to main content</a>

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
    <div class="container">
        <button class="navbar-toggle" type="button" data-toggle="collapse"
                data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
                Bootstrap Table
            </a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="getting-started.html" data-zh="开始使用" data-es="Uso">Usage</a>
                </li>
                <li>
                    <a href="documentation.html" data-zh="文档" data-es="Documentación">Docs</a>
                </li>
                <li>
                    <a href="examples.html" data-zh="例子" data-es="Demos">Demos</a>
                </li>
                <li>
                    <a href="extensions.html" data-zh="扩展" data-es="Extensiones">Extensions</a>
                </li>
                <li class="active">
                    <a href="faq.html" data-zh="常见问题" data-es="FAQ">FAQ</a>
                </li>
                <!-- Localization -->
                <li id="locale" class="">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="blank.gif" class="flag flag-en">
                        <span class="language">English</span> <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="active" data-locale="en">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-en" alt="United States"> English
                            </a>
                        <li data-locale="zh">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-zh" alt="China"> 简体中文
                            </a>
                        </li>
						<li data-locale="es">
                            <a href="javascript:void(0)">
                                <img src="blank.gif" class="flag flag-es" alt="Español"> Español
                            </a>
                        </li> 
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- GitHub buttons: see http://ghbtns.com -->
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe></li>
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&repo=bootstrap-table&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe></li>
                <li><iframe class="navbar-text" src="http://ghbtns.com/github-btn.html?user=wenzhixin&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="175" height="20"></iframe></li>
            </ul>
        </nav>
    </div>
</header>

<div class="bs-header" id="content">
    <div class="container">
        <h1>
            <span data-zh="常见问题" data-es="FAQ">FAQ</span>
            <a class="edit-pull-request" href="https://github.com/wenzhixin/bootstrap-table/edit/master/docs/faq.html" title="Edit the docs">
                <i class="glyphicon glyphicon-edit"></i>
            </a>
        </h1>
        <p data-zh="常见问题。" data-es="Preguntas frecuentes">Frequently Asked Questions.</p>
    </div>
</div>
<div class="container">
    <div class="row">
        <h2>When resize the window, the table header does not adjust automatically, how to solve it?</h2>
        <div class="comment-body markdown-body markdown-format js-comment-body">
            <p>When you set the <code>height</code> of bootstrap table, the <code>fixed header</code> feature is automatically enabled, that is what cause the problem, you need to listen the <code>resize</code> event of window and use the <code>resetView</code> method to solve this problem, code example:</p>

<pre><code>$(function () {
    $('#tableId').bootstrapTable(); // init via javascript

    $(window).resize(function () {
        $('#tableId').bootstrapTable('resetView');
    });
});
</code></pre>
        </div>
        
        <hr>
        
        <h2>How to better merge cells?</h2>
        <div><p>For merged cells, when you do refresh, next page or switch columns to show, the merge cells will be unmerged. We can listen the events(on load success, on column switch, on page change and on search) to solve this problem, code example:</p>
<pre><code class="lang-js">$table.on(<span class="hljs-string">'load-success.bs.table column-switch.bs.table page-change.bs.table search.bs.table'</span>, <span class="hljs-keyword">function</span> () {
    $table.bootstrapTable(<span class="hljs-string">'mergeCells'</span>, {<span class="hljs-keyword">...</span>});
});
</code></pre>
</div>
        
        <hr>
        
        <h2>How can I support development of bootstrap-table?</h2>
        <p>All your ideas and feedback are very appreciated! Please feel free to open issues on <a href="github.com/wenzhixin/bootstrap-table/issues">github</a> or send me <a href="mailto:wenzhixin2010@gmail.com">email</a>.</p>
        <p>I'm also grateful for your donations:</p>
        <script data-gratipay-username="wenzhixin" data-gratipay-widget="button" src="//gttp.co/v1.js"></script>
        <p>Thank you!</p>
    </div>
</div>

<!--<a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>-->

<footer class="bs-footer" role="contentinfo">
    <div class="container">
        <p>Copyright © 2012-2014, Bootstrap Table is licensed under the The MIT License. Coded by wenzhixin. </p>
        <ul class="footer-links">
            <li>Currently: v1.3.0</li>
            <li class="muted">·</li>
            <li><a href="http://wenzhixin.net.cn">My website</a></li>
            <li class="muted">·</li>
            <li><a href="http://repos.wenzhixin.net.cn">My repos</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/wenzhixin">Github (@wenzhixin)</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/wenzhixin/bootstrap-table/issues?state=open">Issues</a></li>
            <li class="muted">·</li>
            <li><a href="mailto:wenzhixin2010@gmail.com">Email</a></li>
        </ul>
    </div>
</footer>

<div class="goto-top">
    <i class="glyphicon glyphicon-plane"></i>
</div>

<div id="bulletin" class="bulletin">
    <ul>
        <li><a href="http://repos.wenzhixin.net.cn/">My Repositories - Show my repositories list.</a></li>
        <li><a href="http://wenzhixin.net.cn/p/multiple-select/">Multiple Select - Multiple select is a jQuery plugin to select multiple elements with checkboxes.</a></li>
        <li><a href="https://github.com/wenzhixin/bootstrap-show-password">Bootstrap Show Password - Show/hide password plugin for bootstrap.</a></li>
        <li><a href="http://wenzhixin.net.cn/p/bulletin/">Bulletin - A jQuery plugin to show bulletin for website.</a></li>
    </ul>
    <div class="close"><a href="javascript:void(0)">×</a></div>
</div>

<script src="assets/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bulletin/jquery.bulletin.js"></script>
<script src="../src/bootstrap-table.js"></script>
<script src="common.js"></script>
<script src="//wenzhixin.net.cn/js/analytics.js"></script>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53c78e93678a7b4d"></script>
</body>
</html>