BootstrapTable使用實例

時間  2020-06-09
標籤 bootstraptable 使用 實例 简体版
原文   原文鏈接

1、bootstrapTable簡單使用：javascript

<link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css"> <script src="./static/libs/jquery/jquery-1.11.2.min.js"></script> <script src="./static/libs/bootstrap/js/bootstrap.js"></script> <script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script> <script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script> <div id="item_info_toolbar"> <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#deptModal">建立</a>&nbsp;&nbsp; <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;" data-toggle="modal" data-target="#adm-user-create-user">編輯</a>&nbsp;&nbsp; <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnAddDept" style="text-decoration: none;">刪除</a>&nbsp;&nbsp; <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;">排序</a> <a href="javascript:void(0)" class="btn btn-default btn-sm" id="btnEditDept" style="text-decoration: none;" onclick="getSelectValue()">獲取選中行值</a> </div> <table id="table" data-toggle="table" class="table table-striped"> <thead> <tr> </tr> </thead> </table>
<script>
$('#table').bootstrapTable('destroy').bootstrapTable({ url: 'data/' + 'adm-user' + '.json', method: 'POST', uniqueId: 'id', // 綁定ID，不顯示 striped: false, //是否顯示行間隔色 cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*） sortable: true, //是否啓用排序 sortOrder: "asc", //排序方式 sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*） undefinedText: '--', //singleSelect: true, // 單選checkbox，默認爲複選 showRefresh : true, // 顯示刷新按鈕 showColumns : true, // 選擇顯示的列 toolbar: '#item_info_toolbar', // 搜索框位置 search: true, // 搜索開啓, strictSearch: true, clickToSelect: true, // 點擊選中行 pagination: true, //是否顯示分頁 pageNumber:1, //初始化加載第一頁，默認第一頁,並記錄 pageSize:5,//每頁顯示的數量 pageList: [5, 10, 20, 50, 100],//設置每頁顯示的數量 paginationPreText:"上一頁", paginationNextText:"下一頁", paginationLoop:false, //showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕 //cardView: false, //是否顯示詳細視圖 //detailView: false, //是否顯示父子表 //showPaginationSwitch: true, //獲得查詢的參數 queryParams : function (params) { //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也須要改爲同樣的 var temp = { rows: params.limit, //頁面大小 page: (params.offset / params.limit) + 1, //頁碼 sort: params.sort, //排序列名 sortOrder: params.order //排位命令（desc，asc） }; return temp; }, columns: [ { checkbox: true },{ field: 'username', title:'用戶名', valign: 'middle', width: '16%', sortable: true },{ field: 'fullname', title:'姓名', width: '16%' },{ field: 'status', title:'密碼認證', width: '16%' },{ field: 'availableSpace', title:'智能卡認證', valign: 'middle', width: '16%' },{ field: 'totalSpace', title:'我的空間配額', width: '16%' },{ field: 'storageServer', title:'私密空間配額', formatter: operateFormatter } ], onLoadSuccess: function () { alert('表格加載成功！'); }, onLoadError: function () { showTips("數據加載失敗！"); }, onDblClickRow: function (row, $element) { var id = row.ID; //EditViewById(id, 'view'); }, rowStyle: function (row, index) { //設置行的特殊樣式 //這裏有5個取值顏色['active', 'success', 'info', 'warning', 'danger']; var strclass = ""; if (index == 1) { strclass = "warning"; console.log(row); } return { classes: strclass } } }); function getSelectValue(){ var a = $table.bootstrapTable('getSelections');//獲取選中行的數據 if(a.length > 0){ console.log(a); } } function operateFormatter (value, row, index) { var result = '<button class="btn btn-action" title="激活USBKEY認證" onclick=""><i class="glyphicon glyphicon-pencil"></i></button>' return result; } </script>

adm-user： css

[
        {
        	"id": 2018100701, "username": "user1", "fullname": "用戶1", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100702, "username": "user2", "fullname": "用戶2", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100703, "username": "user3", "fullname": "用戶3", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100704, "username": "user4", "fullname": "用戶4", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100705, "username": "user5", "fullname": "用戶5", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100706, "username": "user6", "fullname": "用戶6", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100707, "username": "user7", "fullname": "用戶7", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100708, "username": "user8", "fullname": "用戶8", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100709, "username": "user9", "fullname": "用戶9", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100710, "username": "user10", "fullname": "用戶10", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" }, { "id": 2018100711, "username": "user11", "fullname": "用戶11", "status": "啓用", "availableSpace": "10GB", "totalSpace": "20GB", "storageServer" : "nas1" } ]

 2、 利用bootstrapTable來設置要隱藏和顯示的列：html

$(function () { //初始化table   LoadingDataListOrderRealItems(); //隱藏列   $('#tableOrderRealItems').bootstrapTable('showColumn', 'ShopName');   $('#tableOrderRealItems').bootstrapTable('hideColumn', 'GoodsId');   $('#tableOrderRealItems').bootstrapTable('hideColumn', 'OrderItemId');   $('#tableOrderRealItems').bootstrapTable('hideColumn', 'ShopName');         $('#tableOrderRealItems').bootstrapTable('hideColumn', 'SellerName'); }); 

3、 也能夠直接使用hidden屬性來設置：java

columns: [
    {
          field: 'OrderId',       title: '#',       align: 'center',  }, {       field: 'OrderItemId',       title: 'OrderItemId',       align: 'left',       hidden:true,  }, {       field: 'GoodsId',       title: 'GoodsId',       align: 'left',       hidden:true,  }, {       field: 'OrderCode',       title: '訂單編號',       align: 'left', } ]

4、如何獲取數據：jquery

方式一：表格中配置ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script> <!-- Latest compiled and minified Locales --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> <table id="table" data-toggle="table" data-url="data/table.json" data-pagination="true" data-page-number=1 data-page-size=10 data-search=true data-show-refresh=true data-show-pagination-switch=true data-search-align="left" > <thead> <tr> <th data-field="id">id</th> <th data-field="name">name</th> <th data-field="price">price</th> <th data-field="column1">column1</th> <th data-field="column2">column2</th> <th data-field="column3">column3</th> <th data-field="column4">column4</th> </tr> </thead> </table> <script> $(function () { //隱藏列 $('#table').bootstrapTable('hideColumn', 'column4'); }) </script> </body> </html>

 方式二：JavaScript配置編程

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script> <!-- Latest compiled and minified Locales --> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> <button onclick="getData('table2')">點擊獲取數據</button> <table id="table" data-toggle="table"> <thead> <tr> <th data-field="id">id</th> <th data-field="name">name</th> <th data-field="price">price</th> <th data-field="column1">column1</th> <th data-field="column2">column2</th> <th data-field="column3">column3</th> <th data-field="column4">column4</th> </tr> </thead> </table> <script> function getData(url){ $('#table').bootstrapTable('destroy').bootstrapTable({ //'destroy' 是必需要加的==做用是加載服務器// //數據，初始化表格的內容Destroy the bootstrap table. url: 'data/' + url + '.json', pagination: true, pageList:[], pageNumber:1, pageSize:5,//每頁顯示的數量 paginationPreText:"上一頁", paginationNextText:"下一頁", paginationLoop:false, columns: [ { field: 'id', title:'id', valign: 'middle', },{ field: 'name', title:'name' },{ field: 'price', title:'price' },{ field: 'column1', title:'請求內容' },{ field: 'column2', title:'請求內容' },{ field: 'column3', title:'請求內容' },{ field: 'column4', title:'請求內容' } ] }) } </script> </body> </html>
[
    {
        "id": 0, "name": "Item 0", "price": "$0", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 1, "name": "Item 1", "price": "$1", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 2, "name": "Item 2", "price": "$2", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 3, "name": "Item 3", "price": "$3", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 4, "name": "Item 4", "price": "$4", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 5, "name": "Item 5", "price": "$5", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 6, "name": "Item 6", "price": "$6", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 7, "name": "Item 7", "price": "$7", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 8, "name": "Item 8", "price": "$8", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 9, "name": "Item 9", "price": "$9", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 10, "name": "Item 10", "price": "$10", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 11, "name": "Item 11", "price": "$11", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 12, "name": "Item 12", "price": "$12", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 13, "name": "Item 13", "price": "$13", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 14, "name": "Item 14", "price": "$14", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 15, "name": "Item 15", "price": "$15", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 16, "name": "Item 16", "price": "$16", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 17, "name": "Item 17", "price": "$17", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 18, "name": "Item 18", "price": "$18", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 19, "name": "Item 19", "price": "$19", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" }, { "id": 20, "name": "Item 20", "price": "$20", "column1": "C 10", "column2": "C 20", "column3": "C 30", "column4": "C 40" } ]

5、BootstrapTable先後端完整實例（以ASP.NET爲例）：json

以一個基於BootstrapTable控件的圖書列表查詢功能爲實例（如圖1）。注意本實例使用了ASP.NET MVC。bootstrap

​

頁面代碼：後端

@{
Layout = null;
ViewBag.Title = "基於BootstrapTable的簡單應用";
}
<!--添加相關樣式引用--> <link href="~/Content/bootstrap.min.css" rel="stylesheet"/> <link href="~/Content/bootstrap-table.min.css" rel="stylesheet"/> <div class="container body-content" style="padding-top:20px;"> <div class="panel panel-default"> <div class="panel-heading"> 查詢條件 </div> <div class="panel-body"> <form class="form-inline"> <div class="row"> <div class="col-sm-4"> <label class="control-label">圖書名稱：</label><input id="txtTitle" type="text" class="form-control"> </div> <div class="col-sm-4"> <label class="control-label">圖書做者：</label><input id="txtAuthor" type="text" class="form-control"> </div> <div class="col-sm-4"> <label class="control-label">出版社：</label><input id="txtPublish" type="text" class="form-control"> </div> </div> <div class="row text-right" style="margin-top:20px;"> <div class="col-sm-12"> <input class="btn btn-primary" type="button" value="查詢" onclick="SearchData()"><input class="btn btn-default" type="button" value="批量刪除" onclick="BtchDeleteBook()"> </div> </div> </form> </div> </div> <table id="table"> </table> </div> <!--添加相關腳本引用--> <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Scripts/bootstrap-table.min.js"></script> <script src="~/Scripts/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#table').bootstrapTable({ url: '@Url.Action("SearchBookInfo", "Home")', queryParamsType: '', //默認值爲 'limit' ,在默認狀況下 傳給服務端的參數爲：offset,limit,sort// queryParams: queryParams, method: "post", pagination: true, pageNumber: 1, pageSize: 2, pageList: [10, 20, 50, 100], sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） striped: true, //是否顯示行間隔色 cache: false, uniqueId: "BookId", //每一行的惟一標識，通常爲主鍵列 height:300, paginationPreText: "上一頁", paginationNextText: "下一頁", columns: [ { checkbox: true }, { title: '序號', width: 50, align: "center", formatter: function (value, row, index) { return index + 1; } }, { title: '圖書名稱', field: 'Title' }, { title: '圖書做者', field: 'Author' }, { title: '銷售價格', field: 'Price' }, { title: '出版社', field: 'Publish' }, { title: '出版時間', field: 'PublishDate', formatter: function (value, row, index) { if (value == null) return ""; else { var pa = /.*\((.*)\)/; var unixtime = value.match(pa)[1].substring(0, 10); return getShortTime(unixtime); } } }, { title: '操做', field: 'BookId', formatter: function (value, row, index) { var html = '<a href="javascript:EditBook('+ value + ')">編輯</a>'; html += '　<a href="javascript:DeleteBook(' + value + ')">刪除</a>'; return html; } }] }); }); //查詢條件 function queryParams(params) { return { pageSize: params.pageSize, pageIndex: params.pageNumber, Title: $.trim($("#txtTitle").val()), Author: $.trim($("#txtAuthor").val()), Publish: $.trim($("#txtPublish").val()), }; } //查詢事件 function SearchData() { $('#table').bootstrapTable('refresh', { pageNumber: 1 }); } //編輯操做 function EditBook(bookId){ alert("編輯操做，圖書ID：" + bookId); } //刪除操做 function DeleteBook(bookId) { if (confirm("肯定刪除圖書ID：" + bookId + "嗎？")) { alert("執行刪除操做"); } } //批量刪除 function BtchDeleteBook(){ var opts = $('#table').bootstrapTable('getSelections'); if (opts == "") { alert("請選擇要刪除的數據"); } else { var idArray = []; for (var i = 0; i < opts.length; i++) { idArray.push(opts[i].BookId); } if (confirm("肯定刪除圖書ID：" + idArray + "嗎？")) { alert("執行刪除操做"); } } } function getTime(/** timestamp=0 **/) { var ts = arguments[0] || 0; var t, y, m, d, h, i, s; t = ts ? new Date(ts * 1000) : new Date(); y = t.getFullYear(); m = t.getMonth() + 1; d = t.getDate(); h = t.getHours(); i = t.getMinutes(); s = t.getSeconds(); // 可根據須要在這裏定義時間格式 return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s); } function getShortTime(/** timestamp=0 **/) { var ts = arguments[0] || 0; var t, y, m, d, h, i, s; t = ts ? new Date(ts * 1000) : new Date(); y = t.getFullYear(); m = t.getMonth() + 1; d = t.getDate(); // 可根據須要在這裏定義時間格式 return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d); } </script>

控制器代碼：

/// <summary>
/// 查詢圖書信息
/// </summary>
/// <param name="param"></param>
/// <returns></returns>
public JsonResult SearchBookInfo(BookInfo param, int pageSize, int pageIndex){
    //獲取圖書列表
    List<BookInfo> bookList = GetBookList();
    //根據條件篩選數據
    if (!String.IsNullOrEmpty(param.Title))    {
        bookList = bookList.Where(a => a.Title.Contains(param.Title)).ToList();
    }
    if (!String.IsNullOrEmpty(param.Author))    {
        bookList = bookList.Where(a => a.Author.Contains(param.Author)).ToList();
    }
    if (!String.IsNullOrEmpty(param.Publish))    {
        bookList = bookList.Where(a => a.Publish.Contains(param.Publish)).ToList();
    }
    //BootstrapTable的返回結果
    BootstrapTableResult<BookInfo> result = new BootstrapTableResult<BookInfo>();
    result.total = bookList.Count;
    result.rows = bookList;
    return Json(result);
}

/// <summary>
/// 獲取圖書列表
/// </summary>
/// <returns></returns>
public List<BookInfo> GetBookList(){
    List<BookInfo> bookList = new List<BookInfo>();
    BookInfo book1 = new BookInfo(){
        BookId = 8,
        Title = "ASP.NET MVC 5高級編程",
        Author = "加洛韋",
        Publish = "清華大學出版社",
        PublishDate = new DateTime(2017, 08, 15),
        Price = 29.99
    };
    bookList.Add(book1);
    BookInfo book2 = new BookInfo() {
        BookId = 9,
        Title = "Java從入門到精通",
        Author = "明日科技",
        Publish = "清華大學出版社",
        PublishDate = new DateTime(2015, 09, 28),
        Price = 38.55
    };
    bookList.Add(book2);
    BookInfo book3 = new BookInfo() {
        BookId = 10,
        Title = "Oracle從入門到精通",
        Author = "秦靖",
        Publish = "機械工業出版社",
        PublishDate = new DateTime(2014, 10, 08),
        Price = 38.55
    };
    bookList.Add(book3);
    return bookList;
}

其餘代碼：

/// <summary>
/// 圖書信息實體類
/// </summary>
public class BookInfo{
    public int BookId { set; get; }             //圖書ID
    public string Title { set; get; }           //圖書名稱
    public string Author { set; get; }          //圖書做者
    public string Publish { set; get; }         //出版社
    public DateTime PublishDate { set; get; }   //出版時間
    public Double Price { set; get; }           //銷售價格
}
/// <summary>
/// BootstrapTable返回結果類
/// </summary>
public class BootstrapTableResult<T>{
    public int total { get; set; }      //總記錄數
    public List<T> rows { get; set;}   //數據列表
}

6、Bootstrap table中toolbar新增條件查詢及refresh參數使用方法：

咱們想要在bootstrap-table中自定義查詢條件如何實現呢？這些自定義的按鈕、輸入框是定義在哪一個位置呢？在配置中有這樣一個屬性：

//工具按鈕用哪一個容器
toolbar: '#toolbar',
<div id="toolbar"></div>

咱們定義的查詢條件就是放入到這個div中的，先看一下咱們指望的效果：

​

要實現這樣的效果，咱們首先要新增查詢表單：

<div class="container"> <div class="row"> <div class="table-responsive"> <div id="toolbar"> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="product_line">產品線</label> <div class="input-group"> <div class="input-group-addon">產品線</div> <select class="form-control" name="product_line" id="productLine"> <option value="">請選擇產品線...</option> </select> </div> </div> <div class="form-group"> <label class="sr-only" for="msg_type">消息類型</label> <div class="input-group"> <div class="input-group-addon">消息類型</div> <select class="form-control" name="msg_type" id="msgType"> <option value="">請選擇消息類型...</option> </select> </div> </div> <div class="form-group"> <label class="sr-only" for="msg_type">消息類型</label> <div class="input-group"> <div class="input-group-addon">消息類型</div> <input type="text" class="form-control" name="searchTexts" id="searchText" placeholder="請輸入消息名稱或內容關鍵字..."> </div> </div> <button type="button" class="btn btn-primary queryButton">查詢</button> </form> </div> <table id="table" ></table> </div> </div> </div>

 在請求服務器中傳遞的參數中獲取對應的值：

//請求服務器數據 queryParams: function queryParams(params){ var param = { pageNumber: params.pageNumber, pageSize: params.pageSize, sortName: params.sortName, sortOrder: params.sortOrder, searchText: $("#searchText").val(), msgType: $("#msgType").val(), productLine: $("#productLine").val() }; return param; }

最後是提交到服務端：

//查詢 $(document).on('click', ".queryButton",function(){ $('#table').bootstrapTable('refresh'); });

這個refresh官方文檔是這樣描述的：

刷新遠程服務器數據，能夠設置{silent: true}以靜默方式刷新數據，並設置{url: newUrl}更改URL。 
要提供特定於此請求的查詢參數，請設置{query: {foo: 'bar'}}。

https://www.cnblogs.com/lglblogadd/p/7251278.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程