bootstrap table实例详解


Posted in Javascript onJanuary 06, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script type="text/javascript">
  var $table = $('#table');
  var columns = [];
  //获取表头信息
  function buildColumnsStyle(url, align, valign, ignore) {
    $.ajax({
      'method': 'GET',
      'url': url,
      'async': false,
      'success': function (data, status) {
        //此处设置columns
      }
    });
  }
  buildColumnsStyle('/api/v1/ArticleItem/info', 'center', null, []);
  //动态表格渲染
  $(function () {
    $table.bootstrapTable({
      columns: columns, //表格的列,取决于后台获取的数据
      pageList: [10, 20, 50], //表格每页数据条数控制
      onClickCell: function (row, field, value, $element) {
           //单元格事件
        },
      onPageChange: function (number, size) {
          //表格页面切换事件
        }
    });
    //搜索按钮事件,用于bootstrap table 数据加载
    $('#searchArticle').click(function () { 
      $.get(generateSearchArticleUrl(true), function (data, status) {
        //创建bootstrap模态对话框
        createBootstrapModal(data.result, 100);
        createLabels(data.result);
        //数据加载
        if (data.success && data.result.length != 0) {
            $table.bootstrapTable('load', {data: data.result});
        } else {
            $table.bootstrapTable('load', {data: []});
        }
        renderLabels();
      });
    });
  });
</script>

以上所述是小编给大家介绍的bootstrap table实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
js调试工具Console命令详解
Oct 21 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
Javascript之String对象详解
Jun 08 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
js实现文字截断功能
Sep 14 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
node.js发送邮件email的方法详解
Jan 06 #Javascript
利用jquery实现实时更新歌词的方法
Jan 06 #Javascript
Ajax 加载数据 练习代码
Jan 05 #Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
微信小程序 Tab页切换更新数据
Jan 05 #Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 #Javascript
微信小程序 Template详解及简单实例
Jan 05 #Javascript
You might like
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
javascript常用方法汇总
2014/12/02 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python如何查看微信消息撤回
2018/11/27 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python 从attribute到property详解
2020/03/05 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
《落花生》教学反思
2014/02/25 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
2014年车间工作总结
2014/11/21 职场文书
2014年党务工作总结
2014/11/25 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技