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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
js实现文字截断功能
Sep 14 Javascript
angular分页指令操作
Jan 09 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue离开当前页面触发的函数代码
Sep 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中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python列表切片操作实例总结
2019/02/19 Python
Python测试线程应用程序过程解析
2019/12/31 Python
如何利用Python 进行边缘检测
2020/10/14 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Python实现区域填充的示例代码
2021/02/03 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
导游的职业规划书范文
2013/12/27 职场文书
自我介绍演讲稿
2014/01/15 职场文书
任命书怎么写
2014/06/04 职场文书
承诺书样本
2014/08/30 职场文书
出生公证书
2015/01/23 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016年教师新年寄语
2015/08/18 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS