bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當(dāng)前行數(shù)據(jù)
更新時(shí)間：2020年08月09日 09:35:11 作者：黃德根
這篇文章主要為大家詳細(xì)介紹了bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當(dāng)前行數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap table展開或關(guān)閉當(dāng)前行數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<title>expandRow-collapseRow</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css" >
<link rel="stylesheet" href="../assets/examples.css" >
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>expandRow-collapseRow</h1>
<p></p>
<div id="toolbar">
<button id="button" class="btn btn-default">expandRow</button>
<button id="button2" class="btn btn-default">collapseRow</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-height="460"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table'),
$button = $('#button'),
$button2 = $('#button2');
$(function () {
$button.click(function () {
$table.bootstrapTable('expandRow', 1);
});
$button2.click(function () {
$table.bootstrapTable('collapseRow', 1);
});
});
function detailFormatter(index, row) {
var html = [];
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
});
return html.join('');
}
</script>
</body>
</html>
官方演示地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- Bootstrap Table使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- Bootstrap Table的使用總結(jié)
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
- BootStrap 可編輯表Table格
- Bootstrap嵌入jqGrid，使你的table牛逼起來(lái)
- Bootstrap table分頁(yè)問題匯總
相關(guān)文章
比較簡(jiǎn)單實(shí)用的使用正則三種版本的js去空格處理方法
比較簡(jiǎn)單實(shí)用的使用正則三種版本的js去空格處理方法...2007-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義tab切換，可滑動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中transform實(shí)現(xiàn)數(shù)字翻頁(yè)效果
本文主要介紹JavaScript中利用transform實(shí)現(xiàn)數(shù)字翻頁(yè)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)數(shù)據(jù)脫敏的三種解決方式,包括電話、姓名、郵箱、身份證等,有需要的小伙伴可以參考一下2024-11-11
這篇文章介紹了Ajax實(shí)現(xiàn)搜索框提示功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
Div上下居中...2007-02-02
微信小程序的運(yùn)行機(jī)制與安全機(jī)制解決方案詳解
這篇文章主要介紹了微信小程序的運(yùn)行機(jī)制與安全機(jī)制解決方案，接觸小程序有一段時(shí)間了，總得來(lái)說(shuō)小程序開發(fā)門檻比較低，但其中基本的運(yùn)行機(jī)制和原理還是要懂的2023-02-02
checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用，火狐不起作用，getElementById()與getElementsByName()的區(qū)別等等2013-12-12
JavaScript缺少塊級(jí)作用域，沒有private修飾符，但它具有函數(shù)作用域。作用域的好處是內(nèi)部函數(shù)可以訪問它們的外部函數(shù)的參數(shù)和變量（除了this和argument2011-12-12
在學(xué)習(xí)JavaScript之前，必須具備HTML和CSS知識(shí)，Javascript是一種解釋性的，基于對(duì)象的腳本語(yǔ)言(aninterpreted,object-basedscriptinglanguage)。這篇文章主要講解JavaScript入門基礎(chǔ)，需要的朋友可以參考下2015-08-08