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

在用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. 公司内部Wiki及搭建wiki系统-confluence

    Wiki 是一个协同著作平台或称开放编辑系统.我们可以用Wiki来建设帮助系统,知识库系统.国内公共wiki最著名就是百度百科.那公司内部为什么要使用wiki呢? 2.内部wiki的作用 1.鼓励分享 ...

  2. c++语言的组合类的使用,用组合类的方法计算两点间距离。

    组合类的使用主要涉及到类的构造函数,类的复制构造函数. #include <iostream> #include<cmath> class Point{ public: Poi ...

  3. Linux之sersync数据实时同步

    sersync其实是利用inotify和rsync两种软件技术来实现数据实时同步功能的,inotify是用于监听sersync所在服务器上的文件变化,结合rsync软件来进行数据同步,将数据实时同步给 ...

  4. 9、OpenCV Python 边缘保留滤波

    __author__ = "WSX" import cv2 as cv import numpy as np # 边缘保留滤波 十分重要(美颜的核心) # 高斯双边模糊(考虑到了像 ...

  5. 2019年GPLT L2-3 深入虎穴 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解

    著名的王牌间谍 007 需要执行一次任务,获取敌方的机密情报.已知情报藏在一个地下迷宫里,迷宫只有一个入口,里面有很多条通路,每条路通向一扇门.每一扇门背后或者是一个房间,或者又有很多条路,同样是每条 ...

  6. C++ 标准库智能指针

    整理一下c++中shared_ptr,weak_ptr,unique_ptr三种指针的使用案例和注意事项,让程序资源更加案例,在标准库中,需要包含<memory>,在boost库中, 一. ...

  7. freemarker常用标签解释二

    1 assign 指令 使用这个指令你可以创建一个新的变量,或者替换一个已经存在的变量.注意仅仅顶级变量可以被创建/替换(也就是说你不能创建/替换some_hash.subvar,除了some_has ...

  8. Mybatis学习笔记(六) —— 动态sql

    通过mybatis提供的各种标签方法实现动态拼接sql. 需求:根据性别和名字查询用户 查询sql: SELECT id, username, birthday, sex, address FROM ...

  9. redis常用数据类型与命令

    注意:LPUSH 和LPOP按照栈进行操作,RPUSH和RPOP按照队列进行操作 zremrangebyscore key score开始  score结束//根据score删除 zremrangeb ...

  10. jinkens 检查svn更新就构建

    以下的配置就是,svn上的文件一旦有变动,一分钟后就会触发jinkens的job(构建)