<!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-width: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>
浙公网安备 33010602011771号