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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
jquery 图片轮换效果
Jul 29 Javascript
JQuery小知识
Oct 15 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
smarty表格换行实例
2014/12/15 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
深入理解Python中变量赋值的问题
2017/01/12 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
优秀经理事迹材料
2014/02/01 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
maven依赖的version声明控制方式
2022/01/18 Java/Android
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS