428 lines
16 KiB
HTML
428 lines
16 KiB
HTML
<!--淘宝店：云码资源优选 https://shop188702750.taobao.com/search.htm?spm=a1z10.1-c.0.0.1221421cqgmNaI&search=y--><!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||
<title>bootstrap-table - 后台管理系统模板</title>
|
||
<link rel="icon" href="favicon.ico" type="image/ico">
|
||
<meta name="keywords" content="后台管理系统HTML模板">
|
||
<meta name="description" content="基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
|
||
<meta name="author" content="yinqi">
|
||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="css/materialdesignicons.min.css" rel="stylesheet">
|
||
<link href="css/animate.css" rel="stylesheet">
|
||
<link href="css/style.min.css" rel="stylesheet">
|
||
<link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container-fluid p-t-15">
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-header"><h4>bootstrap-table简单示例</h4></div>
|
||
<div class="card-body">
|
||
|
||
<div id="toolbar" class="toolbar-btn-action">
|
||
<button id="btn_add" type="button" class="btn btn-primary m-r-5">
|
||
<span class="mdi mdi-plus" aria-hidden="true"></span>新增
|
||
</button>
|
||
<button id="btn_edit" type="button" class="btn btn-success m-r-5">
|
||
<span class="mdi mdi-check" aria-hidden="true"></span>启用
|
||
</button>
|
||
<button id="btn_edit" type="button" class="btn btn-warning m-r-5">
|
||
<span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
|
||
</button>
|
||
<button id="btn_delete" type="button" class="btn btn-danger">
|
||
<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
|
||
</button>
|
||
</div>
|
||
<table id="tb_departments"></table>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4>TreeGrid使用</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<div id="toolbar2" class="toolbar-btn-action">
|
||
<button type="button" class="btn btn-primary m-r-5" onclick="test()">返回选中行</button>
|
||
</div>
|
||
|
||
<table class="tree-table"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
|
||
|
||
<!--行内编辑插件-->
|
||
<link href="js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
|
||
<script type="text/javascript" src="js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
|
||
|
||
<script type="text/javascript" src="js/main.min.js"></script>
|
||
<script type="text/javascript">
|
||
$('#tb_departments').bootstrapTable({
|
||
classes: 'table table-bordered table-hover table-striped',
|
||
url: 'http://www.bixiaguangnian.com/index/test/getExampleJson',
|
||
method: 'get',
|
||
dataType : 'jsonp', // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
|
||
uniqueId: 'id',
|
||
idField: 'id', // 每行的唯一标识字段
|
||
toolbar: '#toolbar', // 工具按钮容器
|
||
//clickToSelect: true, // 是否启用点击选中行
|
||
showColumns: true, // 是否显示所有的列
|
||
showRefresh: true, // 是否显示刷新按钮
|
||
|
||
//showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
|
||
|
||
pagination: true, // 是否显示分页
|
||
sortOrder: "asc", // 排序方式
|
||
queryParams: function(params) {
|
||
var temp = {
|
||
limit: params.limit, // 每页数据量
|
||
offset: params.offset, // sql语句起始索引
|
||
page: (params.offset / params.limit) + 1,
|
||
sort: params.sort, // 排序的列名
|
||
sortOrder: params.order // 排序方式'asc' 'desc'
|
||
};
|
||
return temp;
|
||
}, // 传递参数
|
||
sidePagination: "server", // 分页方式：client客户端分页，server服务端分页
|
||
pageNumber: 1, // 初始化加载第一页，默认第一页
|
||
pageSize: 10, // 每页的记录行数
|
||
pageList: [10, 25, 50, 100], // 可供选择的每页的行数
|
||
//search: true, // 是否显示表格搜索，此搜索是客户端搜索
|
||
|
||
//showExport: true, // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
|
||
//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
|
||
|
||
columns: [{
|
||
checkbox: true // 是否显示复选框
|
||
}, {
|
||
field: 'id',
|
||
title: 'ID',
|
||
sortable: true // 是否排序
|
||
}, {
|
||
field: 'author',
|
||
title: '作者'
|
||
}, {
|
||
field: 'dynasty',
|
||
title: '朝代',
|
||
}, {
|
||
field: 'nationality',
|
||
title: '国籍'
|
||
}, {
|
||
field: 'opus',
|
||
title: '作品'
|
||
}, {
|
||
field: 'category',
|
||
title: '分类'
|
||
}, {
|
||
field: 'status',
|
||
title: '状态',
|
||
editable: {
|
||
type: 'select',
|
||
title: "状态",
|
||
pk: 1,
|
||
source: [
|
||
{ value: 0, text: '禁用'},
|
||
{ value: 1, text: '正常'}
|
||
],
|
||
noeditFormatter: function (value, row, index) {
|
||
var result;
|
||
if (value == '0' || value == '禁用') {
|
||
result = { filed: "status", value: "禁用", class: "label label-danger" };
|
||
} else if (value == '1' || value == '正常') {
|
||
result = { filed: "status", value: "正常", class: "label label-success" };
|
||
}
|
||
|
||
return result; // 这里对bootstrap-table-editable.min.js做了一些修改，让其能接收class
|
||
},
|
||
// 可以按列分开做保存，也可以用后面的onEditableSave
|
||
url: 'http://www.bixiaguangnian.com/index/test/testEditJson',
|
||
ajaxOptions: {
|
||
type: 'get',
|
||
dataType: 'jsonp'
|
||
}, // 默认是post方式提交,这里因为跨域,改成get
|
||
success: function(response, newValue) {
|
||
if (response.code == '200') {
|
||
// 这里的状态显示有自定义样式区分，做单元格更新
|
||
$('#tb_departments').bootstrapTable('updateCellById', {id: response.id, field: 'status', value: newValue});
|
||
} else {
|
||
return response.msg;
|
||
}
|
||
},
|
||
highlight: false
|
||
}
|
||
}, {
|
||
field: 'operate',
|
||
title: '操作',
|
||
formatter: btnGroup, // 自定义方法
|
||
events: {
|
||
'click .edit-btn': function (event, value, row, index) {
|
||
editUser(row.id);
|
||
},
|
||
'click .del-btn': function (event, value, row, index) {
|
||
delUser(row.id);
|
||
}
|
||
}
|
||
}],
|
||
/*
|
||
onEditableSave: function (field, row, oldValue, $el) {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "http://www.bixiaguangnian.com/index/test/testEditTwo",
|
||
data: row,
|
||
dataType: 'jsonp',
|
||
success: function (data, status) {
|
||
if (data.code == '200') {
|
||
// 这里的状态显示有自定义样式区分，做单行的更新
|
||
$('.example-table').bootstrapTable('updateRow', {index: row.id, row: row});
|
||
} else {
|
||
alert(data.msg);
|
||
}
|
||
},
|
||
error: function () {
|
||
alert('修改失败，请稍后再试');
|
||
}
|
||
});
|
||
}
|
||
*/
|
||
onLoadSuccess: function(data){
|
||
$("[data-toggle='tooltip']").tooltip();
|
||
}
|
||
});
|
||
|
||
// 操作按钮
|
||
function btnGroup ()
|
||
{
|
||
let html =
|
||
'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
|
||
'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
|
||
return html;
|
||
}
|
||
|
||
// 操作方法 - 编辑
|
||
function editUser()
|
||
{
|
||
alert('编辑信息跳转');
|
||
}
|
||
// 操作方法 - 删除
|
||
function delUser()
|
||
{
|
||
alert('信息删除成功');
|
||
}
|
||
</script>
|
||
|
||
<!--以下是tree-grid的使用示例-->
|
||
<link href="js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
|
||
<script type="text/javascript" src="js/jquery-treegrid/jquery.treegrid.min.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
|
||
<script type="text/javascript">
|
||
// tree-grid使用
|
||
var data = JSON.parse(
|
||
'[{"id":1, "pid":0, "status":1, "name":"用户管理", "permissionValue":"open:user:manage"},' +
|
||
'{"id":2, "pid":0, "status":1, "name":"系统管理", "permissionValue":"open:system:manage"},' +
|
||
'{"id":3, "pid":1, "status":1, "name":"新增用户", "permissionValue":"open:user:add"},' +
|
||
'{"id":4, "pid":1, "status":1, "name":"修改用户", "permissionValue":"open:user:edit"},' +
|
||
'{"id":5, "pid":1, "status":0, "name":"删除用户", "permissionValue":"open:user:del"},' +
|
||
'{"id":6, "pid":2, "status":1, "name":"系统配置管理", "permissionValue":"open:systemconfig:manage"},' +
|
||
'{"id":7, "pid":6, "status":1, "name":"新增配置", "permissionValue":"open:systemconfig:add"},' +
|
||
'{"id":8, "pid":6, "status":1, "name":"修改配置", "permissionValue":"open:systemconfig:edit"},' +
|
||
'{"id":9, "pid":6, "status":0, "name":"删除配置", "permissionValue":"open:systemconfig:del"},' +
|
||
'{"id":10, "pid":2,"status":1, "name":"系统日志管理", "permissionValue":"open:log:manage"},' +
|
||
'{"id":11, "pid":10,"status":1, "name":"新增日志", "permissionValue":"open:log:add"},' +
|
||
'{"id":12, "pid":10,"status":1, "name":"修改日志", "permissionValue":"open:log:edit"},' +
|
||
'{"id":13, "pid":10,"status":0, "name":"删除日志", "permissionValue":"open:log:del"}]');
|
||
|
||
var $treeTable = $('.tree-table');
|
||
$treeTable.bootstrapTable({
|
||
data: data,
|
||
idField: 'id',
|
||
uniqueId: 'id',
|
||
dataType: 'jsonp',
|
||
toolbar: '#toolbar2',
|
||
columns: [
|
||
{
|
||
field: 'check',
|
||
checkbox: true
|
||
},
|
||
{
|
||
field: 'name',
|
||
title: '名称'
|
||
},
|
||
{
|
||
field: 'status',
|
||
title: '状态',
|
||
sortable: true,
|
||
/*
|
||
* 可以选择采用开关来处理状态显示
|
||
* 或者采用上个示例的处理方式
|
||
*/
|
||
formatter: function (value, row, index) {
|
||
if (value == 0) {
|
||
is_checked = '';
|
||
} else if (value == 1){
|
||
is_checked = 'checked="checked"';
|
||
}
|
||
result = '<label class="lyear-switch switch-primary lyear-status"><input type="checkbox" '+ is_checked +'><span onClick="updateStatus('+ row.id +', '+ value +')"></span></label>';
|
||
return result;
|
||
},
|
||
},
|
||
{
|
||
field: 'permissionValue',
|
||
title: '权限值'
|
||
},
|
||
{
|
||
field: 'operate',
|
||
title: '操作',
|
||
align: 'center',
|
||
events : {
|
||
'click .role-add': function (e, value, row, index) {
|
||
add(row.id);
|
||
},
|
||
'click .role-delete': function (e, value, row, index) {
|
||
del(row.id);
|
||
},
|
||
'click .role-edit': function (e, value, row, index) {
|
||
update(row.id);
|
||
}
|
||
},
|
||
formatter: operateFormatter
|
||
}
|
||
],
|
||
|
||
treeShowField: 'name',
|
||
parentIdField: 'pid',
|
||
|
||
onResetView: function(data) {
|
||
$treeTable.treegrid({
|
||
initialState: 'collapsed', // 所有节点都折叠
|
||
treeColumn: 1,
|
||
//expanderExpandedClass: 'mdi mdi-folder-open', // 可自定义图标样式
|
||
//expanderCollapsedClass: 'mdi mdi-folder',
|
||
onChange: function() {
|
||
$treeTable.bootstrapTable('resetWidth');
|
||
}
|
||
});
|
||
|
||
// 只展开树形的第一集节点
|
||
$treeTable.treegrid('getRootNodes').treegrid('expand');
|
||
},
|
||
onCheck: function(row) {
|
||
var datas = $treeTable.bootstrapTable('getData');
|
||
|
||
selectChilds(datas, row, 'id', 'pid', true); // 选择子类
|
||
|
||
selectParentChecked(datas, row, 'id', 'pid'); // 选择父类
|
||
|
||
$treeTable.bootstrapTable('load', datas);
|
||
},
|
||
|
||
onUncheck: function(row) {
|
||
var datas = $treeTable.bootstrapTable('getData');
|
||
selectChilds(datas, row, 'id', 'pid', false);
|
||
$treeTable.bootstrapTable('load', datas);
|
||
},
|
||
});
|
||
|
||
// 操作按钮
|
||
function operateFormatter(value, row, index) {
|
||
return [
|
||
'<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="编辑" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
|
||
'<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
|
||
'<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
|
||
].join('');
|
||
}
|
||
|
||
/**
|
||
* 选中父项时，同时选中子项
|
||
* @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 add(id) {
|
||
alert("add 方法 , id = " + id);
|
||
}
|
||
function del(id) {
|
||
alert("del 方法 , id = " + id);
|
||
}
|
||
function update(id) {
|
||
alert("update 方法 , id = " + id);
|
||
}
|
||
function updateStatus(id, state) {
|
||
var newstate = (state == 1) ? 0 : 1; // 发送参数值跟当前参数值相反
|
||
$.ajax({
|
||
type: "get",
|
||
url: "http://www.bixiaguangnian.com/index/test/testGridJson",
|
||
data: {id: id, state: newstate},
|
||
dataType: 'jsonp',
|
||
success: function (data, status) {
|
||
if (data.code == '200') {
|
||
$treeTable.bootstrapTable('updateCellById', {id: id, field: 'status', value: newstate});
|
||
} else {
|
||
alert(data.msg);
|
||
$treeTable.bootstrapTable('updateCellById', {id: id, field: 'status', value: state}); // 因开关点击后样式是变的，失败也重置下
|
||
}
|
||
},
|
||
error: function () {
|
||
alert('修改失败，请稍后再试');
|
||
}
|
||
});
|
||
}
|
||
|
||
function test() {
|
||
var selRows = $treeTable.bootstrapTable("getSelections");
|
||
if(selRows.length == 0){
|
||
alert("请至少选择一行");
|
||
return;
|
||
}
|
||
console.log(selRows);
|
||
|
||
var postData = "";
|
||
$.each(selRows,function(i) {
|
||
postData += this.id;
|
||
if (i < selRows.length - 1) {
|
||
postData += "， ";
|
||
}
|
||
});
|
||
alert("你选中行的 id 为："+postData);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |