C# + MVC + BootStrap Table 简单封装

时间 2021-01-04

前言：

1、Bootstrap本身是一个非常优秀的前端框架，bootstrap table 是其配套风格的表格插件，功能强大。

2、网上有非常多的 bootstrap table 的说明和教程，中文官网地址：

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

3、其配置参数非常的丰富，基本可以满足平时开发的一般需求，下面是文档地址：

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

4、在开发过程中，有很多参数是使用不到的，这里做了一个简单的封装，只保留部分参数提供修改。

正文：

1、先来看一下使用 bootstrap table 的界面风格：一致的扁平化设计，全选，分页，自定义按钮等功能

2、直接进入代码部分：（完整项目下载地址在文章最后）

　bootstrap table 的界面初始化有两种方式，直接编写 html 或者使用JS初始化，这里只介绍JS的方式。

　下面我们来实现一个最简单的带分页的表格数据展示

　页面代码　
```
<table id="tb_departments"></table>
```
其实，负责显示数据的只有一行 <table id="tb_departments"></table> 其他的全是无关紧要的固定结构。

js代码

必要的引用（文章最后会给出完整的mvc项目下载地址）其中 Tbootstrap-table.js 就是我简单处理的js,文章后面也会帖出完整代码。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/BootStrapTable/bootstrap-table.js"></script>
    <script src="~/BootStrapTable/Tbootstrap-table.js"></script>//简单封装的js

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/BootStrapTable/bootstrap-table.css" rel="stylesheet" />

初始化表格JS

<script>

        $(function () {
            oInitTable(); //页面加载时进行初始化表格
        });

        function oInitTable() {
            var url = '/User/GetUsersWithPage'; //获取Json数据的路由地址

            var columnsData = [{
                checkbox: true //启用复选框
            },{
                field: 'ID',  //Json字段名  //此处的字段名称，必须与提供的Json数据中的字段一致
                title: 'ID'   //显示名称
            }, {
                field: 'UserName',
                title: '用户名'
            }, {
                field: 'Sex',
                title: '性别'
            }, {
                field: 'Age',
                title: '年龄'
            },{
                field: 'ID',
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {//这里是自定义功能按钮，value,row,index 是插件提供的参数
                    var id = value;
                    var result = "";
                    result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"ViewById('" + id + "')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                    result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteById('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

                    return result;
                }
            },];

            
            var oTable = new TableInit();//创建表格对象

            //我们来看一下下面的Init()方法需要哪些参数

            //function (tableId, tableHeight, url, columnsData, PF, uniqueId)
            //tableId : 表格的ID,
            //tableHeight : 表格的高度,
            //url : 获取数据的地址,
            //columnsData : 自定义的字段匹配,
            //PF : 获取数据时需要传递的参数
            //uniqueId : 标识列，一般是你数据表里的主键，便于后期的其他操作，如：删除、更新等

            oTable.Init("tb_departments", 500, url, columnsData, PF, "ID");
        }

        //这里是需要传递的参数,下面的两个参数是插件帮我们提供好的，你可以当做固定写法
        //以便于后台接收参数后进行处理数据。当然还有其他参数，包括自定义参数等，后面会涉及到。
        var PF = function (params) {
            var temp = {   
                pageSize: params.limit,   //每页数据条数
                pageIndex: params.offset / params.limit //页码
            };
            return temp;
        };

    </script>

到目前为止，前端的所有工作都已经完成了，上面的代码中加了详细的注释，你只需要一个提供Json数据的路由就可以显示数据了。

后台代码只贴出了主要方法,这里模拟了一个带分页和筛选的数据查询

public JsonResult GetUsersWithPage(int pageSize, int pageIndex, string userName, string userId)
        {
            int total = 0;

            List<UserModel> userList = new List<UserModel>();

            for (int i = 0; i < 100; i++)
            {
                Random ra = new Random((unchecked((int)DateTime.Now.Ticks + i)));
                int age = ra.Next(10, 80); 
                UserModel model = new UserModel();
                model.ID = i;
                model.UserName = "User" + i.ToString();
                model.Sex = i % 2 == 1 ? "男" : "女";
                model.Age = age;
                userList.Add(model);
            }

            if (!string.IsNullOrEmpty(userName))
                userList = userList.Where(o=>o.UserName.Contains(userName)).ToList();

            if (!string.IsNullOrEmpty(userId))
                userList = userList.Where(o => o.ID.ToString()==userId).ToList();
            total = userList.Count;
            var pageUserList = userList.Skip(pageIndex*pageSize).Take(pageSize).ToList();
            return Json(new { total = total, rows = pageUserList }, JsonRequestBehavior.AllowGet);
        }

封装的Tbootstrap-table.js

var TableInit = function () {
    var oTableInit = new Object();

    oTableInit.Init = function (tableId, tableHeight, url, columnsData, PF, uniqueId) {
        $('#' + tableId).bootstrapTable({
            url: url,         
            method: 'get',                      
            striped: true,                      
            cache: false,                       
            pagination: true,                  
            sortable: true,                    
            sortOrder: "asc",                   
            queryParams: PF,
            sidePagination: "server",           
            pageNumber: 1,                       
            pageSize: 10,                       
            pageList: [10, 25, 50, 100],       
            search: false,                       
            strictSearch: true,
            showColumns: true,                  
            showRefresh: false,                  
            minimumCountColumns: 2,             
            clickToSelect: false,                
            height: tableHeight,                        
            uniqueId: uniqueId,                    
            showToggle: false,                    
            cardView: false,                   
            detailView: false,                   
            columns: columnsData
        });
    };
    return oTableInit;
};

完整项目下载地址：链接: https://pan.baidu.com/s/11nBrIfp75A39pV7akSpgeg 提取码: rpib