【Bootstrap系列】詳解Bootstrap-table
本篇文章將與你們分享bootstrap-table插件，藉助於它實現基本的增刪改查，導入導出，分頁，父子表等。css
至於其餘技術，如凍結表頭，列排列，行拖動，列拖動等，會在後續文章中與你們分享。html
一 效果圖jquery
（一）頁面初始化ajax
下圖是頁面首次加載結束後的效果，主要完成如下功能：sql
1.日期部分，開始時間：當前月第一天對應的8位日期，結束時間：當前月最後一天對應的8位日期，時間格式爲：yyyy-mm-dd 數據庫
2.bootstrap-table加載的數據爲日期部分所對應的時間，且按照時間遞減展現json
（二）查詢bootstrap
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 };
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 });
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 }
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 訂單編號：<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 style="margin-bottom:-40px;color:red">註釋：訂單數據</div> 31 <table id="tb_SaleOrder" class="table"></table> 32 33 <style> 34 #tb_SaleOrder tbody > tr:hover { 35 background-color: #449d44; 36 } 37 38 #tb_SaleOrder > thead th { 39 padding: 0; 40 margin: 0; 41 background-color: #d9edf7; 42 } 43 </style> 44 <script> 45 //刷新bootstrap-table 46 function refleshBootStrapTable() { 47 $("#tb_SaleOrder").bootstrapTable('refresh'); 48 } 49 </script> 50 51 <script src="~/CustomUI/TableJS/SaleOrder.js"></script>
5.AddForm.cshtml
1 @{ 2 ViewBag.Title = "AddForm"; 3 Layout = "~/Views/Shared/_LayoutBTSTable.cshtml"; 4 } 5 6 <script> 7 //添加數據 8 function AcceptClick() { 9 var OrderNO = $("#OrderNO").val(); 10 var ProductNo = $("#ProductNo").val(); 11 var CustName = $("#CustName").val(); 12 var CustAddress = $("#CustAddress").val(); 13 var CustPhone = $("#CustPhone").val(); 14 var CustCompany = $("#CustCompany").val(); 15 var CreateDateTime = $("#CreateDateTime").val(); 16 var UpdateDateTime = $("#UpdateDateTime").val(); 17 $.ajax({ 18 url: '/SaleManage/AddDataToDB', 19 type: 'get', 20 contentType: 'application/json;charset=utf-8', 21 data: { 22 'OrderNO': OrderNO, 'ProductNo': ProductNo, 'CustName': CustName, 23 'CustAddress': CustAddress, 'CustPhone': CustPhone, 'CustCompany': CustCompany, 24 'CreateDateTime': CreateDateTime, 'UpdateDateTime': UpdateDateTime 25 }, 26 success: function (data) { 27 reflesh(); 28 //關閉對話框 29 closeDialog(); 30 }, 31 error: function (data) { 32 alert('添加數據失敗' + data); 33 } 34 }) 35 } 36 //刷新 37 function reflesh() { 38 window.parent.refleshBootStrapTable(); 39 } 40 </script> 41 42 43 <div class="table" style="width:100%;margin-top:10px"> 44 <table id="tb_SaleOrder_Add" class="table text-nowrap" style="text-align:right;"> 45 <tr> 46 <td style="height:35px;line-height:35px">訂單編號 ：</td> 47 <td><input type="text" id="OrderNO" style="width:500px;" /></td> 48 </tr> 49 <tr> 50 <td style="height:35px;line-height:35px">產品名稱 ：</td> 51 <td><input type="text" id="ProductNo" style="width:500px;" /></td> 52 </tr> 53 <tr> 54 <td style="height:35px;line-height:35px">客戶姓名 ：</td> 55 <td><input type="text" id="CustName" style="width:500px;" /></td> 56 </tr> 57 <tr> 58 <td style="height:35px;line-height:35px">客戶地址 ：</td> 59 <td><input type="text" id="CustAddress" style="width:500px;" /></td> 60 </tr> 61 <tr> 62 <td style="height:35px;line-height:35px">客戶電話 ：</td> 63 <td><input type="text" id="CustPhone" style="width:500px;" /></td> 64 </tr> 65 <tr> 66 <td style="height:35px;line-height:35px">客戶公司 ：</td> 67 <td><input type="text" id="CustCompany" style="width:500px;" /></td> 68 </tr> 69 <tr> 70 <td style="height:35px;line-height:35px">訂單建立時間 ：</td> 71 <td><input type="text" id="CreateDateTime" style="width:500px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate"/></td> 72 </tr> 73 <tr> 74 <td style="height:35px;line-height:35px">訂單更新時間 ：</td> 75 <td><input type="text" id="UpdateDateTime" style="width:500px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate"/></td> 76 </tr> 77 </table> 78 </div> 79 80 <style> 81 #tb_SaleOrder_Add td input[type=text] { 82 height: 35px; 83 border-radius: 6px; 84 border: 1px #cccccc solid; 85 outline: none 86 } 87 </style>
6.EditForm.cshtml
@{ ViewBag.Title = "EditForm"; Layout = "~/Views/Shared/_LayoutBTSTable.cshtml"; } <script> $(function () { //初始化頁面控件 $.ajax({ url: "/SaleManage/InitModifySheet", type: 'get', contentType: 'application/json;charset=utf-8', data: { orderNO: GetQuery('KeyValue') }, success: function (data) { //將回調數據轉化爲json對象 var jsonData = eval(data); //遍歷，爲表單賦值 $("#OrderNO").val(jsonData[0].OrderNO); $("#ProductNo").val(jsonData[0].ProductNo); $("#CustName").val(jsonData[0].CustName); $("#CustAddress").val(jsonData[0].CustAddress); $("#CustPhone").val(jsonData[0].CustPhone); $("#CustCompany").val(jsonData[0].CustCompany); $("#CreateDateTime").val(jsonData[0].CreateDateTime); $("#UpdateDateTime").val(jsonData[0].UpdateDateTime); }, error: function (data) { alert('編輯數據失敗' + data); } }) }) //添加數據 function AcceptClick() { var OrderNO = $("#OrderNO").val(); var ProductNo = $("#ProductNo").val(); var CustName = $("#CustName").val(); var CustAddress = $("#CustAddress").val(); var CustPhone = $("#CustPhone").val(); var CustCompany = $("#CustCompany").val(); var CreateDateTime = $("#CreateDateTime").val(); var UpdateDateTime = $("#UpdateDateTime").val(); $.ajax({ url: '/SaleManage/ModifyDataToDB', type: 'get', contentType: 'application/json;charset=utf-8', data: { 'OrderNO': OrderNO, 'ProductNo': ProductNo, 'CustName': CustName, 'CustAddress': CustAddress, 'CustPhone': CustPhone, 'CustCompany': CustCompany, 'CreateDateTime': CreateDateTime, 'UpdateDateTime': UpdateDateTime }, success: function (data) { reflesh(); //關閉對話框 closeDialog(); }, error: function (data) { alert('添加數據失敗' + data); } }) } //刷新 function reflesh() { window.parent.refleshBootStrapTable(); } </script> <div class="table" style="width:100%;margin-top:10px"> <table id="tb_SaleOrder_Add" class="table text-nowrap" style="text-align:right;"> <tr> <td style="height:35px;line-height:35px">訂單編號 ：</td> <td><input type="text" id="OrderNO" style="width:500px;" disabled/></td> </tr> <tr> <td style="height:35px;line-height:35px">產品名稱 ：</td> <td><input type="text" id="ProductNo" style="width:500px;" /></td> </tr> <tr> <td style="height:35px;line-height:35px">客戶姓名 ：</td> <td><input type="text" id="CustName" style="width:500px;" /></td> </tr> <tr> <td style="height:35px;line-height:35px">客戶地址 ：</td> <td><input type="text" id="CustAddress" style="width:500px;" /></td> </tr> <tr> <td style="height:35px;line-height:35px">客戶電話 ：</td> <td><input type="text" id="CustPhone" style="width:500px;" /></td> </tr> <tr> <td style="height:35px;line-height:35px">客戶公司 ：</td> <td><input type="text" id="CustCompany" style="width:500px;" /></td> </tr> <tr> <td style="height:35px;line-height:35px">訂單建立時間 ：</td> <td><input type="text" id="CreateDateTime" style="width:500px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" /></td> </tr> <tr> <td style="height:35px;line-height:35px">訂單更新時間 ：</td> <td><input type="text" id="UpdateDateTime" style="width:500px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" /></td> </tr> </table> </div> <style> #tb_SaleOrder_Add td input[type=text] { height: 35px; border-radius: 6px; border: 1px #cccccc solid; outline: none } </style>
7.Import.cshtml
1 @{ 2 ViewBag.Title = "EditForm"; 3 Layout = "~/Views/Shared/_LayoutBTSTable.cshtml"; 4 } 5 6 <script> 7 $(function () { 8 //初始化頁面控件 9 $.ajax({ 10 url: "/SaleManage/InitModifySheet", 11 type: 'get', 12 contentType: 'application/json;charset=utf-8', 13 data: { 14 orderNO: GetQuery('KeyValue') 15 }, 16 success: function (data) { 17 //將回調數據轉化爲json對象 18 var jsonData = eval(data); 19 //遍歷，爲表單賦值 20 $("#OrderNO").val(jsonData[0].OrderNO); 21 $("#ProductNo").val(jsonData[0].ProductNo); 22 $("#CustName").val(jsonData[0].CustName); 23 $("#CustAddress").val(jsonData[0].CustAddress); 24 $("#CustPhone").val(jsonData[0].CustPhone); 25 $("#CustCompany").val(jsonData[0].CustCompany); 26 $("#CreateDateTime").val(jsonData[0].CreateDateTime); 27 $("#UpdateDateTime").val(jsonData[0].UpdateDateTime); 28 }, 29 error: function (data) { 30 alert('編輯數據失敗' + data); 31 } 32 }) 33 }) 34 35 //添加數據 36 function AcceptClick() { 37 var OrderNO = $("#OrderNO").val(); 38 var ProductNo = $("#ProductNo").val(); 39 var CustName = $("#CustName").val(); 40 var CustAddress = $("#CustAddress").val(); 41 var CustPhone = $("#CustPhone").val(); 42 var CustCompany = $("#CustCompany").val(); 43 var CreateDateTime = $("#CreateDateTime").val(); 44 var UpdateDateTime = $("#UpdateDateTime").val(); 45 $.ajax({ 46 url: '/SaleManage/ModifyDataToDB', 47 type: 'get', 48 contentType: 'application/json;charset=utf-8', 49 data: { 50 'OrderNO': OrderNO, 'ProductNo': ProductNo, 'CustName': CustName, 51 'CustAddress': CustAddress, 'CustPhone': CustPhone, 'CustCompany': CustCompany, 52 'CreateDateTime': CreateDateTime, 'UpdateDateTime': UpdateDateTime 53 }, 54 success: function (data) { 55 reflesh(); 56 //關閉對話框 57 closeDialog(); 58 }, 59 error: function (data) { 60 alert('添加數據失敗' + data); 61 } 62 }) 63 } 64 //刷新 65 function reflesh() { 66 window.parent.refleshBootStrapTable(); 67 } 68 </script> 69 70 71 72 <div class="table" style="width:100%;margin-top:10px"> 73 <table id="tb_SaleOrder_Add" class="table text-nowrap" style="text-align:right;"> 74 <tr> 75 <td style="height:35px;line-height:35px">訂單編號 ：</td> 76 <td><input type="text" id="OrderNO" style="width:500px;" disabled/></td> 77 </tr> 78 <tr> 79 <td style="height:35px;line-height:35px">產品名稱 ：</td> 80 <td><input type="text" id="ProductNo" style="width:500px;" /></td> 81 </tr> 82 <tr> 83 <td style="height:35px;line-height:35px">客戶姓名 ：</td> 84 <td><input type="text" id="CustName" style="width:500px;" /></td> 85 </tr> 86 <tr> 87 <td style="height:35px;line-height:35px">客戶地址 ：</td> 88 <td><input type="text" id="CustAddress" style="width:500px;" /></td> 89 </tr> 90 <tr> 91 <td style="height:35px;line-height:35px">客戶電話 ：</td> 92 <td><input type="text" id="CustPhone" style="width:500px;" /></td> 93 </tr> 94 <tr> 95 <td style="height:35px;line-height:35px">客戶公司 ：</td> 96 <td><input type="text" id="CustCompany" style="width:500px;" /></td> 97 </tr> 98 <tr> 99 <td style="height:35px;line-height:35px">訂單建立時間 ：</td> 100 <td><input type="text" id="CreateDateTime" style="width:500px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" /></td> 101 </tr> 102 <tr> 103 <td style="height:35px;line-height:35px">訂單更新時間 ：</td> 104 <td><input type="text" id="UpdateDateTime" style="width:500px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" /></td> 105 </tr> 106 </table> 107 </div> 108 109 <style> 110 #tb_SaleOrder_Add td input[type=text] { 111 height: 35px; 112 border-radius: 6px; 113 border: 1px #cccccc solid; 114 outline: none 115 } 116 </style>
8.ParentAndChild.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 訂單編號：<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 style="margin-bottom:-40px;color:red">註釋：父子表</div> 31 <table id="tb_SaleOrder" class="table"></table> 32 33 <style> 34 #tb_SaleOrder > thead th { 35 padding: 0; 36 margin: 0; 37 background-color: #d9edf7; 38 } 39 </style> 40 <script> 41 //刷新bootstrap-table 42 function refleshBootStrapTable() { 43 $("#tb_SaleOrder").bootstrapTable('refresh'); 44 } 45 </script> 46 47 <script src="~/CustomUI/TableJS/ParentChild.js"></script>
9.佈局頁 _LayoutBTSTable.cshtml
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width" /> 6 <link href="~/CustomUI/bootstrap/css/bootstrap.css" rel="stylesheet" /> 7 <link href="~/CustomUI/bootstrapTable/bootstrap-table.css" rel="stylesheet" /> 8 <link href="~/CustomUI/skin/WdatePicker.css" rel="stylesheet" /> 9 <script src="~/CustomUI/jquery/jquery-3.3.1.js"></script> 10 <script src="~/CustomUI/lhgdialog/lhgdialog.min.js"></script> 11 <script src="~/CustomUI/bootstrap/js/bootstrap.js"></script> 12 <script src="~/CustomUI/bootstrapTable/bootstrap-table.js"></script> 13 <script src="~/CustomUI/bootstrapTable/tableExport.js"></script> 14 <script src="~/CustomUI/bootstrapTable/bootstrap-table-export.js"></script> 15 <script src="~/CustomUI/bootstrapTable/bootstrap-table-zh-CN.js"></script> 16 <script src="~/CustomUI/datepicker/WdatePicker.js"></script> 17 </head> 18 <body> 19 <div> 20 @RenderBody() 21 </div> 22 </body> 23 </html> 24 25 <script src="~/CustomUI/TableJS/DialogTemple.js"></script>
10.ImportExcelToDB.cs
1 using System; 2 using System.Collections.Generic; 3 using System.Configuration; 4 using System.Data; 5 using System.Data.OleDb; 6 using System.Data.SqlClient; 7 using System.Linq; 8 using System.Text; 9 using System.Web; 10 11 namespace BTStrapTB.Common 12 { 13 public class ImportExcelToDB 14 { 15 //全局數據庫鏈接字符串 16 private readonly string strConnection = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString; 17 18 //從Excel讀取數據 19 public static DataSet ReadExcelDataToTable(string filepath) 20 { 21 try 22 { 23 int index1 = filepath.LastIndexOf("\\"); 24 int index2 = filepath.LastIndexOf("."); 25 string fileName ="["+filepath.Substring(index1+1,index2-index1-1)+"$]"; 26 string strConn = string.Format("Provider=Microsoft.ACE.OLEDB.12.0;Data Source={0};Extended Properties='Excel 8.0;HDR=Yes;IMEX=1;'", filepath); 27 using (OleDbConnection oleConn = new OleDbConnection(strConn)) 28 { 29 oleConn.Open(); 30 string sql = "select * from "+fileName+ ""; 31 OleDbDataAdapter oleDaExcel = new OleDbDataAdapter(sql, oleConn); 32 DataSet oleDsExcel = new DataSet(); 33 oleDaExcel.Fill(oleDsExcel, "table1"); 34 return oleDsExcel; 35 } 36 } 37 catch (Exception ex) 38 { 39 throw ex; 40 } 41 } 42 public void InsertExcelDataToDB(string fileName) 43 { 44 //導入表格格式化SQL 45 string sqlText = @"INSERT INTO [dbo].[SaleOrder] 46 ([OrderNO] 47 ,[ProductNo] 48 ,[CustName] 49 ,[CustAddress] 50 ,[CustPhone] 51 ,[CustCompany] 52 ,[CreateDateTime] 53 ,[UpDateDateTime]) 54 VALUES 55 ('{0}','{1}','{2}','{3}','{4}','{5}','{6}','{7}')"; 56 57 if (!System.IO.File.Exists(fileName)) 58 { 59 throw new Exception("指定路徑的Excel文件不存在！"); 60 } 61 DataSet ds = ReadExcelDataToTable(fileName); 62 DataTable dt = ds.Tables[0]; 63 //將excel數據插入到DB以前，先判斷DB中是否存在數據 64 DelDBRepeatData(dt); 65 List<string> list = (from DataRow row in dt.Rows 66 select String.Format(sqlText, row[0], row[1], row[2], row[3], row[4], row[5], row[6], row[7])).ToList(); 67 OperateDB(list); 68 } 69 70 /* 71 將excel數據插入到DB以前， 72 先判斷DB中是否存在同一天同一員工記錄 73 */ 74 public int DelDBRepeatData(DataTable dt) 75 { 76 //sql腳本 77 string delSqlText = @"DELETE FROM [dbo].[SaleOrder] 78 WHERE OrderNO IN ('{0}') 79 "; 80 81 //取excel中的員工號和打卡日期 82 StringBuilder strBld = new StringBuilder(); 83 84 for (int i = 0; i < dt.Rows.Count; i++) 85 { 86 strBld.Append(dt.Rows[i][0]); 87 88 } 89 90 List<string> list = (from DataRow row in dt.Rows 91 select String.Format(delSqlText, row[0])).ToList(); 92 93 OperateDB(list); 94 return 0; 95 } 96 97 //DB操做 98 public int OperateDB(List<string> list) 99 { 100 int result = 0; 101 using (SqlConnection conn = new SqlConnection(strConnection)) 102 { 103 if (conn.State==ConnectionState.Closed) 104 { 105 conn.Open(); 106 } 107 foreach (string item in list) 108 { 109 SqlCommand cmd = new SqlCommand(item, conn); 110 result=cmd.ExecuteNonQuery(); 111 } 112 } 113 return result; 114 } 115 } 116 }
12.ConvertHelpers.cs
1 using Newtonsoft.Json; 2 using System; 3 using System.Collections.Generic; 4 using System.Data; 5 using System.Linq; 6 using System.Reflection; 7 using System.Web; 8 9 namespace BTStrapTB.Common 10 { 11 /// <summary> 12 /// 轉換Json格式幫助類 13 /// </summary> 14 public static class JsonHelper 15 { 16 public static object ToJson(this string Json) 17 { 18 return JsonConvert.DeserializeObject(Json); 19 } 20 public static string ToJson(this object obj) 21 { 22 return JsonConvert.SerializeObject(obj); 23 } 24 public static List<T> JonsToList<T>(this string Json) 25 { 26 return JsonConvert.DeserializeObject<List<T>>(Json); 27 } 28 public static T JsonToEntity<T>(this string Json) 29 { 30 return JsonConvert.DeserializeObject<T>(Json); 31 } 32 } 33 }
13.SaleManageController
1 using BTStrapTB.BLL; 2 using BTStrapTB.Common; 3 using BTStrapTB.Models; 4 using System; 5 using System.Collections.Generic; 6 using System.IO; 7 using System.Linq; 8 using System.Web; 9 using System.Web.Mvc; 10 11 namespace BTStrapTB.Controllers 12 { 13 //銷售管理 14 public class SaleManageController : BaseManageController 15 { 16 ImportExcelToDB ImportToExcl = new ImportExcelToDB(); 17 SaleOrderBLL SOBLL = new SaleOrderBLL(); 18 SaleProductBLL SPBLL = new SaleProductBLL(); 19 public override ActionResult Index() 20 { 21 return View(); 22 } 23 //導入頁面 24 public ActionResult Import() 25 { 26 return View(); 27 } 28 29 //將Excel訂單數據導入 30 [HttpPost] 31 public ActionResult ImportExclToDB(HttpPostedFileBase file) 32 { 33 var severPath = this.Server.MapPath("/Files"); //獲取當前虛擬文件路徑 34 var savePath = Path.Combine(severPath, file.FileName); //拼接保存文件路徑 35 file.SaveAs(savePath); 36 try 37 { 38 ImportToExcl.InsertExcelDataToDB(savePath); 39 return Content("<script>alert('上傳成功！！')</script>"); 40 } 41 catch (Exception ex) 42 { 43 throw new Exception(ex.Message); 44 } 45 46 //Response.Redirect("/PunchCardRecord/Index"); 47 } 48 49 //父子頁面 50 public ActionResult ParentAndChild() 51 { 52 return View(); 53 } 54 55 //獲取子表數據 56 public ActionResult GetChildDataList(int limit, int offset,string productNo) 57 { 58 List<SaleProduct> list = SPBLL.GetProductOrderList(productNo); 59 int total = list.Count; 60 var rows = list.Skip(offset).Take(limit).ToList(); 61 return Json(new { total, rows }, JsonRequestBehavior.AllowGet); 62 } 63 64 //獲取訂單列表 65 public ActionResult GetOrderList(int limit, int offset,string startDate,string endDate,string orderNO) 66 { 67 List<SaleOrder> list = SOBLL.GetSaleOrderList(startDate,endDate, orderNO); 68 int total = list.Count; 69 var rows = list.Skip(offset).Take(limit).ToList(); 70 return Json(new { total, rows }, JsonRequestBehavior.AllowGet); 71 } 72 //刪除數據 73 public void DelOrder(string orderNo) 74 { 75 SOBLL.DelDataToDB(orderNo); 76 } 77 //添加數據 78 public void AddDataToDB(SaleOrder saleOrder) 79 { 80 SOBLL.AddDataToDB(saleOrder); 81 } 82 //初始化修改表單 83 public ActionResult InitModifySheet(string orderNO) 84 { 85 List<SaleOrder> list = SOBLL.GetSaleOrderList("", "", orderNO); 86 return Content(list.ToJson()); 87 } 88 //修改數據 89 public void ModifyDataToDB(SaleOrder saleOrder) 90 { 91 SOBLL.ModifyDataToDB(saleOrder); 92 } 93 } 94 }
14.父子表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: true, //是否顯示父子表 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 //無限循環取子表，直到子表裏面沒有記錄 81 onExpandRow: function (index, row, $Subdetail) { 82 InitSubTable(index, row, $Subdetail); 83 } 84 }); 85 return InitTable; 86 87 88 }; 89 90 //初始化子表格(無線循環) 91 InitSubTable = function (index, row, $detail) { 92 var parentid = row.ProductNo; 93 var cur_table = $detail.html('<table></table>').find('table'); 94 $(cur_table).bootstrapTable({ 95 url: "/SaleManage/GetChildDataList", 96 method: 'get', 97 queryParams: { 'limit':10000,'offset':0,'productNo':parentid}, 98 clickToSelect: true, 99 detailView: false,//父子表 100 sidePagination: "server", 101 uniqueId: "ProductNo", 102 pageSize: 10, 103 pageList: [10, 25], 104 columns: [{ 105 field: 'ProductNo', 106 title: '產品編號' 107 }, 108 { 109 field: 'ProductName', 110 title: '產品名稱' 111 }, { 112 field: 'ProductType', 113 title: '產品類型' 114 }, { 115 field: 'ProductCount', 116 title: '產品數量' 117 }, 118 { 119 field: 'ProductPrice', 120 title: '產品單價' 121 }], 122 //無限循環取子表，直到子表裏面沒有記錄 123 onExpandRow: function (index, row, $Subdetail) { 124 InitSubTable(index, row, $Subdetail); 125 } 126 }); 127 };
（三）其餘技術點
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插件，實現了基本的增刪改查，導入導出，分頁，父子表等。至於其餘技術，如凍結表頭，列排列，行拖動，列拖動等，會在後續文章中與你們分享。
相關文章
- 1. BootStrap系列：BootStrap插件
- 2. BootStrap系列：BootStrap佈局
- 3. ****-BootStrapTable表格利器通用教材-Bootstrap
- 4. netty系列四 Bootstrap
- 5. JS組件系列——BootstrapTable 行內編輯解決方案：x-editable
- 6. BootstrapTable 行內編輯解決方案：bootstrap-table-editor
- 7. Yolo系列詳解
- 8. git系列--詳解
- 9. QAction系列詳解
- 10. printf系列詳解
- 更多相關文章...
- • Spring體系結構詳解 - Spring教程
- • 免費ARP詳解 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
