<!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>
分享到：
相关推荐
BootstrapTable是一款基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能和自定义选项，能够帮助开发者轻松地创建美观、响应式的表格。本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、...
$('#table').bootstrapTable({ columns: [/*...*/], data: [/*...*/], // 启用列宽拖动功能 extensions: { columnResize: {} } }); }); ``` 这样，用户就可以通过鼠标拖动列头来调整列宽了。需要注意的是，...
Bootstrap Table多层表头实现实例代码 Bootstrap Table是一个功能强大的表格组件，它提供了许多有用的功能，包括多层表头的实现。在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头...
$('#table').bootstrapTable({ columns: [ // 定义表格列 { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, // 更多列... ], data: [ // 表格数据 { ...
在Bootstrap Table中实现类似的效果，我们需要深入理解Bootstrap Table的分页机制，并对源代码进行适当的定制。 1. **理解Bootstrap Table分页机制**： Bootstrap Table的分页功能依赖于内置的`pagination`模块。...
在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中，我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据，这种功能在数据管理、比较或重新排序场景中非常实用。 首先，我们...
在JavaWeb开发中，Bootstrap Table是一种非常流行的前端组件，它结合了Bootstrap框架的美观性和功能强大的数据展示能力。本案例提供了使用Bootstrap Table与Ajax进行交互的详细示例，旨在帮助开发者更好地理解和应用...
在“Bootstrap Table 跨页选择”这个主题中，我们主要关注的是如何在实现后台分页的表格中实现用户在不同页面选择行的功能，并能持久保存和恢复这些选择。 在传统的Bootstrap Table中，用户可能只能在当前页面进行...
当页面加载完成后，`bootstrapTable()`方法初始化表格并激活编辑功能。 总的来说，Bootstrap Table Editable JS 提供了一种高效且用户友好的数据管理解决方案，尤其适用于需要在前端进行数据编辑和管理的应用场景。...
"bootstraptable-reorder-columns" 是这个库的一个扩展插件，专门用于实现表格列的拖拽排序功能。用户可以通过简单的拖放操作来调整表格列的顺序，极大地提高了用户在查看和管理大量数据时的灵活性和便利性。 在Web...
Bootstrap Table 是一个流行的前端数据展示框架，它利用了Twitter Bootstrap 的样式和交互设计，使得创建交互式的、响应式的数据表格变得简单。在这个“bootstrap table ajax 示例”中，我们看到一个利用 Maven 构建...
BootstrapTable是一种基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能，如表格排序、分页、筛选等，使得在网页上创建交互式表格变得简单。在MVC（Model-View-Controller）架构中，结合C#后端，Bootstrap...
知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量 /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...
BootstrapTable 是一个基于 Bootstrap 框架的前端数据表格插件，它提供了丰富的功能，如分页、排序、过滤、自定义列等。在实际应用中，有时我们需要根据数据显示的需求调整列宽，以便更好地查看和理解表格内容。...
Bootstrap Table 是一个基于Bootstrap框架的开源插件，用于创建功能丰富的、响应式的表格。这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了...
"Fixed Columns"功能是Bootstrap Table的一个扩展，它允许用户在表格中固定左侧或右侧的列，即使在滚动时，这些列也会始终保持可见，提高了数据浏览的便利性。这对于那些需要大量数据展示并且需要快速访问特定列信息...
这通常通过调用`$('#table').bootstrapTable({ options })`方法实现，其中`#table`是表格的ID，`options`是一个包含各种配置项的对象。 4. **数据源**：Bootstrap Table支持多种数据源，包括JSON对象数组、服务器端...
$('#table').bootstrapTable({ url: '../data/kehulist.json', uniqueId: "id", striped: true, // pagination: true, clickToSelect: true, height: 340, columns: [ { field: 'state', checkbox: true, ...
$('#table').bootstrapTable({ search: true, pagination: false, pageSize: 15, pageList: [5, 10, 15, 20], showColumns: true, showRefresh: false, showToggle: true, locale: "zh-CN", striped: true ...
BootstrapTable是一款基于Bootstrap框架的前端数据表格插件，它提供了丰富的功能，如排序、过滤、分页、自定义列等。在使用过程中，有时我们可能会遇到一个特定的需求，即实现父子表的功能，也就是在一个表格中嵌套...