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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
详解写好JS条件语句的5条守则
Feb 28 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
利用js对象弹出一个层
2008/03/26 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
js打造数组转json函数
2015/01/14 Javascript
DOM 事件流详解
2015/01/20 Javascript
JS中Location使用详解
2015/05/12 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python实现挑选出来100以内的质数
2015/03/24 Python
python显示生日是星期几的方法
2015/05/27 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
python实现决策树分类
2018/08/30 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
会计实习生工作总结的自我评价
2013/10/07 职场文书
电子商务应届生求职信
2013/11/16 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
护士求职信范文
2014/05/24 职场文书
联谊活动总结
2014/08/28 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
黄河绝恋观后感
2015/06/08 职场文书
小学班长竞选稿
2015/11/20 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Python 键盘事件详解
2021/11/11 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫