修改 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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
用vue写一个日历
Nov 02 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 stream_context_create()作用和用法分析
2011/03/29 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python计算圆周率pi的方法
2015/07/11 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python交互式图形编程的实现
2019/07/25 Python
python中使用np.delete()的实例方法
2021/02/01 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
如何手工释放资源
2013/12/15 面试题
音乐教育感言
2014/03/05 职场文书
职务聘任书范文
2014/03/29 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
电子专业求职信
2014/06/19 职场文书
全陪导游词开场白
2015/05/29 职场文书
如何写新闻稿
2015/07/18 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技