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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
javaScript基础详解
Jan 19 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
聊聊JS ES6中的解构
Apr 29 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多种序列化与反序列化的方法
2013/06/06 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python中有帮助函数吗
2020/06/19 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
高二英语教学反思
2014/01/19 职场文书
化妆品促销方案
2014/02/24 职场文书
cf搞笑广告词
2014/03/14 职场文书
护士个人自我鉴定
2014/03/24 职场文书
英文推荐信格式范文
2014/05/09 职场文书
个人授权委托书范文
2014/09/21 职场文书
代领报检证委托书范本
2014/10/11 职场文书
幼儿园辞职书
2015/02/26 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python