bootstrap table 光标_【Bootstrap系列】详解Bootstrap-table

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

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

(一)页面初始化

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

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

(二)查询

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

如下为查询结果：

(三)添加

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

2.实现可拖拽

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

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

1.选中删除

(六)导入

1.下载导入模板

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

(七)导出

1.选中导出

2.导出支持多种格式

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

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

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

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

(一)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