博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularjs ui-grid如何动态设置行高
阅读量:4604 次
发布时间:2019-06-09

本文共 627 字,大约阅读时间需要 2 分钟。

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

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

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

 

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

$templateCache.put('ui-grid/uiGridViewport',            "
" );$templateCache.put('ui-grid/ui-grid-row', "
" );

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

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

 最终效果

转载于:https://www.cnblogs.com/yehuabin/p/5083693.html

你可能感兴趣的文章
解决Cannot change version of project facet Dynamic Web module to 3.1
查看>>
bzoj1115: [POI2009]石子游戏Kam
查看>>
友盟+
查看>>
3.3V转5V原理图
查看>>
其他命令
查看>>
asp.net中MD5
查看>>
C# Color 对照表
查看>>
leetcode32. Longest Valid Parentheses
查看>>
谈谈换工作的那些事儿
查看>>
新零售的组成:线下体验零售和线上效率零售
查看>>
java 中 “==” 和 equals 的区别
查看>>
web工程迁移---weblogic8迁移到jboss5遇到的异常
查看>>
live555中类关系与数据结构
查看>>
SPOJ COT Count on a tree 主席树
查看>>
Python中的sort()
查看>>
(转)centos liveCD liveDVD netinstall minimal DVD1 DVD2 版本区别
查看>>
ansible-playbook api 2.0 运行项目
查看>>
leetcode 538. 把二叉搜索树转换为累加树(Convert BST to Greater Tree)
查看>>
self与super的区别
查看>>
leetcode: Add Two Numbers
查看>>