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 相关文章推荐
Angularjs---项目搭建图文教程
Jul 08 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
手把手教你如何编译打包video.js
Dec 09 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
Three.js快速入门教程
2016/09/09 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
Python 正则表达式入门(初级篇)
2016/12/07 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python实现车牌识别的示例代码
2019/08/05 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
学校七一活动方案
2014/01/19 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
党日活动总结
2014/05/07 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
创业的9条正确思考方式
2019/08/26 职场文书