bootstrap table插件
<!DOCTYPE html>
<html>
<head>
<title>酒店所有房间</title>
<meta charset="utf-8">
<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()">
<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'),
$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>
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
