bootstrap-table學習
阿新 • • 發佈：2018-06-05
javascrip jquer -m TE tst collect light 如果 lB
參考學習 http://bootstrap-table.wenzhixin.net.cn/getting-started/
包括Bootstrap庫（如果你的項目沒有使用它）和bootstrap-table.csshead標簽你的html文檔。
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css">
包括jQuery庫，引導程序庫（如果您的項目沒有使用它），並bootstrap-table.js在頭標簽或文檔的最底部，在關閉正文標記之前（通常建議為了更好的性能）。
<script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <script src="bootstrap-table-zh-CN.js"></script>
Example:
<script type="text/javascript"> $(document).ready(function () { $(‘#table‘).bootstrapTable({ columns: [ { field: ‘Seq‘, title: ‘Seq‘, width: 30, align: ‘center‘, "colspan": 1 }, { field: ‘BOL‘, title: ‘BOL‘, width: 120, align: ‘center‘, "colspan": 1 }, { field: ‘IsUrgent‘, title: ‘加急‘, width: 30, align: ‘center‘, "colspan": 1 }, { field: ‘PickState‘, title: ‘揀配狀態‘, width: 60, align: ‘center‘, "colspan": 1 }, { field: ‘PreAllocationState‘, title: ‘包裝狀態‘, width: 60, align: ‘center‘, "colspan": 1 }, { field: ‘DNCount‘, title: ‘DN‘, width: 30, align: ‘center‘, "colspan": 1 }, { field: ‘Request‘, title: ‘Request‘, width: 60, align: ‘center‘, "colspan": 1 }, { field: ‘UrgentTime‘, title: ‘UrgentTime‘, width: 60, align: ‘center‘, "colspan": 1 } ], pageList: [10, 25, 50, 100, 200] }); $.ajax({ url: "/FRUInventoryBarCodeMobile/GetShipmentList", type: "POST", data: {}, datatype: "json", success: function (data) { if (data.msgType == "success") { $(‘#table‘).bootstrapTable(‘load‘, data.rows); } else if (data.msgType == "error") { layer.open({ content: data.msg , skin: ‘msg‘ , time: 2 //2秒後自動關閉 }); } } }) }) </script> <body> <div class="panel-body"> <div id="toolbar" class="btn-group"> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button> </div> </div> <table id="table" data-striped="true" @*stripe the rows*@ data-pagination="true" @*show a pagination toolbar on table bottom.*@ data-show-columns="true" @*show the columns drop down list.*@ data-toolbar="#toolbar" @*A jQuery selector that indicates the toolbar, for example:#toolbar, .toolbar, or a DOM node.*@ data-search="true" @*Enable the search input.*@ data-show-toggle="true" @*show the toggle button to toggle table / card view.*@ data-maintain-selected="true"> @*True to maintain selected rows on change page and search.*@ </table> </body>
後臺取數據：
public ActionResult GetShipmentList(FormCollection fc) { LogHelper lh = new LogHelper(); if (user != null) { DBConn = user.DBConn.ToString(); } else { return RedirectToAction("Login", "P2Mobile"); } JsonMsg jsmsg = new JsonMsg(); var arrlist = p2mobile_inventorybarcodeibll.GetShipmentList(DBConn); if (arrlist.Count > 0) { int total = arrlist.Count; return Json(new { msgType = JsonMsgType.Success, total = total, rows = arrlist }, JsonRequestBehavior.AllowGet); } return Json(new { msgType = JsonMsgType.Error, msg = "未找到相關數據" }, JsonRequestBehavior.AllowGet); }
bootstrap-table學習