您的位置：首页 > Web前端 > BootStrap

bootstrap table 插件

2015-11-26 10:16 447 查看

bootstrap table插件

<!DOCTYPE html>
<html>
<head>
<title>酒店所有房间</title>
<meta charset="utf-8">
<!--bootstrapJS/CSS=====-bootstrapTableJS/CSS-->
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.5-dist/css/bootstrap-table.css" rel="stylesheet">
<script src="jQuery/jquery-1.8.2.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap-table.js"></script>
<style type="text/css">
.public{
padding-top: 10px;
margin-left: 13px;
width: 98%;
border: 1px solid #dddddd;
}

</style>
</head>
<body onload="actionEvents()">
<!--条件查询-->
<!--bootstrap_table显示数据-->
4000
;
<div>
<div class="public">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="roomName" class="col-sm-1 control-label">房间名称</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="roomName">
</div>
<label for="createDate" class="col-sm-1 control-label">创建时间</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="createDate">
</div>
<label for="endDate" class="col-sm-1 control-label">终止时间</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="endDate">
</div>
</div>
</form>
</div>
<!--创建自定义的按钮-->
<div >
<button id="editButton" type="submit" class="btn btn-default" onclick="edit()">编辑</button>
</div>
<div class="public">
<table id="dataTable" data-toggle="table" data-toolbar="#editButton"  data-order="desc" data-url="data2.json"
data-row-style="actionEvents" data-page-size="5"
data-height="472" data-pagination="true"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" data-align="center">房间号</th>
<th data-field="name" data-align="center">电话</th>
<th data-field="price" data-align="center">创建时间</th>
<th data-align="center" data-formatter="formatterText" >操作</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
<script>
function formatterText(value,rowData,rowIndex){
return "<button type='submit' class='btn btn-default' onclick='onEdit("+rowData.id+")' >编辑</button> ";
}
function onEdit(data){
alert(data+"==");
}

function edit(){
var obj = ("#dataTable").bootstrapTable('getSelections');
alert(obj);
}

//点击获取选中行数的所有值,并且可以通
var $table = $('#dataTable'),//bootstrapTable
$button = $('#editButton');
$(function () {
$button.click(function () {
var jso = JSON.stringify($table.bootstrapTable('getSelections'));
var objectBook=JSON.parse(jso);
alert(objectBook+"======="+objectBook[0].id+"=="+objectBook[0].name+"===="+objectBook[0].price);
});
});

$table.bootstrapTable('onClickRow',function(row, $element){
alert($element);
});

//===========================================================================================

</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航