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" 即可

1.这种方式不太常用,因为分页不方便

Item ID

2.使用data-url指定远程数据,特别说明,在使用远程数据的时候,在ajax请求期间,表格内容显示加载中...,

可以通过设置远程url 如:data-url="data1.json" ,自动加载远程数据

1.这种方式对于分页不太方便

2.BootstrapTable 对于字段中为空,自动替换成'-'

Item Name Item Price

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

猜你在找的Bootstrap相关文章