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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
javascript 节点遍历函数
Mar 28 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
js实现分割上传大文件
Mar 09 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
如何编写jquery插件
Mar 29 jQuery
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
React中使用Vditor自定义图片详解
Dec 25 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 正则匹配函数体
2009/08/25 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
微信小程序日历效果
2018/12/29 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
电力工程合作意向书
2015/05/11 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python