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页,此 ...
随机推荐
- Nginx 错误处理方法: bind() to 0.0.0.0:80 failed
Nginx 错误处理方法: bind() to 0.0.0.0:80 failed 今天启动window上的nginx总是报错 错误信息是bind() to 0.0.0.0:80 failed (10 ...
- DNS 域名系统的简介
一.DNS域名系统简介 1.网络中为了区别各个主机,必须为每台主机分配一个唯一的地址, 这个地址即称为“IP 地址.但这些数字难以记忆, 所以采用“域名” 的方式来取代这些数字. 2.当某台主机要与其 ...
- git push的用法
git push <远程仓库名> <本地分支名>:<远程分支名>
- python logging一个通用的使用模板
import os import logbook from logbook.more import ColorizedStderrHandler from functools import wraps ...
- Java IO详解(四)------字符输入输出流
File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...
- 【原创】java NIO FileChannel 学习笔记 新建一个FileChannel
首先使用FileChannel 的open方法获取一个FileChannel对象.下面这段代码是FileChannel中open方法的代码. public static FileChannel ope ...
- 高效的CSS代码(2)
——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...
- Protobuf使用(一)
Protobuf使用(一) 前言: 最近由于接手一个支付的项目,他们那边的网络请求和数据解析都与我平常接触的项目不同,数据请求由于保密暂时不能说,但是数据解析用的是Protobuf,于是我就顺 ...
- ES6 Generators并发
ES6 Generators系列: ES6 Generators基本概念 深入研究ES6 Generators ES6 Generators的异步应用 ES6 Generators并发 如果你已经读过 ...
- 【转】 Git——如何将本地项目提交至远程仓库
1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...