<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<style>
.page-content-wrapper {
width: 800px;
position: absolute;
top: 10%;
left: 24%;
background: #fff;
border: 1px solid #999;
padding: 3% 0 0 9%;
display: none;
}
.inputstyle {
width: 60%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
<body>
<table id="mytab" class="table table-hover"></table>
<!-- 新增和修改界面 -->
<div class="page-content-wrapper">
<input type="text" class="inputstyle" id="id" style="display: none;">
<div class="form-group">
<label>工号:</label> <input type="text" class="inputstyle" id="deviceId">
</div>
<div class="form-group">
<label>姓名:</label> <input type="text" class="inputstyle" id="name">
</div>
<div class="form-group">
<label>电话:</label> <input type="text" class="inputstyle" id="phone">
</div>
<div class="form-group">
<label>公司:</label> <input type="text" class="inputstyle" id="organName">
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal" id="close">关闭</button>
<button type="button" class="btn blue" id="addBtn">保存</button>
</div>
</div>
<script>
$('#mytab').bootstrapTable({
method: 'get',
url: "test.json", // 请求路径
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sidePagination: 'client', // server:服务器端分页|client：前端分页
pageSize: 5, // 单页记录数
pageList: [5, 20, 30],
// showRefresh : true,// 刷新按钮
queryParams: function(params) { // 上传服务器的参数
var temp = {
};
return temp;
},
columns: [{
title: 'id',
field: 'id',
visible: false
}, {
title: '工号',
field: 'deviceId',
}, {
title: '姓名',
field: 'name',
}, {
title: '联系电话',
field: 'phone'
}, {
title: '公司部门',
field: 'organName'
}, {
title: '操作',
field: 'id',
formatter: option
}]
})
// 定义删除、更新按钮
function option(value, row, index) {
var htm = "";
htm = '<button id="upd" onclick="update(\'' + escape(JSON.stringify(row)) + '\')">修改</button>';
return htm;
}
function update(row) {
$(".page-content-wrapper").show();
var data = JSON.parse(unescape(row))
$('#deviceId').val(data.deviceId)
$('#name').val(data.name)
$('#phone').val(data.phone)
$('#organName').val(data.organName)
}
$("#close").on("click", function() {
$(".page-content-wrapper").hide();
})
</script>
</body>
</html>test.json
[
{
"id": 1,
"deviceId": "43445",
"name": "王小婷",
"phone": "1567865475",
"organName": "字节跳动"
}, {
"id": 2,
"deviceId": "53456",
"name": "最帅的坏兔子",
"phone": "1567865475",
"organName": "腾讯"
},{
"id": 3,
"deviceId": "2345",
"name": "阿强",
"phone": "1567865475",
"organName": "360"
},{
"id": 4,
"deviceId": "2345",
"name": "阿花",
"phone": "1567865475",
"organName": "百度"
},
{
"id": 5,
"deviceId": "2345",
"name": "阿奶",
"phone": "1567865475",
"organName": "蚂蚁金服"
},{
"id": 5,
"deviceId": "2345",
"name": "阿狗",
"phone": "1567865475",
"organName": "阿里"
}
]
