【Bootstrap系列】详解Bootstrap-table

最新推荐文章于 2025-06-25 07:49:02 发布

weixin_30606669

最新推荐文章于 2025-06-25 07:49:02 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

文章标签： json ui 数据库

原文链接：http://www.cnblogs.com/wangjiming/p/9370568.html

本文详细介绍了如何使用Bootstrap-table插件，涵盖了页面初始化、查询、添加、编辑、删除、导入、导出和父子表等功能。通过实例演示了核心代码和相关技术，包括日期处理、模态框、表格操作等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章将与大家分享bootstrap-table插件，借助于它实现基本的增删改查，导入导出，分页，父子表等。

至于其他技术，如冻结表头，列排列，行拖动，列拖动等，会在后续文章中与大家分享。

一效果图

（一）页面初始化

下图是页面首次加载结束后的效果，主要完成以下功能：

1.日期部分，开始时间：当前月第一天对应的8位日期，结束时间：当前月最后一天对应的8位日期，时间格式为：yyyy-mm-dd

2.bootstrap-table加载的数据为日期部分所对应的时间，且按照时间递减展示

（二）查询

1.支持日期查询和订单编号查询

2.当日期和订单编号都存在时，忽略日期条件(因为订单编号是唯一的)

如下为查询结果：

（三）添加

1.利用dialog模态框加载AddForm页面;

2.实现可拖拽

（四）编辑

1.利用dialog模态框加载EditForm页面

2.根据订单编号选择编辑

（五）删除

1.选中删除

（六）导入

1.下载导入模板

2.按照模板格式导入数据

（七）导出

1.选中导出

2.导出支持多种格式

（八）父子表

1.订单表作为父表，产品表作为子表

2.父表和字表通过产品编号来关联

二 Bootstrap-table讲解

关于bootstrap-table参数，需要掌握如下几大类：表格参数，列参数，事件，方法和多语言，

详情可以参考bootstrap-table官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

三本Demo技术讲解

（一）Demo架构图

本Demo采用UI+BLL+DAL+Model三层架构。

（二）核心代码

1.Bootstrap-table JS结构定义

 1 //初始化
 2 var InitTable = function (url) {
 3     //先销毁表格
 4     $('#tb_SaleOrder').bootstrapTable("destroy");
 5     //加载表格
 6     $('#tb_SaleOrder').bootstrapTable({
 7         rowStyle: function (row, index) {
    
    //row 表示行数据，object,index为行索引，从0开始
 8             var style = "";
 9             if (row.SignInTime == '' || row.SignOutTime=='') {
10                 style = { css: { 'color': 'red' } };
11             }
12             return  style;
13         },
14         //searchAlign: 'left',
15         //search: true,   //显示隐藏搜索框
16         showHeader: true,     //是否显示列头
17         //classes: 'table-no-bordered',
18         showLoading: true,
19         undefinedText: '',
20         showFullscreen: true,
21         toolbarAlign: 'left',
22         paginationHAlign: 'right',
23         silent: true,
24         url: url,
25         method: 'get',                      //请求方式（*）
26         toolbar: '#toolbar',                //工具按钮用哪个容器
27         striped: true,                      //是否显示行间隔色
28         cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
29         pagination: true,                   //是否显示分页（*）
30         sortable: false,                     //是否启用排序
31         sortOrder: "asc",                   //排序方式
32         //queryParams: InitTable.queryParams,  //传递参数（*）
33         sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
34         pageNumber: 1,                       //初始化加载第一页，默认第一页
35         pageSize: 10,                       //每页的记录行数（*）
36         pageList: [2, 5, 10, 15],        //可供选择的每页的行数（*）
37         search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
38         strictSearch: true,
39         showColumns: true,                  //是否显示所有的列
40         showRefresh: true,                  //是否显示刷新按钮
41         minimumCountColumns: 2,             //最少允许的列数
42         clickToSelect: true,                //是否启用点击选中行
43         //height: 680,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
44         uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
45         showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
46         cardView: false,                    //是否显示详细视图
47         detailView: false,                   //是否显示父子表
48         showExport: true,
49         //exportDataType: 'all',
50         exportDataType: "selected",        //导出checkbox选中的行数
51         paginationLoop: false,             //是否无限循环
52         columns: [{
53             checkbox: true
54         }, {
55                 field: 'OrderNO',
56                 title: '订单编号'
57         }, {
58                 field: 'ProductNo',
59                 title: '产品编号'
60         }, {
61                 field: 'CustName',
62                 title: '客户姓名'
63         }, {
64                 field: 'CustAddress',
65                 title: '客户地址',
66         }, {
67                 field: 'CustPhone',
68                 title: '客户电话',
69         }, {
70                 field: 'CustCompany',
71                 title: '客户公司',
72         }, {
73                 field: 'CreateDateTime',
74                 title: '订单创建时间',
75         }, {
76                 field: 'UpdateDateTime',
77                 title: '订单更新时间',
78         }]
79     });
80     return InitTable;
81 };

View Code

2.订单表增删改查

 1 $(function () {
 2     //初始时间控件
 3     var frstDayDate = GetLocalMonFrstDayDate();
 4     var lastDayDate = GetLocalMonLastDayDate();
 5     $("#startDate").val(frstDayDate);
 6     $("#endDate").val(lastDayDate);
 7 
 8     //初始化bootstrap-table参数
 9     var filterParam = "";
10     var startDate = $("#startDate").val();
11     var endDate = $("#endDate").val();
12     url = "/SaleManage/GetOrderList?startDate=" + startDate + "&endDate=" + endDate + "&orderNO=" + filterParam + "";
13     InitTable(url);
14 
15     //查询数据
16     $("#btn_query").click(function () {
17         var filterParam = $("#queryKey").val();
18         var startDate = $("#startDate").val();
19         var endDate = $("#endDate").val();
20         var url = "/SaleManage/GetOrderList?startDate="+ startDate + "&endDate=" +endDate + "&orderNO=" + filterParam + "";
21         InitTable(url);
22     })
23 
24     //添加
25     $("#btn_add").click(function () {
26         var url = "/SaleManage/AddForm";
27         openDialog(url, "AddForm", "添加订单", 645, 470, function (iframe) {
28             top.frames[iframe].AcceptClick()
29         });
30     })
31 
32     //编辑
33     $("#btn_edit").click(function () {
34         //获取当前选择行id
35         var selectedRows = $("#tb_SaleOrder").bootstrapTable('getSelections');
36         if (selectedRows.length <= 0) {
37             alert('请选择要编辑的数据');
38         } else if (selectedRows.length > 1) {
39             alert('一次只能选择一行数据进行编辑');
40         } else {
41             var KeyValue = selectedRows[0].OrderNO;
42             var url = "/SaleManage/EditForm?KeyValue=" + KeyValue;
43             openDialog(url, "EditForm", "编辑邮件", 645, 470, function (iframe) {
44                 top.frames[iframe].AcceptClick()
45             });
46         }
47     })
48     //删除数据
49     $("#btn_delete").click(function () {
50         //获取当前选择行id
51         var selectedRows = $("#tb_SaleOrder").bootstrapTable('getSelections');
52         if (selectedRows.length <= 0) {
53             alert('请选择要删除的数据');
54             return;
55         }
56         if (selectedRows.length > 1) {
57             alert('一次只能选择一行删除');
58             return;
59         }
60         var orderNo = selectedRows[0].OrderNO;
61         //aja异步请求
62         $.ajax({
63             url: '/SaleManage/DelOrder',
64             type: 'get',
65             contentType: 'application/json;charset=utf-8',
66             data: { orderNo: orderNo },
67             success: function (data) {
68                 //刷新bootstrap-table
69                 $("#tb_SaleOrder").bootstrapTable('refresh');
70             },
71             error: function (data) {
72                 alert('数据删除失败' + data);
73             }
74         })
75     })
76 
77     //回车键
78     document.onkeydown = function (e) {
79         if (!e) e = window.event; //火狐中是 window.event
80         if ((e.keyCode || e.which) == 13) {
81             var query = document.getElementById("btn_query");
82             query.focus();
83             query.click();
84         }
85     }
86 });

View Code

3.日期初始化

 1 //当月第一天所对应的日期 yyyy-mm-dd
 2 function GetLocalMonFrstDayDate() {
 3     var now = new Date();
 4     var year = now.getFullYear();//年
 5     var mon = now.getMonth() + 1;//月
 6     if (mon < 10) {
 7         mon = '-0' + mon;
 8     }
 9     var frstDay = "-01"; //日
10     return year + mon + frstDay;
11 }
12 //当月最后一天所对应的日期 yyyy-mm-dd
13 function GetLocalMonLastDayDate() {
14     var now = new Date();
15     var year = now.getFullYear();//年
16     var mon = now.getMonth() + 1;//月
17     if (mon < 10) {
18         mon = '-0' + mon;
19     }
20     var LastDay = "-" + GetDayCountInMon(year + mon);
21     return year + mon + LastDay;
22 }
23 //计算当月对应的最大天数
24 function GetDayCountInMon(YearMon) {
25     var arr = YearMon.split("-");
26     var localYear = parseInt(arr[0]);
27     var localMon = parseInt(arr[1]);
28     var localDate = new Date(localYear, localMon, 0);
29     return localDate.getDate();
30 }

View Code

4.Index.cshtml

 1 @{
 2     Layout = "~/Views/Shared/_LayoutBTSTable.cshtml";
 3 }
 4 
 5 <!--查询条件-->
 6 <div class="panel-body" style="padding-bottom:0px;width:104%;margin-left:-15px">
 7     <div class="panel panel-default">
 8         <div class="panel-heading">
 9             订单管理
10         </div>
11         <div style="margin-top:-30px;text-align:right">
12             <a href="~/Files/ImportTemple.xlsx" style="margin-right:20px">下载导入模板 </a>
13         </div>
14         <div class="panel-body">
15             <div style="margin-top:10px;">
16                 日期：
17                 <input type="text" id="startDate" style="height:35px;width:100px;margin-left:5px;margin-top:-32px;border-radius: 6px;border: 1px #cccccc solid; outline: none" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})">
18                 —
19                 <input type="text" id="endDate" style="height:35px;width:100px;margin-left:8px;margin-top:-34px;border-radius: 6px;border: 1px #cccccc solid; outline: none" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})">
20                 &nbsp; &nbsp;订单编号：<input type="text" id="queryKey" placeholder="请输入订单编号进行查询" style="height:35px;width:170px;margin-left:10px;margin-top:-34px;border-radius: 6px;border: 1px #cccccc solid; outline: none">
21                 <button type="button" style="width:70px;height:35px;margin-left:20px;margin-top:-3px" id="btn_query" class="btn btn-success">查询</button>
22                 <button type="button" style="width:70px;height:35px;margin-left:20px;margin-top:-3px" id="btn_add" class="btn btn-info">添加</button>
23                 <button type="button" style="width:70px;height:35px;margin-left:20px;margin-top:-3px" id="btn_edit" class="btn btn-warning">编辑</button>
24                 <button type="button" style="width:70px;height:35px;margin-left:20px;margin-top:-3px" id="btn_delete" class="btn btn-danger">删除</button>
25             </div>
26         </div>
27     </div>
28 </div>
29 <!--初始化bootstrap-table-->
30 <div