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+JSon 无刷新分页实现代码
Apr 01 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 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
一个多文件上传的例子(原创)
2006/10/09 PHP
第七节 类的静态成员 [7]
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python 串口读写的实现方法
2019/06/12 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
双十佳事迹材料
2014/01/29 职场文书
租房安全协议书
2014/08/20 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Python 中面向接口编程
2022/05/20 Python