自己开发的公众号,可以领取淘宝内部优惠券

在用ui-grid的时候我们可以用rowHeight设置行高,可是每一行的高度都是一样的,无法根据行内的内容进行自适应。如下图

为了解决这个问题,google了几天时间找不到动态设置行高的方法。通过查看元素的结构发现这么点线索

可以发现每一个row都是通过这样的template进行循环输出的,这样子就可以在这个模板上进行添加点样式,通过ui-grid的源代码我们找到了下面两个模板

$templateCache.put('ui-grid/uiGridViewport',
"<div role=\"rowgroup\" class=\"ui-grid-viewport\" ng-style=\"colContainer.getViewportStyle()\"><!-- tbody --><div class=\"ui-grid-canvas\" ><div style=\"height:{{grid.appScope.fixHeight(row)}}px\" ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\" class=\"ui-grid-row\" ng-style=\"Viewport.rowStyle(rowRenderIndex)\"><div role=\"row\" ui-grid-row=\"row\" row-render-index=\"rowRenderIndex\"></div></div></div></div>"
); $templateCache.put('ui-grid/ui-grid-row',
"<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" style=\"height:{{grid.appScope.fixHeight(row)}}px\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>"
);

这两个模板是ui-grid/uiGridViewport和ui-grid/ui-grid-row,为了实现效果不得不进行覆盖原有的模板。我加了style属性并调用当前controller的fixHeight方法,传入当前的row参数。

在fixHeight方法里面就可以获取row.entity属性得到当前行的实体进行相应的逻辑处理

最终效果

angularjs ui-grid如何动态设置行高的更多相关文章

  1. Kendo UI Grid 使用总结

    Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...

  2. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  3. 机房收费系统中的Grid++Report报表设计器的应用

    在进行账单查询功能的时候我应用了Grid++Report报表设计器,下面我就为大家介绍一下,还望大家多多指点. 首先,在Grid++Report报表设计器中进行报表界面的设置.在属性编辑窗口中这里对报 ...

  4. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  5. 给GridView设置行高

    近期在工作中遇到了这样一个问题,使用一个GridView展示数据,item中仅仅是一个TextView,可是里面显示的文字多少不固定多少,必须所有展示出来. 遇到的问题: 1.把item中的宽和高设置 ...

  6. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

  7. 实现Myxls设置行高的功能(转)

    MyXLS是一个导出Excel的好工具,速度快,体积小,而且也不用担心使用Com生成Excel时资源释放的问题了.但是作者提供的代码没有设置行高 要实现这个效果,首先需要修改两个文件: 1.Row.c ...

  8. angularjs UI Libraries

    angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...

  9. NGUI UI Grid, two column

    NGUI UI Grid, two column, set Arrangement Horizontal, Column Limit 2.

随机推荐

  1. scala lambda 表达式 & spark RDD函数操作

    形式:(参数)=> 表达式  [ 一种匿名函数 ] 例1:map(x => x._2) 解:x=输入参数,“=>” 右边是表达式(处理参数): x._2 : x变为(**,x,**. ...

  2. localStorage、sessionStorage、cookie的有效期和作用域问题

    sessionStorage,localStorage,cookie都可以实现客户端存储,三者的区别有哪些了? cookie作为最早期的被设计web浏览器存储少量数据,从底层看,它是作为http协议的 ...

  3. POJ1063 Flip and Shift

    题目来源:http://poj.org/problem?id=1063 题目大意: 有一种游戏如图所示.一个填满黑白球的转盘,它可以有两种操作,一种是将大转盘顺时针旋转,所有球的位置顺时针挪一位,另一 ...

  4. tomcat使用不同的jdk版本 liunx 装两个jdk

    原作者文章 https://blog.csdn.net/qq_34626097/article/details/83385219 看了原作者学会的!上面链接 因为公司的服务器里面是jdk1.7和tom ...

  5. windwos-sshfs

    从 http://www.jianshu.com/p/d79901794e3d 转载 目的 最近因为需要在linux虚拟机里进行开发程序,虽然在linux里有超强的编辑器vim,但vim开发html前 ...

  6. Luogu P2107 小Z的AK计划 堆贪心

    好久不做这种题了... 存一下每个点的位置和时间,由于达到某个位置跟之前去哪里AK的无关,所以在时间超限后,可以用大根堆弹掉之前消耗时间最大的,来更新答案,相当于去掉之前花费最大的,直到时间不在超限. ...

  7. JS匿名函数以及arguments.callee的调用

    var res = (function (n) {    if( n>1 ) {        return n + arguments.callee( n-1 );    } else {   ...

  8. hadoop install start-dfs.sh 失败

    linux:ubuntu 16.04 LTS hadoop version: 2.7.3 JDK: java-9-open-jdk issue: start-dfs.sh start-dfs.sh:c ...

  9. web三大组件

    1.Servlet Servlet是用来处理客户端请求的动态资源,也就是当我们在浏览器中键入一个地址回车跳转后,请求就会被发送到对应的Servlet上进行处理. Servlet的任务有: 接收请求数据 ...

  10. python3.7安装Scrapy

    环境:windows 7. 安装过程中遇到的问题 1.error: Unable to find vcvarsall.bat 2.1083: Cannot open include file: 'ba ...