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的方式。

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

• 　页面代码　

    其实，负责显示数据的只有一行   

    其他的全是无关紧要的固定结构。

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

      
      
      
      //简单封装的js
  
      
      

    初始化表格JS
   

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

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

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

            List userList = new List();

            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

源码已修改