What table plug-in does bootstrap use?-Front-end Q&A-php.cn

Bootstrap can use the "Bootstrap-Table" table plug-in. "Bootstrap-Table" is a jQuery table plug-in based on Bootstrap. Through simple settings, you can have powerful functions of single selection, multi-selection, sorting, paging, editing, exporting, filtering, etc.

What table plug-in does bootstrap use?

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

The "Bootstrap-Table" table plug-in is available for bootstrap.

Bootstrap table is a jQuery table plug-in based on Bootstrap. It has relatively complete functions and can realize a series of functions such as asynchronous data acquisition, editing, sorting, etc. The most valuable thing is that it only requires some simple configurations. A fully functional online form.

Official website address: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Github address: https://github.com/wenzhixin/bootstrap -table

Chinese documentation: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Main functions

Supports Bootstrap 3 and Bootstrap 2
Adaptive interface
Fixed header
Very rich configuration parameters
Use directly through tags
Show/hide columns
Show/hide header
Get data in JSON format through AJAX
Support sorting
Format table
Support single or multiple selection
Powerful paging function
Support card view
Support multiple languages
Support plug-ins

Advantages

Low learning cost, simple configuration, complete documentation
Seamless connection with Bootstrap, consistent overall style, and easy for secondary development
Active developers, regular maintenance on Github

Introduction of Bootstrap Table

Regarding the introduction of Bootstrap Table, there are generally two methods:

1. Download the source code directly and add it to the project.

Since Bootstrap Table is a component of Bootstrap, it depends on Bootstrap. We first need to add a reference to Bootstrap. The Bootstrap package can be found directly at http://v3.bootcss.com/. The preview version of version 4 has been released, but it is still recommended to use the relatively stable Bootstrap3, the latest 3.3.5. Then there is the Bootstrap Table package. Since it is open source, we can directly go to its source code https://github.com/wenzhixin/bootstrap-table and git it down. Then add these two packages to the project respectively.

2. Use our magical Nuget

Open Nuget and search for these two packages

We directly Just install it.

The version of Bootstrap Table is actually 0.4, which is too cheating. Therefore, the blogger suggests that the Bootstrap Table package should be downloaded directly from the source code. The latest version of Bootstrap Table seems to be 1.9.0.

Detailed Code Explanation

Of course, once the component is referenced, the use is simple, but there are many details involved that need to be dealt with. We will talk about the details later. Let’s take a look at how to use it first.

1. Reference the relevant components in the cshtml page and define an empty table.

@{
    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>

Copy after login

After introducing the required files, the most important thing for us is to define an empty table, as above

. Of course, Bootstrap table also provides a brief usage. You can directly define related attributes such as "data-..." in the table tag, so you don't need to register it in js. However, the blogger feels that although this usage is simple, it is not easy to use. It is too flexible and difficult to handle when encountering advanced usage such as parent-child tables, so we still use the table component by initializing it in js.

2. Js initialization

$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $(&#39;#tb_departments&#39;).bootstrapTable({
            url: &#39;/Home/GetDepartment&#39;,         //请求后台的URL（*）
            method: &#39;get&#39;,                      //请求方式（*）
            toolbar: &#39;#toolbar&#39;,                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: &#39;Name&#39;,
                title: &#39;部门名称&#39;
            }, {
                field: &#39;ParentName&#39;,
                title: &#39;上级部门&#39;
            }, {
                field: &#39;Level&#39;,
                title: &#39;部门级别&#39;
            }, {
                field: &#39;Desc&#39;,
                title: &#39;描述&#39;
            }, ]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            departmentname: $("#txt_search_departmentname").val(),
            statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};

Copy after login

The initialization of the table is also very simple, just define the relevant parameters. Some of the parameters that bloggers think are important above have been commented, and bloggers have also marked several parameters necessary to initialize Table with (*). If your table also has too many page requirements, directly It can be solved with the necessary parameters. Similarly, there are actually many parameters that need to be set in the columns parameter, such as column sorting, alignment, width, etc. These bloggers think it is relatively simple and does not involve the functions of tables. They can just look at the API and get it done.

3、在Controller里面对应的方法

public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
        {
            var lstRes = new List<Department>();
            for (var i = 0; i < 50; i++)
            {
                var oModel = new Department();
                oModel.ID = Guid.NewGuid().ToString();
                oModel.Name = "销售部" + i ;
                oModel.Level = i.ToString();
                oModel.Desc = "暂无描述信息";
                lstRes.Add(oModel);
            }

            var total = lstRes.Count;
            var rows = lstRes.Skip(offset).Take(limit).ToList();
            return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
        }

Copy after login

这里有一点需要注意：如果是服务端分页，返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到前端。

4、效果及说明

还是贴几张效果图出来：

推荐学习：《bootstrap使用教程》

The above is the detailed content of What table plug-in does bootstrap use?. For more information, please follow other related articles on the PHP Chinese website!