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 相关文章推荐
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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实现点击可刷新验证码
2015/11/07 PHP
详解js异步文件加载器
2016/01/24 PHP
JavaScript 指导方针
2007/04/05 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
使用Python pip怎么升级pip
2020/08/11 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
飞利浦美国官网:Philips美国
2020/02/28 全球购物
班级聚会策划书
2014/01/16 职场文书
七年级生物教学反思
2014/01/30 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年情人节广告语
2016/01/28 职场文书
js Proxy的原理详解
2021/05/25 Javascript