基于BootstrapTable的简单应用

系统管理员 2021-09-12 07:52 550阅读 0赞

Bootstrap Table基于Bootstrap的jQuery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

本文将以一个基于BootstrapTable控件的图书列表查询功能为实例（如图1）。注意本实例使用了ASP.NET MVC。

Center

图1

页面代码：

  1. @{
  2.     Layout = null;
  3.     ViewBag.Title = "基于BootstrapTable的简单应用";
  4. }
  6. <!--添加相关样式引用-->
  7. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
  8. <link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />
  10. <div class="container body-content" style="padding-top:20px;">
  11.     <div class="panel panel-default">
  12.         <div class="panel-heading">查询条件</div>
  13.         <div class="panel-body">
  14.             <form class="form-inline">
  15.                 <div class="row">
  16.                     <div class="col-sm-4">
  17.                         <label class="control-label">图书名称：</label>
  18.                         <input id="txtTitle" type="text" class="form-control">
  19.                     </div>
  20.                     <div class="col-sm-4">
  21.                         <label class="control-label">图书作者：</label>
  22.                         <input id="txtAuthor" type="text" class="form-control">
  23.                     </div>
  24.                     <div class="col-sm-4">
  25.                         <label class="control-label">出版社：</label>
  26.                         <input id="txtPublish" type="text" class="form-control">
  27.                     </div>
  28.                 </div>
  30.                 <div class="row text-right" style="margin-top:20px;">
  31.                     <div class="col-sm-12">
  32.                         <input class="btn btn-primary" type="button" value="查询" onclick="SearchData()">
  33.                         <input class="btn btn-default" type="button" value="批量删除" onclick="BtchDeleteBook()">
  34.                     </div>
  35.                 </div>
  36.             </form>
  37.         </div>
  38.     </div>
  40.     <table id="table"></table>
  41. </div>
  43. <!--添加相关脚本引用-->
  44. <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  45. <script src="~/Scripts/bootstrap.min.js"></script>
  46. <script src="~/Scripts/bootstrap-table.min.js"></script>
  47. <script src="~/Scripts/bootstrap-table-zh-CN.min.js"></script>
  48. <script type="text/javascript">
  49.     $(document).ready(function () {
  50.         $('#table').bootstrapTable({
  51.             url: '@Url.Action("SearchBookInfo", "Home")',
  52.             queryParamsType: '',              //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
  53.             queryParams: queryParams,
  54.             method: "post",
  55.             pagination: true,
  56.             pageNumber: 1,
  57.             pageSize: 2,
  58.             pageList: [10, 20, 50, 100],
  59.             sidePagination: "server",         //分页方式：client客户端分页，server服务端分页（*）
  60.             striped: true,                    //是否显示行间隔色
  61.             cache: false,
  62.             uniqueId: "BookId",               //每一行的唯一标识，一般为主键列
  63.             height:300,
  64.             paginationPreText: "上一页",
  65.             paginationNextText: "下一页",
  66.             columns: [
  67.                 { checkbox: true },
  68.                 { title: '序号', width: 50, align: "center", formatter: function (value, row, index) { return index + 1; } },
  69.                 { title: '图书名称', field: 'Title' },
  70.                 { title: '图书作者', field: 'Author' },
  71.                 { title: '销售价格', field: 'Price' },
  72.                 { title: '出版社', field: 'Publish' },
  73.                 {
  74.                     title: '出版时间', field: 'PublishDate', formatter: function (value, row, index) {
  75.                         if (value == null)
  76.                             return "";
  77.                         else {
  78.                             var pa = /.*\((.*)\)/;
  79.                             var unixtime = value.match(pa)[1].substring(0, 10);
  80.                             return getShortTime(unixtime);
  81.                         }
  82.                     }
  83.                 },
  84.                 {
  85.                     title: '操作', field: 'BookId', formatter: function (value, row, index) {
  86.                         var html = '<a href="javascript:EditBook('+ value + ')">编辑</a>';
  87.                         html += '　<a href="javascript:DeleteBook(' + value + ')">删除</a>';
  88.                         return html;
  89.                     }
  90.                 }
  91.             ]
  92.         });
  93.     });
  95.     //查询条件
  96.     function queryParams(params) {
  97.         return {
  98.             pageSize: params.pageSize,
  99.             pageIndex: params.pageNumber,
  100.             Title: $.trim($("#txtTitle").val()),
  101.             Author: $.trim($("#txtAuthor").val()),
  102.             Publish: $.trim($("#txtPublish").val()),
  103.         };
  104.     }
  106.     //查询事件
  107.     function SearchData() {
  108.         $('#table').bootstrapTable('refresh', { pageNumber: 1 });
  109.     }
  111.     //编辑操作
  112.     function EditBook(bookId){
  113.         alert("编辑操作，图书ID：" + bookId);
  114.     }
  116.     //删除操作
  117.     function DeleteBook(bookId) {
  118.         if (confirm("确定删除图书ID：" + bookId + "吗？"))
  119.         {
  120.             alert("执行删除操作");
  121.         }
  122.     }
  124.     //批量删除
  125.     function BtchDeleteBook(){
  126.         var opts = $('#table').bootstrapTable('getSelections');
  127.         if (opts == "") {
  128.             alert("请选择要删除的数据");
  129.         }
  130.         else {
  131.             var idArray = [];
  132.             for (var i = 0; i < opts.length; i++) {
  133.                 idArray.push(opts[i].BookId);
  134.             }
  135.             if (confirm("确定删除图书ID：" + idArray + "吗？")) {
  136.                 alert("执行删除操作");
  137.             }
  138.         }
  139.     }
  141.     function getTime(/** timestamp=0 **/) {
  142.         var ts = arguments[0] || 0;
  143.         var t, y, m, d, h, i, s;
  144.         t = ts ? new Date(ts * 1000) : new Date();
  145.         y = t.getFullYear();
  146.         m = t.getMonth() + 1;
  147.         d = t.getDate();
  148.         h = t.getHours();
  149.         i = t.getMinutes();
  150.         s = t.getSeconds();
  151.         // 可根据需要在这里定义时间格式
  152.         return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
  153.     }
  155.     function getShortTime(/** timestamp=0 **/) {
  156.         var ts = arguments[0] || 0;
  157.         var t, y, m, d, h, i, s;
  158.         t = ts ? new Date(ts * 1000) : new Date();
  159.         y = t.getFullYear();
  160.         m = t.getMonth() + 1;
  161.         d = t.getDate();
  162.         // 可根据需要在这里定义时间格式
  163.         return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
  164.     }
  166. </script>

控制器代码：

  1. /// <summary>
  2. /// 查询图书信息
  3. /// </summary>
  4. /// <param name="param"></param>
  5. /// <returns></returns>
  6. public JsonResult SearchBookInfo(BookInfo param, int pageSize, int pageIndex)
  7. {
  8.     //获取图书列表
  9.     List<BookInfo> bookList = GetBookList();
  11.     //根据条件筛选数据
  12.     if (!String.IsNullOrEmpty(param.Title))
  13.     {
  14.         bookList = bookList.Where(a => a.Title.Contains(param.Title)).ToList();
  15.     }
  16.     if (!String.IsNullOrEmpty(param.Author))
  17.     {
  18.         bookList = bookList.Where(a => a.Author.Contains(param.Author)).ToList();
  19.     }
  20.     if (!String.IsNullOrEmpty(param.Publish))
  21.     {
  22.         bookList = bookList.Where(a => a.Publish.Contains(param.Publish)).ToList();
  23.     }
  25.     //BootstrapTable的返回结果
  26.     BootstrapTableResult<BookInfo> result = new BootstrapTableResult<BookInfo>();
  27.     result.total = bookList.Count;
  28.     result.rows = bookList;
  29.     return Json(result);
  30. }
  32. /// <summary>    
  33. /// 获取图书列表    
  34. /// </summary>    
  35. /// <returns></returns>    
  36. public List<BookInfo> GetBookList()
  37. {
  38.     List<BookInfo> bookList = new List<BookInfo>();
  39.     BookInfo book1 = new BookInfo()
  40.     {
  41.         BookId = 8,
  42.         Title = "ASP.NET MVC 5高级编程",
  43.         Author = "加洛韦",
  44.         Publish = "清华大学出版社",
  45.         PublishDate = new DateTime(2017, 08, 15),
  46.         Price = 29.99
  47.     };
  48.     bookList.Add(book1);
  49.     BookInfo book2 = new BookInfo()
  50.     {
  51.         BookId = 9,
  52.         Title = "Java从入门到精通",
  53.         Author = "明日科技",
  54.         Publish = "清华大学出版社",
  55.         PublishDate = new DateTime(2015, 09, 28),
  56.         Price = 38.55
  57.     };
  58.     bookList.Add(book2);
  59.     BookInfo book3 = new BookInfo()
  60.     {
  61.         BookId = 10,
  62.         Title = "Oracle从入门到精通",
  63.         Author = "秦靖",
  64.         Publish = "机械工业出版社",
  65.         PublishDate = new DateTime(2014, 10, 08),
  66.         Price = 38.55
  67.     };
  68.     bookList.Add(book3);
  69.     return bookList;
  70. }

其他代码：

  1. /// <summary>    
  2. /// 图书信息实体类    
  3. /// </summary>    
  4. public class BookInfo
  5. {
  6.     public int BookId { set; get; }             //图书ID    
  7.     public string Title { set; get; }           //图书名称    
  8.     public string Author { set; get; }          //图书作者  
  9.     public string Publish { set; get; }         //出版社
  10.     public DateTime PublishDate { set; get; }   //出版时间    
  11.     public Double Price { set; get; }           //销售价格    
  12. }
  16. /// <summary>
  17. /// BootstrapTable返回结果类
  18. /// </summary>
  19. public class BootstrapTableResult<T>
  20. {
  21.     public int total { get; set; }      //总记录数
  22.     public List<T> rows { get; set; }   //数据列表
  23. }

Bootstrap Table资料网站：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

发表评论

表情：
评论列表 （有 0 条评论，550人围观）

还没有评论，来说两句吧...

相关阅读