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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
angular+webpack2实战例子
May 23 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
vue获取data数据改变前后的值方法
Nov 07 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扩展编写点滴 技巧收集
2010/03/09 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python字典简介以及用法详解
2016/11/15 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python自定义线程类简单示例
2018/03/23 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
市场营销管理毕业生自荐信
2014/03/03 职场文书
预备党员的自我评价
2014/03/12 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
mysql部分操作
2021/04/05 MySQL
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP