bootStrap Table 如何使用
最近在使用bootStrap Table 的表格功能有一些自己的理解写下来分享一下
主要用的是一个bootStrapTable 和 jquery 的混合开发 具体怎样引入bootStrap Table 我就不一一详解了直接上代码
htm代码
<table id="table0">
</table>
js代码
var $table = $('#table0');//jq获取指定table
$table.bootstrapTable({//这是对指定table的初始话bootStrap 表格设置
url: ApiUrls.SupplierGetPagedList + "?ApproveState=Approved", //这个里面的ApiUrls是url链接的集合,bootStrap默认的是get的一个提交方式"?ApproveState=Approved"是get方法的查询参数
contentType: "application/x-www-form-urlencoded",//提交的信息类型
search: true, //搜索框
pageSize: "10",
pageNumber: "1",
singleSelect:true,//是否单选
sidePagination: "server",//设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置服务器数据地址(url)或者重写ajax方法。
pagination: true,//设置为 true 会在表格底部显示分页条。
silentSort: false, //设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效.
showRefresh: true, //是否显示刷新按钮
showColumns: false, //内容列下拉框
showHeader: true, //是否显示列头
toolbar: ".button_tow_one",//插入到表头的方法
sortable: true,//设置为false 将禁止所有列的排序。
sortOrder: "asc",//定义排序方式,'asc' 或者 'desc'。//正序 倒序
striped: true,//设置为 true 会有隔行变色效果。
pageList: [10, 20, 50, 100],
clickToSelect: true,//设置 true 将在点击行时,自动选择 rediobox 和 checkbox。
onSearch: function (text) {//bootStrap Table 上方会有一个快速搜索的输入框这个方法就是对应的快速框的搜索方法
$table.bootstrapTable('refresh', { url: ApiUrls.SupplierGetPagedList + "?ApproveState=Approved&Name="+text+"" });
},
maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
queryParams: function queryParams(params) {//其中输出的params是此表搜索的参数每次表格刷新就会执行
str.pageSize=this.pageSize
str.PageIndex=this.pageNumber
params = str
return params;
},
onCheck: function (row) {//选择某行触发
// clickRow[0] = row
obtainSupplyAgreement(row)
checkType=true
},
onUncheck: function (row) {//选择某行触发
checkType=false
$('#tab-1 table tbody').html('')
},
onClickRow: function (row) {//点击某行出发
// obtainSupplyAgreement(row)
},
columns: [{//对应的是thead 表头 表格数据加载完成后会根据下面的field一一对应数据
checkbox: true,
align: 'center'
}, {
field: 'Code',
title: '供应商编码',
}, {
field: 'Name',
title: '供应商名称',
}, {
field: 'Contacter',
title: '联系人',
}, {
field: 'Telephone',
title: '联系电话',
}, {
field: 'ApproveState',
title: '审核状态',
formatter: function formatter(value) {//自定义你的输出结果 你可以在其中自定义你的输出 如果你想表格内 该列是一个输入框 只要 return input 对应的代码就行
if (value == 'Rejected') {
return '拒绝'
} else if (value == 'Pending') {
return '待审核'
} else if (value == 'Approved') {
return '通过'
}
}
},{
field: 'Status',
title: '状态',
formatter: function formatter(value) {
if (value==1) {
return '启用'
} else if (value == '0') {
return '禁用'
}
}
}, {
field: 'Email',
title: '电子邮箱',
}, {
field: 'Fax',
title: '传真',
}
]
});
只要把这个代码复制完成可以完成基本的表格应用
bootStrap Table 如何使用的更多相关文章
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- 后台系统组件:一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- Bootstrap Table Examples
The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...
随机推荐
- easyUi五个常用插件
1.对话框(Dialog) 对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具.用户可以配置对话框 ...
- java 对象和封装
软件出现的目的 面向对象设计和开发程序的好处用计算机语言描述现实世界 交流更加流畅用计算机解决现实世界的问题 提高设计和开发效率 面向对象的思想 描述→ 面向对象的世界 ...
- DevOps实践之Gitlab安装部署
All GitLab packages are posted to our package server and can be downloaded. We maintain five repos: ...
- 从0开始的LeetCode生活—001-Two Sum
题目: Given an array of integers, return indices of the two numbers such that they add up to a specifi ...
- 弹幕视频播放app案例分析
产品 哔哩哔哩动画 相对于其他视频播放软件来说,哔哩哔哩动画没有广告影响观看体验,而且内容更偏重于二次元,因此我更倾向于使用它. 第一部分 调研, 评测 #第一次上手体验 用起来还是比较方便,可以快速 ...
- 201621123068 作业07-Java GUI编程
1. 本周学习总结 1.1 思维导图:Java图形界面总结 2.书面作业 1. GUI中的事件处理 1.1 写出事件处理模型中最重要的几个关键词. 注册.事件.事件源.监听 1.2 任意编写事件处理相 ...
- java实现同步的两种方式
同步是多线程中的重要概念.同步的使用可以保证在多线程运行的环境中,程序不会产生设计之外的错误结果.同步的实现方式有两种,同步方法和同步块,这两种方式都要用到synchronized关键字. 给一个方法 ...
- configparser 练习
[kaixin]xxx = 333name = hahheh = 0[erick]age = 123555xxx = ooo555name = hah555 1 import configparser ...
- python 面向对象设计思想发展史
这篇主要说的是程序设计思想发展历史,分为概述和详细发展历史 一,概述 1940年以前:面向机器 最早的程序设计都是采用机器语言来编写的,直接使用二进制码来表示机器能够识别和执行的 指令和数 据.简单来 ...
- linux系统命令学习系列-用户切换命令su,sudo
先复习一下上节内容: 用户组添加groupadd 用户组修改groupmod 用户组删除groupdel 作业创建一个id为501的组group1,然后改成group2, 同时id变为502,最后删除 ...