使用bootstrap-table建立可编辑的表格和树形表格

最新推荐文章于 2021-06-29 08:19:33 发布

Vinllor

最新推荐文章于 2021-06-29 08:19:33 发布

阅读量1.9k

点赞数 2

分类专栏：程序员文章标签： bootstrap js

本文链接：https://blog.csdn.net/VInllor/article/details/106438070

版权

这篇博客介绍了如何使用bootstrap-table构建可编辑的表格和树形表格，提供了相关文档链接、所需导入的包，并展示了示例。同时，提到了在实现过程中遇到的待解决的问题，包括可编辑表格的输入延迟及树形表格搜索功能的限制。

摘要由CSDN通过智能技术生成

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. 可编辑的表格示例

在这里插入图片描述

注：需要将代码中的链接换成自己的链接

									 <!DOCTYPE html>
									<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">insert</button>
									            <button id="delete" class="btn btn-primary">delete</button>
									            <button id="save" class="btn btn-success">save</button>
									        </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:"123