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 Tools tab使用介绍
Jul 14 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
JavaScript数组操作详解
Feb 04 Javascript
Vue实现选择城市功能
May 27 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
微信小程序实现日历签到
Sep 21 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php调用C代码的实现方法
2014/03/11 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
js 走马灯简单实例
2013/11/21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
vue3.0 上手体验
2020/09/21 Javascript
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
django 外键创建注意事项说明
2020/05/20 Python
Python将字典转换为XML的方法
2020/08/01 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
人资专员岗位职责
2014/04/04 职场文书
个性车贴标语
2014/06/24 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers