JS组件系列——表格组件神器：bootstrap table

Posted 2022-12-02 女装大佬大老李

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS组件系列——表格组件神器：bootstrap table相关的知识，希望对你有一定的参考价值。

转载自：http://www.cnblogs.com/landeanfen/p/4976838.html

前言：之前一直在忙着各种什么效果，殊不知最基础的Bootstrap Table用法都没有涉及，罪过，罪过。今天补起来吧。上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ，遇到不少使用方面的问题，也做了一部分笔记，在此分享出来供需要使用的园友参考。还记得前两天有园友加群问我Bootstrap Table的使用问题，呵呵，巧了，今天博主也遇到同样的问题了，在此还是要表示抱歉，没有将这篇提前发出来。

bootstrap table系列：

一、相关文档和技术网站小结

关于流式布局的bootstrap，博主也是最近半年才开始使用，用过之后才知道其实开源的东西挺不错的，还是为bootstrap开源工作者点一个大大的赞！老规矩，贴出相关文档：

Bootstrap中文网：http://www.bootcss.com/

Bootstrap Table Demo：http://issues.wenzhixin.net.cn/bootstrap-table/index.html

Bootstrap Table API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap Table源码：https://github.com/wenzhixin/bootstrap-table

Bootstrap DataPicker：http://www.bootcss.com/p/bootstrap-datetimepicker/

Boostrap Table 扩展API：http://bootstrap-table.wenzhixin.net.cn/extensions/

Bootstrap离线API

Bootstrap Table 离线API

这里要说明一点：Bootstrap Table的离线API是博主自己在官网上面保存下来的，样式可能存在问题。博主也不想使用这种看起来乖乖的离线文档，但没办法，http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/这网站经常性的打不开，貌似有被墙的可能性。下一步是不是要FQ了，O(∩_∩)O~。

二、Bootstrap Table的引入

关于Bootstrap Table的引入，一般来说还是两种方法：

1、直接下载源码，添加到项目里面来。

由于Bootstrap Table是Bootstrap的一个组件，所以它是依赖Bootstrap的，我们首先需要添加Bootstrap的引用。Bootstrap的包直接在 http://v3.bootcss.com/ 里面可以找到，版本已经出来4的预览版，但还是建议使用比较稳定的Bootstrap3，目前最新的3.3.5。然后就是Bootstrap Table的包了，由于它是开源的，我们直接进到它的源码https://github.com/wenzhixin/bootstrap-table里面git下来就好了。然后把这两个包分别加入到项目中。

2、使用我们神奇的Nuget

打开Nuget，搜索这两个包

Bootstrap已经是最新的3.3.5了，我们直接安装即可。

而Bootstrap Table的版本竟然是0.4，这也太坑爹了。所以博主建议Bootstrap Table的包就直接在源码里面去下载吧。Bootstrap Table最新的版本好像是1.9.0。

三、代码详解

当然，组件引用进来了，使用就简单了，只不过这里面涉及很多细节需要我们处理，具体我们待会再说，先来看看使用方法。

1、在cshtml页面引用相关组件，并定义好一个空的表格。

@
    Layout = null;

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>BootStrap Table使用</title>
    @*1、Jquery组件引用*@
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    @*2、bootstrap组件引用*@
    <script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
    
    @*3、bootstrap table组件以及中文包的引用*@
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    
    @*4、页面Js文件的引用*@
    <script src="~/Scripts/Home/Index.js"></script>
</head>
<body>
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="txt_search_statu">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>       

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
        <table id="tb_departments"></table>
    </div>
</body>
</html>

引入需要的文件之后，我们最重要的就是定义一个空的table，如上的 <table id="tb_departments"></table> 。当然Bootstrap table还提供了一种简介的用法，直接在table标签里面定义类似“data-...”等相关属性，就不用再js里面注册了，但博主觉得这种用法虽然简单，但不太灵活，遇到父子表等这些高级用法的时候就不太好处理了，所以咱们还是统一使用在js里面初始化的方式来使用table组件

以上是关于JS组件系列——表格组件神器：bootstrap table的主要内容，如果未能解决你的问题，请参考以下文章

JS组件系列——表格组件神器：bootstrap table

JS表格组件神器bootstrap table详解（基础版）

用js创建的可编辑的bootstrap表格。

JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐

JS组件系列——Bootstrap右键菜单解决方案：ContextMenu

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案