C# + MVC + BootStrap Table 简单封装

前言：

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/1SW__O1U4SDwK3EXNdbUkUw 提取码: t6uf

源码已修改