<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bs/dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bstable/src/extensions/editable/bootstrap-editable.css"> <link rel="stylesheet" href="/static/bstable/dist/bootstrap-table.css"> <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script> <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script> <script src="https://img.hcharts.cn/highcharts/modules/series-label.js"></script> <script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script> <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> </head> <body> <h2>服务器列表管理</h2> <div class="container"> <div id="container" style="max-800px;height:400px"></div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_delete" type="button" class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="server"> </table> </div> </body> <script src="/static/js/jquery-1.12.4.js"></script> <script src="/static/bs/dist/js/bootstrap.js"></script> <script src="/static/bstable/dist/bootstrap-table.js"></script> <script src="/static/bstable/dist/locale/bootstrap-table-zh-CN.js"></script> <script src="/static/bstable/src/extensions/editable/bootstrap-table-editable.js"></script> <script src="/static/bstable/bootstrap-editable.min.js"></script> <script src="/static/bstable/src/extensions/export/bootstrap-table-export.js"></script> <script src="/static/js/nblist.js"></script> <script> var chart = Highcharts.chart('container', { title: { text: '2010 ~ 年太阳能行业就业人员发展情况' }, subtitle: { text: '：thesolarfoundation.com' }, yAxis: { title: { text: 'xxxxxx' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { // label: { // connectorAllowed: false // }, pointStart: 2011 } }, series: [{ name: '安装，实施人员', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: '工人', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: '销售', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: '项目开发', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: '其他', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], tooltip:{ 'backgroundColor':'red' }, credits:{ enabled:true, text:'xxxxxx', href: 'http://www.baidu.com' } }); $.fn.editable.defaults.mode = 'inline'; $('#server').bootstrapTable({ url: '/backend/ajax_server/', //请求后台的URL（*） method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: true, //是否启用排序 sortOrder: "desc", //排序方式 sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showPaginationSwitch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 clickToSelect: true, //是否启用点击选中行 uniqueId: "id", //每一行的唯一标识，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 showExport: true, //是否显示导出 exportDataType: "basic", //basic', 'all', 'selected'. onEditableSave: function (field, row, oldValue, $el) { // delete row[0]; updata = {}; updata[field] = row[field]; updata['id'] = row['id']; $.ajax({ type: "POST", url: "/backend/modify/", data: {postdata: JSON.stringify(updata), 'action': 'edit'}, success: function (data, status) { if (status == "success") { alert("编辑成功"); } }, error: function () { alert("Error"); }, complete: function () { } }); }, columns: [ {checkbox: true}, { "field": 'id', "title": 'id', }, { "field": 'hostname', "title": '主机名', editable: { type: 'text', validate: function (v) { if (!v) return '用户名不能为空'; } } }, { "field": 'sn', "title": 'sn号', } ] }); $("#btn_delete").click(function(){ deleteData('server'); }); function deleteData(tableid) { //获取所有被选中的记录 var rows = $("#"+tableid).bootstrapTable('getSelections'); console.log(rows); if (rows.length== 0) { alert("请先选择要删除的记录!"); return; } var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i]['id']); } console.log(ids); var msg = "您真的确定要删除吗？"; if (confirm(msg) == true) { $.ajax({ url: "/backend/modify/", type: "post", traditional: true, data: {'ids': ids, 'action':'del'}, success: function (data) { alert(data); //重新加载数据 $("#servers").bootstrapTable('refresh'); } }); } } </script> </html>