web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table

基于网页管理系统的开发大多数功能只是对数据的显示与操作,对于数据的显示一般都是通过table表格来显示,所以管理系统的开发很有必要引入表格插件,对于sencha touch等商业化框架,都有自己自带的表格控件,而对于bootstrap需要引入第三方的表格插件,这里我学习下bootstrap table。

介绍

bootstrap table是基于bootstrap框架的一个表格插件,官网地址是http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html,插件拥有如下功能

环境搭建

下载源码之后引入相应的css与js,如下(前提你已经引入了bootstrap基础类库与样式和jquery类库

    <link rel="stylesheet" href="bootstrap-table.css">
    <script src="bootstrap-table.js"></script>

  如果想要此插件的所有默认提示均改为中文,需要引入对应的本地化类库,路径:Desktop\bootstrap-table-master\dist\locale

        

        

实例

可参考http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html

扩展插件可参考http://wenzhixin.net.cn/p/bootstrap-table/docs/extensions.html

可在上面设置语言类型来浏览文档

总结

bootstrap table插件对于数据的显示,导出等功能进行了非常好的实现,而且支持了响应式的布局方式,日常的后台管理系统中我们可以尝试地应用该插件进行数据的展现。

时间: 2024-12-21 22:30:17

web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table的相关文章

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

web多终端开发学习系列(二)--- 硬件交互框架Phonegap学习

目前对于移动端.桌面端的原生开发各平台都有各自的开发语言.开发工具等.如果要开发出一个适配多个终端的系统,我们需要用各自的平台工具分别开发出各自的应用,这对于一个团队或者一个开发人员来说要求非常高,并且非常耗时.前一篇学习了Bootstrap框架,对于多终端的界面适配有了解决方案.但一个系统除了与用户之间的交互外,其内部还可能需要与硬件进行交互来实现某些特殊需求,比如摄像头的调用,相册的获取等等.对于这些硬件的调用我们可以选择Phonegap. 介绍 Phonegap是一个适配多个终端进行硬件交

web多终端开发学习系列(四)--- web图表插件

对于数据的显示除了可以用表格外,还可以使用图表来更好.更直观地表达数据,比如数据的趋势可以用折线图,数据的比例可以用饼图等等.所以在web的开发过程中图表的应用非常广泛,对于图表的js框架我找到了Chart.js和Highcharts.Chart支持响应式布局,而Highcharts不支持,但是Highcharts的功能更全面. 介绍 Chart.js的官网是:http://www.bootcss.com/p/chart.js/,Chart.js不依赖于第三方类库,只需导入Chart.js即可.

Servlet3.0学习总结(三)——基于Servlet3.0的文件上传

Servlet3.0学习总结(三)——基于Servlet3.0的文件上传 在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不需要借助任何第三方上传组件,直接使用Servlet3.0提供的API就能够实现文件上传功能了. 一.使用Servlet3.0提供的API实现文件上传 1.1.编写上传页面 1 <%@ page language="jav

Web程序员开发App系列 - 开发我的第一个App,源码下载

Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 Web程序员开发App系列 - 开发我的第一个App 待续 目录 前言 源码和App下载 准备工作 查看留言页面 增加留言页面 前言 看了前面几篇文章后我们终于要开始敲代码了,由于所有前端代码都是Html静态问题,所以你用什么开发工具都可以,后台我采用MVC开发,因为Html静态文件需要打包,里面

iOS开发UINavigation系列三——工具栏UIToolBar

iOS开发UINavigation系列三--工具栏UIToolBar iOS中除了UINavinationBar之外,还有工具栏UIToolBar可以供我们使用,工具栏和导航栏十分类似,只是功能更加简单,工具栏中也有UIBarButtonItem按钮,在前两篇博客中,对导航栏和导航项都进行的讨论,地址如下: UINavigationBar:http://my.oschina.net/u/2340880/blog/527706 UINavigationItem:http://my.oschina.

Identity Server4学习系列三

1.简介 在Identity Server4学习系列一和Identity Server4学习系列二之令牌(Token)的概念的基础上,了解了Identity Server4的由来,以及令牌的相关知识,本文开始实战,实现Identity Server4基本的功能. 2.前提 本文基于.Net Core2.1和Indetity Server4 2.3.0,令牌处理包采用IdentityServer4.AccessTokenValidation 2.7.0 3.实战一Identity Server4服

Quartz定时任务学习(二)web应用/Quartz定时任务学习(三)属性文件和jar

web中使用Quartz 1.首先在web.xml文件中加入 如下内容(根据自己情况设定) 在web.xml中添加QuartzInitializerServlet,Quartz为能够在web应用中使用,提供了一个QuartzInitializerServlet和一个QuartzInitializerListener,用于在加载web应用时,对quartz进行初始化. <servlet> <servlet-name> QuartzInitializer </servlet-na

C# Redis学习系列三:Redis配置主从

Redis配置主从 主IP :端口      192.168.0.103 6666 从IP:端口       192.168.0.108 3333 配置从库 (1)安装服务: redis-server --service-install --service-name redisService6666 --port 6666 (2)启动进程: redis-server --service-start --service-name redisService6666 (3)连接redis:redis-