bootstrap-table表格插件的使用案例
近期刚刚结束一个项目,总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件,下面是我做的一个案例(展示主要代码部分):
- //请求服务数据时所传参数
- function queryParams(params){
- return{
- //每页多少条数据
- pageSize: params.limit,
- //请求第几页
- pageIndex: params.pageNumber,
- }
- }
- //创建表格
- $('#table').bootstrapTable({
- method: 'get',
- url: "../controller/main_pic_list.php",//后台接口地址
- dataType: "json",
- pagination: true, //分页
- search: true, //显示搜索框,是否显示表格搜索,此搜索是客户端搜索,不会进服务端
- strictSearch: true,//Enable the strict search
- striped: true, //是否显示行间隔色
- pageNumber: 1, //初始化加载第一页,默认第一页
- pageSize: 5,//每页的记录行数
- pageList:[5,10,15,20,25,30],//分页步进值
- showRefresh:true,//刷新按钮
- showColumns:true,//是否显示所有的列
- //sortable: true,//是否启用排序
- //sortOrder: "asc",//排序方式
- //uniqueId: "ID",//每一行的唯一标识,一般为主键列
- showToggle:true,//是否显示详细视图和列表视图的切换按钮
- //cardView: false,//是否显示详细视图
- //detailView: false,//是否显示父子表
- //toolbar: '#toolbar',//指定工具栏
- //clickToSelect: true,//是否启用点击选中行
- //toolbarAlign:'right',//工具栏对齐方式
- //buttonsAlign:'right',//按钮对齐方式
- queryParamsType:'limit',//查询参数组织方式
- queryParams:queryParams,//请求服务器时所传的参数
- cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
- locale:'zh-CN',//中文支持
- sidePagination: "server", //服务端处理分页
- responseHandler:function(res){
- //在ajax获取到数据,渲染表格之前,修改数据源
- $.each(res.rows,function (i,v) {
- v.updatetime = getLocalTime(v.updatetime);
- });
- return res;
- },
- columns: [
- {
- title:'全选',
- field:'select',
- //复选框
- checkbox:true,
- width:25,
- align:'center',
- valign:'middle'
- },
- {
- title: 'id',
- field: 'id',
- align: 'center'
- },
- {
- title: '标题',
- field: 'title',
- align: 'center',
- valign: 'middle'
- },
- {
- title: '说明信息',
- field: 'altinfo',
- align: 'center',
- },
- {
- title: '所属模块',
- field: 'modname',
- align: 'center'
- },
- {
- title: '图片URL',
- field: 'pictureurl',
- align: 'center',
//更改此项显示的内容,无此参数会显示默认值- formatter:function(value,row,index){
- return '<a href="'+ value +'" target=_blank>'+value+'</a> ';
- }
- },
- {
- title: '状态',
- field: 'status',
- align: 'center'
- },
- {
- title: '权重',
- field: 'weight',
- align: 'center'
- },
- {
- title: '最近更新时间',
- field: 'updatetime',
- align: 'center'
- },
- {
- title: '创建者',
- field: 'createuser',
- align: 'center'
- },
- {
- title: '最新修改者',
- field: 'lastuser',
- align: 'center'
- },
- {
- title: '最近修改者ip',
- field: 'lastip',
- align: 'center'
- },
- {
- title: '操作',
- field: 'operation',
- align: 'center',
//更改此项显示的内容,无此参数会显示默认值- formatter:function(value,row,index){
- var e = '<a href="main_pic_edit.html?id='+ row.id +'">编辑</a> ';
- var d = '<a href="../controller/main_pic_delete.php?id='+ row.id +'"style="color:red" href="#">删除</a> ';
- if(value === 'e') {
- return e;
- }
- if(value === 'ed') {
- return e+d;
- }
- }
- }
- ]
- });
注意:1. bootstrap-table表格插件自带分页功能,传递的参数要和后台协商定义好;2. 其他参数配置参考代码中的注释。
bootstrap-table表格插件的使用案例的更多相关文章
- [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)
原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- bootstrap 分页表格插件
找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
- 基于Bootstrap的表格插件bootstrap-table
写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...
- Bootstrap Table 表格参数详解
表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...
- bootstrap table表格前台分页,点击tab选项,重新刷新表格
近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table: 在实际实现的时候,在默认状态下,表格翻到了第5页,此 ...
随机推荐
- 【正则表达式】匹配时间格式:hh:mm或h:m
^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$
- 每周.NET前沿技术文章摘要(2017-06-07)
汇总国外.NET社区相关文章,覆盖.NET ,ASP.NET等内容: .NET .NET Core and .NET Framework Working Together, Or: The Magic ...
- vs code调试console程序报错--preLaunchTask“build”
网上有其他大神给出的建议是注释掉launch.json中的 "preLaunchTask": "build", 但是这种方式也会造成一个问题,就是再使用F5调试 ...
- 2018第一发:记一次【Advanced Installer】打包之旅
一.前言 2017年最后几天,你们都高高兴兴的跨年,博主还在加班制作.net安装包.因为年前要出来第一版的安装包,所以博主是加班加点啊.本来想用VS自带的制作工具,不过用过的人都知道,真是非常好(to ...
- bzoj 3670: [Noi2014]动物园
Description 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学习 ...
- 1.QT开发第一个程序
Ubuntu16.04安装QT5.8.0:http://www.cnblogs.com/dotnetcrazy/p/6725945.html QT5.8支持中文输入法(附带老版本的解决+不理想的情况解 ...
- Git详解之六:Git工具
Git 工具 现在,你已经学习了管理或者维护 Git 仓库,实现代码控制所需的大多数日常命令和工作流程.你已经完成了跟踪和提交文件的基本任务,并且发挥了暂存区和轻量级的特性分支及合并的威力.(伯乐在线 ...
- 房上的猫:java基础知识部分知识点
1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...
- leetcode — reorder-list
/** * Source : https://oj.leetcode.com/problems/reorder-list/ * * Given a singly linked list L: L0→L ...
- A session had already been started – ignoring session_start() 怎么办?
php警告提示A session had already been started – ignoring session_start() 解决方案 访问log日志发现有个这样的警告 主要是在TP框架中 ...