<div class="container">
<table id="table">
</table>
</div>
bootstrap需要引入一些js和css
在顶部引用
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录系统</title>
<link rel="stylesheet"
href="${staticGlobalPath}/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet"
href="${staticGlobalPath}/bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
在script中引用的文件
<script src="${staticGlobalPath}/jquery/jquery-1.11.3.min.js"></script>
<script src="${staticGlobalPath}/bootstrap/js/bootstrap.min.js"></script>
<script src="${staticGlobalPath}/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${staticGlobalPath}/plugins/admin/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${staticGlobalPath}/bootstrap-treegrid.min.js"></script>
引用的文件,如有需要到百度网盘去提取
链接:https://pan.baidu.com/s/1c8sVC6u_PF-bKi9sjG1aUQ
提取码:mp9m
接下来是最关键的js代码
<script>
var $table = $('#table');
var data = "";
$(function() {
var ajaxPromise = $.ajax({
type: "POST",
url: "后台查询地址",
cache: false, //禁用缓存
dataType: "json"
});
ajaxPromise.done(function(result) {
var json_data = JSON.stringify(result);
var jdata = JSON.parse(json_data);
data = jdata.data;
console.log(data);
//控制台输出一下数据
$table.bootstrapTable({
data: data,
singleSelect: true,//单行选择
clickToSelect: true,//点击行时自动选择
striped: true,//是否显示行间隔色
treeView: true,//是否显示树形视图
treeId: "id",//定义关键字段来标识树节点
treeField: "orgName",//定义树节点字段
treeParentId: "pid", //定义父级ID字段
treeRootLevel: 1,//树根的级别
treeCollapseAll: false,//是否全部折叠,默认折叠
cascadeCheck: false,//是否层叠选中状态(选中父级,子级全部选中) true=层叠选中,需要singleSelect: false;false=不是层叠选中
uniqueId: "id", //每一行的唯一标识,一般为主键列
columns: [
{ field: 'check', width:"5%", checkbox: true, formatter: function (value, row, index) {
if (row.check == true) {
// console.log(row.serverName);
//设置选中
return { checked: true };
}
}
},
{ field: 'id', title: '组织编码', width:"15%"},
{ field: 'orgName', title: '组织机构名称', width:"25%"},
// {field: 'pid', title: '父机构'},
{ field: 'orgType', title: '单位分类' , width:"15%", sortable: true, align: 'center', formatter: 'statusFormatter'},
{ field: 'operate', title: '操作' , width:"15%", align: 'center', events : operateEvents, formatter: 'operateFormatter' },
],
});
});
});
// 格式化按钮
function operateFormatter(value, row, index) {
return [
'<button class="btn btn-primary btn-sm" style="margin-right:5px;" onclick=toAdd(' + row.id+ ') data-target="#modal-add" >新增</button>',
'<button class="btn btn-warning btn-sm" style="margin-right:5px;" onclick=toEdit(' + row.id+ ') data-target="#modal-edit" >编辑</button>',
'<button class="btn btn-info btn-sm" style="margin-right:5px;" onclick=toView(' + row.id+ ') data-target="#modal-view" >查看</button>',
'<button class="btn btn-danger btn-sm" onclick=delFromID(' + row.orgId + ') >删除</button>'
].join('');
}
// 格式化类型
function typeFormatter(value, row, index) {
if (value === 'menu') { return '菜单'; }
if (value === 'button') { return '按钮'; }
if (value === 'api') { return '接口'; }
return '-';
}
function statusFormatter(value, row, index) {
if (value === 0) {
return '<span class="label label-success">一类</span>';
} else{
return '<span class="label label-default">二类</span>';
}
}
//初始化操作按钮的方法
window.operateEvents = {
'click .RoleOfadd': function (e, value, row, index) {
add(row.id);
},
'click .RoleOfdelete': function (e, value, row, index) {
del(row.id);
},
'click .RoleOfedit': function (e, value, row, index) {
update(row.id);
}
};
</script>
<script>
/**
* 选中父项时,同时选中子项
* @param datas 所有的数据
* @param row 当前数据
* @param id id 字段名
* @param pid 父id字段名
*/
function selectChilds(datas,row,id,pid,checked) {
for(var i in datas){
if(datas[i][pid] == row[id]){
datas[i].check=checked;
selectChilds(datas,datas[i],id,pid,checked);
};
}
}
function selectParentChecked(datas,row,id,pid){
for(var i in datas){
if(datas[i][id] == row[pid]){
datas[i].check=true;
selectParentChecked(datas,datas[i],id,pid);
};
}
}
function test() {
var selRows = $table.bootstrapTable("getSelections");
if(selRows.length == 0){
alert("请至少选择一行");
return;
}
var postData = "";
$.each(selRows,function(i) {
postData += this.id;
if (i < selRows.length - 1) {
postData += ", ";
}
});
alert("你选中行的 id 为:"+postData);
}
function add(id) {
alert("add 方法 , id = " + id);
}
function del(id) {
alert("del 方法 , id = " + id);
}
function update(id) {
alert("update 方法 , id = " + id);
}
</script>