使用bootstrap-table建立可编辑的表格和树形表格
1. 可以帮助你更快使用好bootstrap-table的文档链接
- bootstrap-table参数，属性，事件列表
https://blog.csdn.net/qq_38836082/article/details/81450164 - bootstrap-table中文配置教程，全部功能概览
http://www.itxst.com/Bootstrap-Table/QuickStart.html
2. 使用过程中需要导入的包
bootstrap3.3.7，jquery3.3.1，jquery-treegrid，bootstrap-table压缩包
> bootstrap3.3.7压缩包中我已经把要用到的bootstrap-table,bootstrap-table-treegrid相关js,css文件添加了进去
jquery3.3.1压缩包中把要用的jquery-treegrid添加了进去
链接: https://pan.baidu.com/s/1R5YZ--VqIdrv6BN_IsZAdQ 提取码: i5ew
3. 可编辑的表格示例
注：需要将代码中的链接换成自己的链接
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap-table.min.css">
head>
<body>
<div class="table-box" style="margin: 20px;">
<div id="toolbar">
<button id="insert" class="btn btn-info">insertbutton>
<button id="delete" class="btn btn-primary">deletebutton>
<button id="save" class="btn btn-success">savebutton>
div>
<table id="table" class="table table-striped">
table>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js">script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js">script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap-table.min.js">script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap-table-zh-CN.min.js">script>
<script type="text/javascript">
// 对表格进行操作
$(function(){
// 设置表格的列
var tableColumns = [
{checkbox:true},
{field:'name',title:'姓名'},
{field:'sex',title:'性别'},
{field:'email',title:'邮箱'},
{field:'date',title:'注册日期'},
{field:'passward',title:'密码'},
{field:'root',title:'权限'}
];
// 设置假数据
var data1 = [
{name:"金一",sex:"女",email:"[email protected]",date:"2020-2-8",passward:"123456",root:"会员"},
{name:"金二",sex:"女",email:"[email protected]",date:"2020-2-8",passward:"123456",root:"会员"},
{name:"金三",sex:"女",email:"[email protected]",date:"2020-2-6",passward:"123456",root:"版主"},
{name:"金四",sex:"女",email:"[email protected]",date:"2020-2-10",passward:"123456",root:"会员"},
{name:"金五",sex:"女",email:"[email protected]",date:"2020-2-14",passward:"123456",root:"版主"},
{name:"金六",sex:"女",email:"[email protected]",date:"2020-2-20",passward:"123456",root:"会员"},
{name:"金七",sex:"女",email:"[email protected]",date:"2020-2-7",passward:"123456",root:"会员"},
];
// 在表格中新曾一行
var $insert = $('#insert');
var $delete = $('#delete');
var $table = $('#table');
$insert.click(function(){
$table.bootstrapTable('insertRow',{
index:0, //每次都在第一行新增
row:{
name:'',
sex:'',
email:'',
date:'',
password:'',
root:''
}
});
});
// 初始化表格
$table.bootstrapTable({
// url:'', //从后台获取json数据
// method:get,
columns:tableColumns, //表头
data:data1,
toolbar:'#toolbar', //工具栏
clickEdit:true,
showToggle:true,
pagination:true, //开启分页
showColumns:true,
showPaginationSwitch:true, //打开和关闭分页的转换按钮
search:true, //打开搜索框
// 点击单元格时将单元格变为可编辑的
onClickCell:function(field,value,row,$element){
$element.attr('contenteditable',true);
$element.blur(function(){
let index = $element.parent().data('index');
let tdValue = $element.html();
// 将单元格的内容保存住
saveDate(index,field,tdValue);
})
}
});
function saveDate(index,field,value){
$table.bootstrapTable('updateCell',{
index:index, //行索引
field:field, //列名
value:value //新值
})
}
// 保存选中的行
$('#save').click(function(){
var all = JSON.stringify($table.bootstrapTable('getSelections'));
alert(all);
});
// 删除选中的行
$delete.click(function(){
var selRows = JSON.stringify($table.bootstrapTable('getSelections'));
alert(selRows);
if(selRows.length == 0){
alert("请至少选择一行");
return;
}
var postData = "";
$.each(selRows,function(i) {
postData += this.id;
if (i < selRows.length - 1) {
postData += "， ";
}
});
alert("你选中行的 id 为："+postData);
});
});
script>
body>
html>
4. 树形表格示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>普通版块title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
<style>
.small-table{
margin: 10px;
}
style>
head>
<body>
<div class="small-table table-box ">
<div id="toolbar">
<button id="delete" class="btn btn-primary" onclick="test()">deletebutton>
div>
<table id="table" class="table table-striped">table>
div>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js">script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js">script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap-table.min.js">script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap-table-treegrid.min.js">script>
<script src="../jquery-3.3.1/jquery.treegrid.min.js">script>
<script type="text/javascript">
// 对表格进行操作
$(function(){
// 设置表格的列
var tableColumns = [
{ field: 'check', checkbox: true, formatter: function (value, row, index) {
if (row.check == true) {
// console.log(row.serverName);
//设置选中
return { checked: true };
}
}
},
{field:'name',title:'版块名称'},
{field:'author',title:'版主'},
{field:'number',title:'所属数量',sortable:true},
{field:'father',title:'所属版块'},
{field:'info',title:'版块介绍'},
];
// 设置假数据
var data1 = [
{id:1,pid:0,name:"spring",author:"靳一",number:"123",father:"java",info:"学习java的地方"},
{id:2,pid:0,name:"php",author:"靳二",number:"123",father:"java",info:"学习java的地方"},
{id:3,pid:1,name:"html",author:"三",number:"123",father:"java",info:"学习java的地方"},
{id:4,pid:1,name:"css",author:"金四",number:"124",father:"java",info:"学习java的地方"},
{id:5,pid:2,name:"c++",author:"靳五",number:"123",father:"java",info:"学习java的地方"},
{id:6,pid:6,name:"c",author:"靳六",number:"123",father:"java",info:"学习java的地方"},
{id:7,pid:2,name:"c#",author:"靳七",number:"123",father:"java",info:"学习java的地方"},
{id:8,pid:5,name:"android",author:"靳八",number:"123",father:"java",info:"学习java的地方"},
{id:9,pid:4,name:"python",author:"靳九",number:"123",father:"java",info:"学习java的地方"},
];
// 在表格中新曾一行
var $delete = $('#delete');
var $table = $('#table');
// 初始化表格
$table.bootstrapTable({
// url:'', //从后台获取json数据
// method:get,
columns:tableColumns, //表
data:data1,
dataType:'jsonp',
idField:'id',
toolbar:'#toolbar',
clickEdit:true,
showToggle:true,
pagination:true,
showColumns:true,
showPaginationSwitch:true,
search:true,
treeShowField:'name',//哪一列展示树
parentIdField:'pid',
// 设置树的初试状态
onResetView:function(data1){
$table.treegrid({
initialState:'collapsed',//所有节点折叠
treeColumn:1,
// expanderExpandedClass: 'glyphicon glyphicon-minus', //图标样式
// expanderCollapsedClass: 'glyphicon glyphicon-plus',
// onChange: function() {
// $table.bootstrapTable('resetWidth');
// }
});
// 之展开第一层节点
// $table.treegrid('getRootNodes').treegrid('expand');
},
onCheck:function(row){
var datas = $table.bootstrapTable('getData');
// 勾选子类
selectChilds(datas,row,"id","pid",true);
// 勾选父类
selectParentChecked(datas,row,"id","pid")
// 刷新数据
$table.bootstrapTable('load', datas);
},
onUncheck:function(row){
var datas = $table.bootstrapTable('getData');
selectChilds(datas,row,"id","pid",false);
$table.bootstrapTable('load', datas);
}
});
});
/**
* 选中父项时，同时选中子项
* @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");
alert(selRows);
if(selRows.length == 0){
alert("请至少选择一行");
return;
}
var postData = "";
$.each(selRows,function(i) {
postData += this.id;
if (i < selRows.length - 1) {
postData += "， ";
}
});
alert("你选中行的 id 为："+postData);
}
script>
body>
html>
5. 遇到的问题待解决
- 可编辑的表格需要点击2至3下才可以进行输入
- 树形表格加入搜索框后，只能搜索一级节点的内容