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 相关文章推荐
angular简介和其特点介绍
Jan 29 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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中socket通信机制实例详解
2015/01/03 PHP
php实现对象克隆的方法
2015/06/20 PHP
php多线程并发实现方法
2016/09/30 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
python django 访问静态文件出现404或500错误
2017/01/20 Python
python八大排序算法速度实例对比
2017/12/06 Python
python实现发送邮件功能代码
2017/12/14 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Pytorch转tflite方式
2020/05/25 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
车间主管岗位职责
2013/11/14 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Go语言应该什么情况使用指针
2021/07/25 Golang
MySQL数据库简介与基本操作
2022/05/30 MySQL