Bootstrap表 - 行中的动态按钮 [英] Bootstrap table - dynamic button in row
本文介绍了Bootstrap表 - 行中的动态按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 bootstrap v3 。我尝试在图片中获得效果。我想要一个按钮，在弹出中显示项目名称的内容。但是我的按钮没有显示。
I am using bootstrap v3. I try to get the effect as in the picture. I want a button, what to display "Item Name" in popup. But my button is not displayed.
问题是我的表的这种性质是动态的（表单 JSON ） - 这使事情变得困难。
The problem is that this nature of my table is a dynamic (form JSON) - which makes things difficult.
图片：
var $table = $('#table');
var mydata = [{
"id": 0,
"name": "test0",
"price": "$0"
},
{
"id": 1,
"name": "test1",
"price": "$1"
},
{
"id": 2,
"name": "test2",
"price": "$2"
}
];
$(function() {
$('#table').bootstrapTable({
data: mydata
});
});
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflarenter code heree.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container">
<table id="table" data-search="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">Item ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
<th>Show Name</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
我将非常感谢你的帮助。
I will be grateful for your help.
推荐答案
希望这会有所帮助..
Hope this helps..
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container">
<table id="table" data-search="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">Item ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
<th>Show Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var $table = $('#table');
var mydata = [{
"id": 0,
"name": "test0",
"price": "$0"
},
{
"id": 1,
"name": "test1",
"price": "$1"
},
{
"id": 2,
"name": "test2",
"price": "$2"
}
];
$(function() {
$('#table').bootstrapTable({
data: mydata,
columns: [ {},{},{},
{
field: 'operate',
title: 'Edit',
align: 'center',
valign: 'middle',
clickToSelect: false,
formatter : function(value,row,index) {
//return '<input name="elementname" value="'+value+'"/>';
return '<button class=\'btn btn-primary \' pageName="'+row.name+'" pageDetails="'+row.price+'" >Edit</button> ';
}
}
]
});
$(".btn").click(function(){
var pageDetails = $(this).attr('pageDetails');
var pageName = $(this).attr('pageName');
$(".modal .modal-title").html(pageName);
$(".modal .modal-body").html(pageDetails);
$(".modal").modal("show");
});
});
</script>
</body>
</html>
这篇关于Bootstrap表 - 行中的动态按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
