本篇文章將與大家分享bootstrap-table插件，藉助於它實現基本的增刪改查，導入導出，分頁，父子表等。 至於其他技術，如凍結表頭，列排列，行拖動，列拖動等，會在後續文章中與大家分享。 一 效果圖 （一）頁面初始化 下圖是頁面首次載入結束後的效果，主要完成以下功能： 1.日期部分，開始時間：當 ...
本篇文章將與大家分享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 訂單編號：<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>View Code
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><
