修改 bootstrap table 默认detailRow样式的实例代码


Posted in Javascript onJuly 21, 2017

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

this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () {
  var $this = $(this),  //a.detail-icon
    $tr = $this.parent().parent(),   //current row
    index = $tr.data('index'),
    row = data[index]; // Fix #980 Detail view, when searching, returns wrong row
  // remove and update
  if ($tr.next().is('tr.detail-view')) {   //exsit
    $this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailOpen));
    that.trigger('collapse-row', index, row);
    $tr.next().remove();
    $tr.next().remove();
  } else {    //not exsit and add
    $this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailClose));
    //$tr.after(sprintf('<tr class="detail-view"><td colspan="%s"></td></tr>', $tr.find('td').length));
    $tr.after(sprintf('<tr class="detail-view detail-view-head"></tr>'));
    $tr.after(sprintf('<tr class="detail-view detail-view-body"></tr>'));
    var $element1 = $tr.next();
    var $element2 = $element1.next();
    //var $
    //var $element = $tr.next().find('td');
    var content = calculateObjectValue(that.options, that.options.detailFormatter, [index, row, $element1, $element2], '');
    //console.log(content);  //head , body Object
    if($element1.length === 1) {
      $element1.append(content.head);
      $element2.append(content.body);
    }
    that.trigger('expand-row', index, row, $element1, $element2);
  }
  that.resetView();
  return false;
});

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

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
json原理分析及实例介绍
Nov 29 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 #Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 #Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 #Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 #Javascript
You might like
php array_filter除去数组中的空字符元素
2020/06/21 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
javascript里的条件判断
2007/02/27 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
VUE 使用中踩过的坑
2018/02/08 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python中不能连接超时的问题及解决方法
2018/06/10 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
结构和类有什么异同
2012/07/16 面试题
高级护理实习生自荐信
2013/09/28 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
年会主持词结束语
2014/03/27 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
个人安全生产责任书
2014/07/28 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
关于开学的感想
2015/08/10 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
速龙x4-860k处理器相当于i几
2022/04/20 数码科技