亲们该页面内会员们分享的“作品”，版权为才华横溢的原作者们所有滴，不得商业使用！
Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。
下载资源：32 次
错误提交：
大小：239.45KB
================关于优设记================
“优设记“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博：同步网站更新内容，订阅jquery资源 @吐槽优设记，欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接：
非特殊说明，本文版权归原作者所有，转载请注明出处
我当前G币余额：0
已下载次数：32
注：购买该插件的用户当日可免费下载 插件作者可永久免费下载
所需G币：20
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
不足，你可以通过
你可以直接下载，不消耗G币
&浙ICP备号-1 & Copyright (C) 2013
All Rights Reserved 您是第2717645位访客！25个可遇不可求的jQuery插件
发表于 11:05|
来源DesignScrazed|
摘要：随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。
随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。&接下来所推荐的这些插件中有滑块、地图、图片旋转块等等，可以说是最好的、完全免费的jQuery插件。&1.&Flat jQuery Price Slider& &|这个jQuery价格滑块可以在一定范围内选择需要的价钱，不管你是做开发项目的还是设计项目，它都会起很大的作用。记住，这个插件完全免费。&2.&Gmaps jQuery Map Plugin& &|GMaps.js是一个JavaScript插件，通过它可以很容易地在你的应用程序中使用谷歌地图，并包含了多个选项，如地图、方向、信息框等等。它的脚本是由很少的代码和简洁文档构成的。因为安装操作很简单，所以要想让代码实现功能就得自己动手。&3.&FormChimp——MailChimp Ajax plugin for jQuery& &|FormChimp是jQuery里的一个可定义的MailChimp Ajax插件，为用户提供一个简便的注册方式，这样的话用户在你的MailChimp列表里注册就不是一件麻烦的事了。&4. OWL Carousel& &|&此jQuery插件具有的触摸功能可以让用户创建出好看的响应式旋转滑块。&5.&jQuery Spellchecker &&|&这个轻量级的jQuery插件能检查文本文档里的单词拼写的正确性，主要是用在一个表单字段里或者是在DOM目录里。&6.&Chart js& &&Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型：折线图、条形图、雷达图、饼图、柱状图和极地区域区。而且，这是一个独立的包，不依赖第三方JavaScript 库，小于 5KB。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫。&7.&Email-autocomplete& &|&这个插件会建议你或者是直接在邮件地址栏里自动填写完域名。&8.&Draggabilly& &|&你可以用这个插件做一些可拖动的jQuery代码片段。&9.&Interact.js& &|&这是一个为电脑和移动设备上的浏览器而制作的可拖放、重置大小、调整手势的插件。&10.&Sortable& &|&它是一个极简单的JavaScript类库，主要是为现代浏览器和触摸设备而制定的。&11.&rowGrid.js &&|&大小只有800bytes gzipped的轻量级jQuery插件用处是把图片或其它项目排版在连续的行内。&12.&Scattered Polaroid gallery &&|&这个插件可以在容器里随机排版这些相片，当你选中了一个项目的时候它就会移动到屏幕中间，其它项目自动闪到旁边。&13.&Viewport Image Resize& &|&操作上比较简单，没有任何麻烦，重新设置图像大小和对图片进行修剪，这些都是基于pseudo视图而做的。&14.&jQueryUI Limitslider &&|&这一滑块插件允许在一条选择线上做出多个滑块，这些滑块可以用来代表位置、尺寸、举例等等，同时还可以在滑块上做标签或者是悬浮标题。&15.&Freewall& &|&Freewall是一个跨浏览器、响应式的jQuery插件，可以创建出多种多样适用在电脑、移动设备和平板电脑上的网格布局。&16.&jQuery fontIconPicker& &|&这个只有1.58kb gzipped大小的插件，可以让用户创建一个带有搜索功能的简单的图标选择器放在管理列表里。17.&Bootstrap-dialog &&|&这个插件会让用户使用Bootstrap的模型更加熟练。&18.&jquery.tabelizer& &|&Tabelizer 1.0.3——用在表格上的多层次分组指标器。&19.&Facebook Badge Jquery Plugin& &|&FaceBadge可以在用户网站上添加了一个Facebook页面标记，用起来更省事。&20.&Croppic &&&这是一个用来裁剪图片的jQuery插件，效果超出你想象。&21.&JQuery Plugin for Google Drive API &&|&这个插件主要是为了让在不同设备上的Google Drive能够同步协作，传输文件等等，包括是Android设备。&22.&Pick-a-Color& &|&这项插件的设计之初就是希望所有人都能使用它，它的界面主要是基于Twitter Bootstrap的风格而设计，所以看起来比较亲切。&23.&Simple Vertical Menu &&&看上去很简单，但是很时髦的一个插件，使用了一些CSS3和jQuery技术，拥有自定义字体和令人影响深刻的标记图案。&24.&jQuery Message Form &&&这只是一个很小的字符计数器的实验版本。&25.&Magnifying Glass Plugin with jQuery and CSS3& &&这是一个放大镜插件，会放大显示鼠标所经过的区域。&&原文来自：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章下次自动登录
关注移动互联网和移动APP开发工具、开发框架、测试工具、微信开发、Android源码、Android开源类库以及各种开源组件的IT科技网站
现在的位置:
JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言：前面介绍了两篇关于bootstrap table的基础用法，这章我们继续来看看它比较常用的一些功能，来个终结篇吧，毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了一些自认为比较常用的功能在此分享给各位园友。源码也在这篇统一给出。好了，不多说废话，开始我们的干货之旅吧。
bootstrap table系列：
一、效果展示
1、表格行样式
&比如我们有一个显示订单页面的需求，不同状态的订单显示不同的颜色，如图：
2、表格行内编辑
第一篇的时候有园友就问过博主是否可以支持行内编辑的效果，答案是肯定的。我们先来看看效果：
点击某个单元格数据
编辑后完成后
3、表格行列合并
关于行列合并的需求博主觉得是非常常见的，尤其是做页面报表的时候需要用到。先来看看效果：
当前页显示不全，点击进入看看。怎么样？效果还不错吧。
4、表格数据导出
&关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。
导出当前页到excel
导出表格所有数据
导出选中行数据
&至于其他类型的文件的导出，和excel基本相同，就不做效果展示了。
二、表格行样式代码示例
&关于表格行的样式设置，其他是它一个最基础的功能，为什么要把它放在第三篇？是因为博主觉得这功能可能到处都用得着。当然，效果并不难，自己用jQuery设置tr的背景色也可以实现，但是博主觉得，既然bootstrap table提供了机制设置行的背景色，我们何不用它内置的api呢。我们看看如何实现。
初始化表格的时候
　　　　 //初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
//toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
pageList: [10, 25, 50, 100],
//可供选择的每页的行数（*）
search: true,
//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true,
//是否显示所有的列
showRefresh: true,
//是否显示刷新按钮
minimumCountColumns: 2,
//最少允许的列数
clickToSelect: true,
//是否启用点击选中行
height: 500,
//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID",
//每一行的唯一标识，一般为主键列
showToggle: true,
//是否显示详细视图和列表视图的切换按钮
cardView: false,
//是否显示详细视图
detailView: false,
//是否显示父子表
rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
return {};
return { classes: strclass }
columns: [{
checkbox: true
field: 'ORDER_NO',
title: '订单编号'
field: 'ORDER_TYPE',
title: '订单类型'
field: 'ORDER_STATUS',
title: '订单状态'
field: 'REMARK',
title: '备注'
其实重点就在这个参数里面：
　　　　　　　rowStyle: function (row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
return {};
return { classes: strclass }
bootstrap table支持5中表格的行背景色，分别是'active', 'success', 'info', 'warning', 'danger'这五种，至于每种对应的背景颜色，将代码运行起来就可看到。关于这个方法的返回值，博主第一次用的时候也研究了好久，按照bootstrap table的规则，必须返回一个json格式的对象型如：&{ classes: strclass } 。
三、表格行内编辑代码示例
&关于表格行内编辑，需要使用bootstrap table扩展的几个js文件。
1、引入额外的js文件
&link rel="stylesheet" href="///vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"&
&script src="///vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"&&/script&
&script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"&&/script&
2、在cshtml页面定义表格时，添加两个属性
&table id="tb_departments"&
&th data-field="Name" data-editable="true"&部门名称&/th&
&th data-field="ParentName"&上级部门&/th&
&th data-field="Level" data-editable="true"&部门级别&/th&
&th data-field="Desc" data-editable="true"&描述&/th&
3、在js里面初始化表格的时候注册编辑保存的事件
$('#tb_departments').bootstrapTable({
url: '/Editable/GetDepartment',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
onEditableSave: function (field, row, oldValue, $el) {
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
error: function () {
alert("Error");
complete: function () {
重点还是看看这个事件的处理方法
　　　　　　　onEditableSave: function (field, row, oldValue, $el) {
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
error: function () {
alert("Error");
complete: function () {
对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
四、表格行列合并代码示例
&表格的行列合并功能不用引用其他的js文件，只需要在cshtml页面使用table的colspan和rowspan即可实现。
1、cshtml页面
&table id="tb_report"&
&th colspan="4" data-valign="middle" data-align="center"&第一季度&/th&
&th colspan="4" data-valign="middle" data-align="center"&第二季度&/th&
&th colspan="4" data-valign="middle" data-align="center"&第三季度&/th&
&th colspan="4" data-valign="middle" data-align="center"&第四季度&/th&
&th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center"&年度汇总&/th&
&th data-field="JanCount" data-align="center"&一月&/th&
&th data-field="FebCount" data-align="center"&二月&/th&
&th data-field="MarCount" data-align="center"&三月&/th&
&th data-field="FirstQuarter" data-align="center"&第一季度&/th&
&th data-field="AprCount" data-align="center"&四月&/th&
&th data-field="MayCount" data-align="center"&五月&/th&
&th data-field="JunCount" data-align="center"&六月&/th&
&th data-field="SecondQuarter" data-align="center"&第二季度&/th&
&th data-field="JulCount" data-align="center"&七月&/th&
&th data-field="AguCount" data-align="center"&八月&/th&
&th data-field="SepCount" data-align="center"&九月&/th&
&th data-field="ThirdQuarter" data-align="center"&第三季度&/th&
&th data-field="OctCount" data-align="center"&十月&/th&
&th data-field="NovCount" data-align="center"&十一月&/th&
&th data-field="DecCount" data-align="center"&十二月&/th&
&th data-field="ForthQuarter" data-align="center"&第四季度&/th&
2、js初始化并无特殊
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
pageList: [10, 25, 50, 100],
//可供选择的每页的行数（*）
怎么样，有没有很简单。当然，有人说了，你都可以不用js初始化，直接在cshtml里面用table的属性去设置url、分页等信息。确实，如果我们看过它的api，会发现它初始化的每一个属性都对应一个table的属性。型如
如果你的表格没有一些特殊的事件需要处理，这样是完全没有问题的。
五、表格数据导出代码示例
&表格数据的导出功能也需要一些扩展的js支持。
1、引入额外的js文件
&script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"&&/script&
&script src="///hhurz/tableExport.jquery.plugin/master/tableExport.js"&&/script&
2、js初始化的时候
　　　　　$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment',
//请求后台的URL（*）
method: 'get',
//请求方式（*）
toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: "asc",
//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "client",
//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,
//初始化加载第一页，默认第一页
pageSize: 10,
//每页的记录行数（*）
pageList: [10, 25, 50, 100],
//可供选择的每页的行数（*）
clickToSelect:true,
showExport: true,
//是否显示导出
exportDataType: "basic",
//basic', 'all', 'selected'.
columns: [{
checkbox: true
field: 'Name',
title: '部门名称'
field: 'ParentName',
title: '上级部门'
field: 'Level',
title: '部门级别'
field: 'Desc',
title: '描述'
还是来看重点：这两个属性
showExport: true,
//是否显示导出
exportDataType: "basic",
//basic', 'all', 'selected'.
showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、所有数据还是选中数据。
以上就是功能的效果以及实现的简单代码。博主发现有几个问题有待解决。
1、行内编辑的功能是每一个单元格提交到后台，这样会造成数据库的频繁操作，感觉不太合适。不知道有没有更好的方式，每行提交到后台。
2、导出的功能虽然很好用，但是遗憾的是不支持IE浏览器，博主试过官网上面的example，好像IE也导出不了。待验证。
源码提供出来，园友们有兴趣可以看看。。
【上篇】【下篇】&&&&jQuery表格插件bs_grid
&jQuery表格插件bs_grid
bs_grid是一个jQuery DataGrid插件，基于Bootstrap。先进行选择，排序和过滤，分页。完全可定制的，灵活的网络设计，定位。使用方法请查看DEMO 演示地址：/jquery-info427
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
jQuery表格插件bs_grid
所需积分：0
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
jQuery表格插件bs_grid
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员}