JS组件系列——表格组件神器：bootstrap table(还没细看）

标签：Bootstrap http bootstrap JS table 组件 Table

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

bootstrap table系列：

JS组件系列——表格组件神器：bootstrap table
JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
JS组件系列——表格组件神器：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，搜索这两个包

JS组件系列——表格组件神器：bootstrap table(还没细看）_bootstrap

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

JS组件系列——表格组件神器：bootstrap table(还没细看）_离线_02

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

三、代码详解

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

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

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"="width=device-width" />
    <title>BootStrap Table使用</title><script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css"="stylesheet" /><script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <link href="~/Content/bootstrap-table/bootstrap-table.css"="stylesheet" />
    <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script><script src="~/Scripts/Home/Index.js"></script>
</head>
<body>
    <div class="panel-body"="padding-bottom:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch"="form-horizontal">
                    <div class="form-group"="margin-top:15px">
                        <label class="control-label col-sm-1"="txt_search_departmentname">部门名称</label>
                        <div class="col-sm-3">
                            <input type="text"="form-control"="txt_search_departmentname">
                        </div>
                        <label class="control-label col-sm-1"="txt_search_statu">状态</label>
                        <div class="col-sm-3">
                            <input type="text"="form-control"="txt_search_statu">
                        </div>
                        <div class="col-sm-4"="text-align:left;">
                            <button type="button"="margin-left:50px"="btn_query"="btn btn-primary">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>       

        <div id="toolbar"="btn-group">
            <button id="btn_add"="button"="btn btn-default">
                <span class="glyphicon glyphicon-plus"="true"></span>新增
            </button>
            <button id="btn_edit"="button"="btn btn-default">

标签：Bootstrap,http,bootstrap,JS,table,组件,Table
From： https://blog.51cto.com/u_15773967/5751869