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

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

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样式的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap table 数据表格行内修改的实现代码

    js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空 显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)

  • BootstrapTable refresh 方法使用实例简单介绍

    本文就bootstrapTable refresh 方法如何传递参数做简单举例说明.下面代码中,一个table,一个button,单击button会触发刷新表格操作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../libs/bootstrap

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

    废话不多说了,直接给大家贴代码,具体代码如下所示: 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

  • 微信小程序修改swiper默认指示器样式的实例代码

    修改官方swiper样式 从微信官方微信开发文档中心复制swiper 代码块. wxml定义 <view class="wrap"> <swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange"> <block wx:for="

  • bootstrap table支持高度百分比的实例代码

    更改BootstrapTable.prototype.resetView 方法,以支持高度百分比定义,适应不同高度屏幕 BootstrapTable.prototype.resetView = function (params) { var padding = 0; if (params && params.height) { this.options.height = params.height; } this.$selectAll.prop('checked', this.$selec

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • vue滚动固定顶部及修改样式的实例代码

    滚动固定位置有多种方法 1 css3  粘性定位 position:sticky: top:20px: 2直接position:fixed:给顶部盒子设置一个margin-top刚好是需要固定的盒子的高度 3事件监听更改style中的position属性 ** 修改样式 滚动监听事件中使用this.$refs.xxx.style.color='xxxx' 这种方式会报错 Uncaught TypeError: Cannot read property 'style' of undefined 所

  • BootStrap Fileinput上传插件使用实例代码

    BootStrap Fileinput上传插件使用实例代码

    0.效果图 1.引入js.css(建议css放在html头部,js加载在html底部) <link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/scripts/jquery-1.10.2.min.js"></script> <script sr

  • BootStrap创建响应式导航条实例代码

    BootStrap创建响应式导航条实例代码

    首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

  • Angular+Bootstrap+Spring Boot实现分页功能实例代码

    Angular+Bootstrap+Spring Boot实现分页功能实例代码

    需要用到的js angular.js(用angular.min.js会导致分页控件不显示) ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们在html页面中添加以上文件 在开始之前,我先简单介绍下分页的原理. 分页的实质其实就是一条sql语句, 比如查找第二页,即第16到第30条数据 在MySQL中是select * fr

  • Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap模态框(modal)垂直居中的实例代码

    Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b

  • layui table 表格模板按钮的实例代码

    这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link rel="icon" href="../../../static/images/favicon.png" rel="external nofollow" > <title

随机推荐