demo访问地址：http://106.14.139.196/SaleManage/Index
本篇文章将与大家分享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结构定义
2.订单表增删改查
3.日期初始化
4.Index.cshtml
5.AddForm.cshtml
6.EditForm.cshtml
7.Import.cshtml
8.ParentAndChild.cshtml
9.布局页 _LayoutBTSTable.cshtml
10.ImportExcelToDB.cs
12.ConvertHelpers.cs
13.SaleManageController
14.父子表JS
（三）其他技术点
1.改变bootstrap-table表头颜色
1 #tb_SaleOrder > thead th {
2 padding: 0;
3 margin: 0;
4 background-color: #d9edf7;
5 }
2.改变bootstrap-table 光标悬停颜色
1 #tb_SaleOrder tbody > tr:hover {
2 background-color: #449d44;
3 }
3.刷新bootstrap-table
1 //刷新bootstrap-table
2 function refleshBootStrapTable() {
3 $("#tb_SaleOrder").bootstrapTable(‘refresh‘);
4 }
4.弹窗
1 /*
2 弹出对话框（带：确认按钮、取消按钮）
3 */
4 function openDialog(url, _id, _title, _width, _height, callBack) {
5 Loading(true);
6 top.$.dialog({
7 id: _id,
8 width: _width,
9 height: _height,
10 max: false,
11 lock: true,
12 title: _title,
13 resize: false,
14 extendDrag: true,
15 content: ‘url:‘ + RootPath() + url,
16 ok: function () {
17 callBack(_id);
18 return false;
19 },
20 cancel: true
21 });
22 }
5.Bootstrap-table核心技术点，再次强调
1 var InitTable = function (url) {
2 //先销毁表格
3 $(‘#tb_SaleOrder‘).bootstrapTable("destroy");
4 //加载表格
5 $(‘#tb_SaleOrder‘).bootstrapTable({
6 rowStyle: function (row, index) {//row 表示行数据，object,index为行索引，从0开始
7 var style = "";
8 if (row.SignInTime == ‘‘ || row.SignOutTime==‘‘) {
9 style = { css: { ‘color‘: ‘red‘ } };
10 }
11 return style;
12 },
13 //searchAlign: ‘left‘,
14 //search: true, //显示隐藏搜索框
15 showHeader: true, //是否显示列头
16 //classes: ‘table-no-bordered‘,
17 showLoading: true,
18 undefinedText: ‘‘,
19 showFullscreen: true,
20 toolbarAlign: ‘left‘,
21 paginationHAlign: ‘right‘,
22 silent: true,
23 url: url,
24 method: ‘get‘, //请求方式（*）
25 toolbar: ‘#toolbar‘, //工具按钮用哪个容器
26 striped: true, //是否显示行间隔色
27 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
28 pagination: true, //是否显示分页（*）
29 sortable: false, //是否启用排序
30 sortOrder: "asc", //排序方式
31 //queryParams: InitTable.queryParams, //传递参数（*）
32 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
33 pageNumber: 1, //初始化加载第一页，默认第一页
34 pageSize: 10, //每页的记录行数（*）
35 pageList: [2, 5, 10, 15], //可供选择的每页的行数（*）
36 search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
37 strictSearch: true,
38 showColumns: true, //是否显示所有的列
39 showRefresh: true, //是否显示刷新按钮
40 minimumCountColumns: 2, //最少允许的列数
41 clickToSelect: true, //是否启用点击选中行
42 //height: 680, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
43 uniqueId: "ID", //每一行的唯一标识，一般为主键列
44 showToggle: true, //是否显示详细视图和列表视图的切换按钮
45 cardView: false, //是否显示详细视图
46 detailView: false, //是否显示父子表
47 showExport: true,
48 //exportDataType: ‘all‘,
49 exportDataType: "selected", //导出checkbox选中的行数
50 paginationLoop: false, //是否无限循环
51 columns: [{
52 checkbox: true
53 }, {
54 field: ‘OrderNO‘,
55 title: ‘订单编号‘
56 }, {
57 field: ‘ProductNo‘,
58 title: ‘产品编号‘
59 }, {
60 field: ‘CustName‘,
61 title: ‘客户姓名‘
62 }, {
63 field: ‘CustAddress‘,
64 title: ‘客户地址‘,
65 }, {
66 field: ‘CustPhone‘,
67 title: ‘客户电话‘,
68 }, {
69 field: ‘CustCompany‘,
70 title: ‘客户公司‘,
71 }, {
72 field: ‘CreateDateTime‘,
73 title: ‘订单创建时间‘,
74 }, {
75 field: ‘UpdateDateTime‘,
76 title: ‘订单更新时间‘,
77 }]
78 });
79 return InitTable;
80 };
四 写在最后
本片文章借助于bootstrap-table插件，实现了基本的增删改查，导入导出，分页，父子表等。至于其他技术，如冻结表头，列排列，行拖动，列拖动等，会在后续文章中与大家分享。
五 版权区
感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
从入门到架构群：820424。
极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2098469527@qq.com。
demo访问地址：http://106.14.139.196/SaleManage/Index ,本套源码49元，需要购买请咨询：2098469527
可以转载该博客，但必须著名博客来源。