三层MVC框架

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结构定义

View Code

2.订单表增删改查

View Code

3.日期初始化

View Code

4.Index.cshtml

View Code

5.AddForm.cshtml

View Code

6.EditForm.cshtml

View Code

7.Import.cshtml

View Code

8.ParentAndChild.cshtml

View Code

9.布局页 _LayoutBTSTable.cshtml

View Code

10.ImportExcelToDB.cs

View Code

12.ConvertHelpers.cs

View Code

13.SaleManageController

View Code

14.父子表JS

View Code

（三）其他技术点

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。

极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。

如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：[email protected]。

demo访问地址：http://106.14.139.196/SaleManage/Index ,本套源码49元，需要购买请咨询：2098469527

可以转载该博客，但必须著名博客来源。

相关推荐