var head_data = []
// 初始化表格
getColumns()
function getColumns() {
// 加载动态表格
$.ajax({
url: "json/head.json",
type: 'get',
dataType: "json",
async: false,
success: function(data) {
head_data = data
var options = {
//默认表头
columns: [{
field: 'checked',
checkbox: true,
formatter: stateFormatter
}, {
field: 'SerialNumber',
title: '序号',
formatter: function(value, row, index) {
return index + 1;
},
align: "center"
}, {
field: 'name',
title: '名称',
align: "center"
}, {
field: 'state',
title: '状态',
align: "center"
}, {
field: 'ip',
title: 'IP',
align: "center"
}, {
field: 'mac',
title: 'Mac',
align: "center"
}, {
field: 'opera',
title: '制造商',
align: "center"
}, {
field: 'type',
title: '设备类型',
align: "center"
}, {
field: 'system',
title: '操作系统',
align: "center"
}, {
field: 'root',
title: '端口',
hidden: true,
align: "center"
}, {
field: 'date',
title: '更新时间',
align: "center"
},
{
field: 'operate',
title: '操作',
align: 'center',
formatter: actionFormatter,
},
]
};
//遍历新表头
for (var i = 0; i < data.length; i++) {
$.each(data[i].asset_field, function(i, o) {
options.columns.push({
"field": i,
"title": o,
"hidden": true,
"align": 'center'
});
});
}
//渲染数据
$('#Table').bootstrapTable({
url: 'json/detail.json',
method: 'GET', //请求方式(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
showColumns: true, //是否显示所有的列(选择显示的列)
minimumCountColumns: 2, //最少允许的列数
pageNumber: 1, //初始化加载第一页
pagination: true, //是否分页
sidePagination: 'client', //server:服务器端分页|client:前端分页
pageSize: 10, //单页记录数
pageList: [10], //可选择单页记录数
paginationPreText: '上页',
paginationNextText: '下页',
//height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
columns: options.columns
});
}
});
}
//表格复选框
function stateFormatter(value, row, index) {
console.log(row.type)
if (row.state == true)
return {
disabled: true, //设置是否可用
checked: true //设置选中
};
return value;
}
//表格的操作内容:编辑/删除
function actionFormatter(value, row, index) {
console.log("value, row, index",value, row, index)
var id = index;
var result = "";
result +=
"<a href='javascript:;' class='u-btn circle f-mg5' onclick=\"edit_num(\'' + row +'\')\" title='编辑'><span class='fa fa-edit'></span></a>";
result += "<a href='javascript:;' class='u-btn circle f-mg5' onclick=\"DeleteByIds('" + id +
"')\" title='删除'><span class='fa fa-trash'></span></a>";
return result;
}
//编辑事件
function edit_num(row){
console.log(row)
}
//head.json数据
{
"code":200,
"message":"操作成功",
"data":{
"id":1,
"assetType":"手机",
"assetDes":null,
"fields":[
{
"tId":1,
"fieldName":"1-123456",
"fieldDec":"序号"
},
{
"tId":1,
"fieldName":"1-1345645",
"fieldDec":"联系人"
}
]
}
}
//detail.json
[
{
"name":"10.8.8.88",
"state":"离线",
"ip":"10.8.8.88",
"mac":"6c",
"opera":"Vmare",
"type":"手机",
"system":"Linux",
"root":"22",
"date":"2021-06-09",
"qqname":"xx",
"order":1,
"username":"xuxu"
},
]