<!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": "阿里" } ]
