Bootstrap Table使用整理(一)
前端之家收集整理的这篇文章主要介绍了
Bootstrap Table使用整理(一),
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
相关阅读:
Bootstrap Table使用整理(二)
Bootstrap Table使用整理(三)
Bootstrap Table使用整理(四)之工具栏
Bootstrap Table使用整理(五)之分页组合查询
一、Bootstrap Table相关整理
基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
1.官网地址:
Git源代码地址:
基础简介:
使用示例:
API文档:
nofollow" href="http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/">http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table的有点使用简单,美观整洁,支持CardView等特点
二、简单使用实例
基础引用
1.data-toggle="table" 无需JavaScript启用bootstrap table
通过Data
属性的方式,无需编写JavaScript启用bootstrap table,设置 data-toggle="table" 即可
Item ID
Item Name |
Item Price |
2.使用data-url指定远程数据,特别说明,在使用远程数据的时候,在ajax请求期间,表格内容显示加载中...,
可以通过设置远程url 如:data-url="data1.json" ,
自动加载远程数据
1.这种方式对于
分页不太方便
2.BootstrapTable 对于字段中为空,自动替换成'-'
3.data-classes 属性指定表格的样式,
特别说明:表头和属性的指定方式有两种,一种DOM中定义,一种在Js的参数中定义
内容框浓缩
*/
$('#table1').bootstrapTable({
columns: [
{ field: 'sno',title: '学生编号' },{ field: 'sname',title: '学生姓名' },{ field: 'ssex',title: '性别' },{ field: 'sbirthday',title: '生日' },{ field: 'class',title: '课程编号' },],url:'@Url.Action("GetStudent","DataOne")'
});
table-condensed 表格紧凑样式显示如下:
以上所述是小编给大家介绍的Bootstrap Table使用整理(一)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/bootstrap/38738.html