BootStrap Table 后台数据绑定、特殊列处理、排序功能


Posted in Javascript onMay 27, 2017

本节主要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序功能

1.数据绑定

 一般做程序设计,很少是使用json文件直接绑定数据。基本上我们都是使用编程语言进行数据获取,并做数据绑定。

放置一个Table控件

<table id="table" ></table>

调用javascript的代码

<script >
$('#table').bootstrapTable({
  url: 'tablejson.jsp',  //数据绑定,后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:'400',
  columns: [
  {
    field: 'Id',
    title: '中文'
  }, {
    field: 'Name',
    title: 'Name'
  }
  , {
    field: 'Desc',
    title: 'Desc'
  }
  ],
});

2.特殊列处理

 在实际应用中,我们需要增加我们的特殊列,例如是操作列,看下列的js代码 增加了一个特殊列

{
    field: '#',
    title: 'control',formatter:function(value,row,index){
    var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >删除</a>';
    var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>';
    var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>'
    return del+" "+updt+" "+add;
    }
  }

js的代码修改为

<script >
$('#table').bootstrapTable({
  url: 'tablejson.jsp',  //数据绑定,后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:'400',
  columns: [
   
  {
    field: 'Id',
    title: '中文'
  }, {
    field: 'Name',
    title: 'Name'
  }
  , {
    field: 'Desc',
    title: 'Desc'
  }
,
{
    field: '#',
    title: 'control',formatter:function(value,row,index){
    var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >删除</a>';
    var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>';
    var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>'
    return del+" "+updt+" "+add;
    }
  }
], }); 

3.列的排序,排序主要是在列中增加了一个属性

{
    field: 'Name',
    title: 'Name',<br><em id="__mceDel">sortable:true</em>
}

以上所述是小编给大家介绍的BootStrap Table 后台数据绑定、特殊列处理、排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
react-redux中connect()方法详细解析
May 27 #Javascript
react-router实现跳转传值的方法示例
May 27 #Javascript
简单实现JavaScript弹幕效果
Aug 27 #Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 #Javascript
详解webpack打包vue时提取css
May 26 #Javascript
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
You might like
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
js关于命名空间的函数实例
2015/02/05 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
利用python获得时间的实例说明
2013/03/25 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
简单理解Python中的装饰器
2015/07/31 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python数据集切分实例
2018/12/08 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python实现随机加减法生成器
2020/02/24 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
PHP面试题附答案
2015/11/28 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
医学类导师推荐信范文
2013/11/19 职场文书
《去年的树》教学反思
2014/04/11 职场文书
公民授权委托书范本
2014/09/17 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA