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基本编码模式小结
May 23 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
详解组件库的webpack构建速度优化
Jun 18 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
JavaScript实现商品评价五星好评
Nov 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
php根据分类合并数组的方法实例详解
2013/11/06 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python 私有函数的实例详解
2017/09/11 Python
python创建文件备份的脚本
2018/09/11 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
python获取栅格点和面值的实现
2020/03/10 Python
python爬取音频下载的示例代码
2020/10/19 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
女大学生自我鉴定
2013/12/09 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
个人校本研修方案
2014/05/26 职场文书
工作岗位职责范本
2015/02/15 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年教研组工作总结
2015/05/04 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
python全面解析接口返回数据
2022/02/12 Python