前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BootStrap-table插件添加toolbar工具栏

BootStrap-table插件添加toolbar工具栏

作者头像
别团等shy哥发育
发布2023-02-25 17:21:56
1.2K0
发布2023-02-25 17:21:56
举报

1、实现效果

在这里插入图片描述
在这里插入图片描述

2、定义id="toolbar"的容器(id可以自定义)

代码语言:javascript
复制
                    <div class="row" id="toolbar">
                        <div class="col-sm-3">
                            <button class="btn btn-w-m btn-primary glyphicon glyphicon-plus" data-toggle="modal"
                                    href="#addType" data-keyboard="true" data-backdrop="false"
                                    id="btn_add">新增</button>
                        </div>
                        <div class="col-sm-3">
                            <button class="btn btn-w-m btn-primary glyphicon glyphicon-edit" data-toggle="modal" href="#"
                                    onclick="javascript:showUpdateModal()" data-keyboard="true"
                                    data-backdrop="false" id="btn_up">修改</button>
                        </div>
                        <div class="col-sm-3">
                            <button class="btn btn-w-m btn-primary glyphicon glyphicon-remove" id="btn_del"
                                    onclick="deleteType()">删除</button>
                        </div>
                    </div>

3、在bootstrapTable初始化函数中添加toolbar

代码语言:javascript
复制
var $table=$('#table');
            $table.bootstrapTable({
               url:"/ssm_test/type/getType",
                toolbar:'#toolbar',
               dataType:'json',
               method:'post',
               contentType:"application/x-www-form-urlencoded",//发送到服务器的数据编码类型
                pagination:true,            //是否显示分页
                pageSize:30,                //设置每页的记录行数
                pageNumber:1,               //设置首页页码
                singleSelect:false,         //设置是否单选
                checkboxHeader:true,
                clickToSelect:true,
                showRefresh:true,   //是否显示刷新按钮
                showToggle:true,    //是否显示详细视图和列表视图的切换按钮
                showColumns:true,   //选择要显示的列
                striped: true,      //是否显示行间隔色
                queryParamsType:"undefined",//设置参数格式
                queryParams:function queryParams(params) {//设置查询参数
                        var params={
                            page:params.pageNumber,
                            rows:params.pageSize
                        };
                        return params;
                },
                catch:false,                //禁用AJAX数据缓存
                sidePagination:"server",    //服务端处理分页
                columns:[{
                   checkbox:true
                },{
                   title:'类型id',
                    field:'id',
                    valign:'middle'
                },{
                   title:'类型名称',
                    field:'name',
                    valign:'middle'
                }]
            });
        })
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、实现效果
  • 2、定义id="toolbar"的容器(id可以自定义)
  • 3、在bootstrapTable初始化函数中添加toolbar
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档