Bootstrap table 是一款基於 Bootstrap 的 jQuery 表格插件，功能比較完備，能夠實現數據異步獲取，編輯，排序等一系列功能。
官網https://bootstrap-table.com
中文https://www.bootstrap-table.com.cn
前端代碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>BootStrap Table使用</title> @*1、Jquery組件引用*@ <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> @*2、bootstrap組件引用*@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"5></script> @*3、bootstrap table組件以及中文包的引用*@ <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/locale/bootstrap-table-zh-CN.min.js"></script> @*4、頁面Js文件的引用*@ <script src="~/Scripts/table/Home/Index.js"></script> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查詢條件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部門名稱</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">狀態</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查詢</button> </div> </div> </form> </div> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除 </button> </div> <table id="tb_departments"></table> </div> </body> </html>
js代碼
$(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的點擊事件 var oButtonInit = new ButtonInit(); oButtonInit.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/Admin/news/getlist1', //請求後臺的URL（*） method: 'get', //請求方式（*） dataType: 'json', toolbar: '#toolbar', //工具按鈕用哪個容器 theadClasses:'.thead-light', striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） showPaginationSwitch: false, //是否顯示分頁數 sortable: false, //是否啓用排序 sortName: "title", //是否啓用排序 sortOrder: "desc", //排序方式 queryParams: oTableInit.queryParams,//傳遞參數（*） queryParamsType: '', //如果要在oTableInit.queryParams方法獲取pageNumber和pageSize的值，需要將此值設置爲空字符串（*） sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber:1, //初始化加載第一頁，默認第一頁 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: false, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啓用點擊選中行 singleSelect: false, //是否單選模式 height: $(window).height() - 200, //table總高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 uniqueId: "ID", //每一行的唯一標識，一般爲主鍵列 showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 paginationPreText: "上一頁", paginationNextText: "下一頁", columns: [{ checkbox: true }, { field: 'title', title: '新聞名稱' }, { field: 'cons', title: '新聞內容' }, { field: 'pic', title: '新聞圖片' }, { field: 'classID', title: '分類', align: 'center' }, { field: 'times', title: '時間' },] }); }; //得到查詢的參數 oTableInit.queryParams = function (params) { // 特別說明： //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 // 如果queryParamsType=limit,params包含{limit, offset, search, sort, order} // 如果queryParamsType!=limit,params包含{pageSize, pageNumber, searchText, sortName, sortOrder} var temp = { pageSize: params.pageSize, //頁面大小 pageNumber: params.pageNumber, //頁碼 departmentname: $("#txt_search_departmentname").val(), statu: $("#txt_search_statu").val() }; return temp; }; return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { $("#btn_add").click(function () { alert("add") }); $("#btn_edit").click(function () { var arrselections = $("#tb_departments").bootstrapTable('getSelections'); if (arrselections.length > 1) { alert('只能選擇一行進行編輯'); return; } if (arrselections.length <= 0) { alert('請選擇有效數據'); return; } alert("edit") //$("#myModalLabel").text("編輯"); //$("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME); //$("#txt_parentdepartment").val(arrselections[0].PARENT_ID); //$("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL); //$("#txt_statu").val(arrselections[0].STATUS); //postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID; //$('#myModal').modal(); }); $("#btn_delete").click(function () { var arrselections = $("#tb_departments").bootstrapTable('getSelections'); if (arrselections.length <= 0) { alert('請選擇有效數據'); return; } Ewin.confirm({ message: "確認要刪除選擇的數據嗎？" }).on(function (e) { if (!e) { return; } $.ajax({ type: "post", url: "/Home/Delete", data: { "": JSON.stringify(arrselections) }, success: function (data, status) { if (status == "success") { toastr.success('提交數據成功'); $("#tb_departments").bootstrapTable('refresh'); } }, error: function () { toastr.error('Error'); }, complete: function () { } }); }); }); $("#btn_submit").click(function () { //postdata.DEPARTMENT_NAME = $("#txt_departmentname").val(); //postdata.PARENT_ID = $("#txt_parentdepartment").val(); //postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val(); //postdata.STATUS = $("#txt_statu").val(); //$.ajax({ // type: "post", // url: "/Home/GetEdit", // data: { "": JSON.stringify(postdata) }, // success: function (data, status) { // if (status == "success") { // toastr.success('提交數據成功'); // $("#tb_departments").bootstrapTable('refresh'); // } // }, // error: function () { // toastr.error('Error'); // }, // complete: function () { // } //}); }); $("#btn_query").click(function () { $("#tb_departments").bootstrapTable('refresh'); }); }; return oInit; };
接口代碼
public JsonResult getlist1(int pageSize, int pageNumber, string departmentname, string statu) { var total = 0; var list=bllNews.FindPageList(pageNumber, pageSize, out total, x=>x.passed=1, false, x => x.ID).ToList(); return Json(new { total = total, rows = list }, JsonRequestBehavior.AllowGet); }
還可以實現無限極樹形網格，需要用到插件jquery-treegrid
官方演示https://www.bootstrap-table.com.cn/examples/extensions/treegrid/