angularjs uigrid 中celltemplate的写浮动框
columnDefs: [
{field: 'collegename', enableFiltering: false ,width:"12%",displayName:"学院" },
{field: 'effect',enableFiltering: false ,cellTemplate:'<td ng-repeat="t in row.entity.effect" ><span class="btn btn-primary btn-xs" title="详情">{{t.course}}</span><div class="relative"><div class="popover" ng-style="{display: t.popover?\'block\':\'none\'}"><div class="popover-content">学科名称:{{t.course}}<br>学科类别:{{t.coursetype}}<br>学年学期:{{t.time}} </div></div></div></td>',
displayName:"预测关联挂科学科名称,专业类别和学年学期",
cellClass:'out'/*,cellClass:"blue"*/},
{field: 'cause', enableFiltering: false ,cellTemplate:'<table class="table"><tr ng-repeat="t in row.entity.cause"><td>{{t.course}}</td><td>{{t.coursetype}}</td><td>{{t.time}}</td></tr></table>',displayName:"挂科学科名称,专业类别和学年学期"/*,cellClass:"red"*/},
{field: 'support', enableFiltering: false,width:"8%",cellTemplate:'<label class="control-label">{{(row.entity.support*100).toFixed(2)}}%</label>',displayName:"挂科学科占比"},
{field: 'zconf',width:"8%", enableFiltering: false,cellTemplate:'<label class="">{{(row.entity.zconf*100).toFixed(2)}}%</label>',displayName:"挂科关联度", }
],
第二列的的样式就是,当鼠标停留在标签上时,就会触发ng-mouseenter事件,显示出具体信息,这里比较重要的就是在celltemplate中单引号和双引号的使用,以及ng-style的样式
ng-style="{display: t.popover?\'block\':\'none\'}"。
具体的angularjs uigrid API以及demo在网址http://ui-grid.info/,以及angularjs的一些简单应用,网址http://showcase.ngnice.com/#/table/local
angularjs uigrid 中celltemplate的写浮动框的更多相关文章
- ui-grid 中cellTemplate中click事件
cellTemplate中使用的函数: 外部定义的函数:
- webdriver高级应用- 在ajax方式产生的浮动框中,单击选择包含某个关键字的选项
Ajax简介: Ajax:局部刷新,原理上也是一个js,js调用服务器的远程接口刷新局部页面数据. Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集). Ajax 是一种用 ...
- hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化
在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...
- 非常强大的jQuery万能浮动框插件
支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...
- 关于css浮动框是否脱离文档流的分析
在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- selenium处理Ajax浮动框方法
package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...
- 在AngularJS应用中实现认证授权
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAokAAAFwCAIAAABbwHY6AAAgAElEQVR4nOy9+XtcxbX3+/4H9z73jP ...
- div 浮动框
随机推荐
- Linux中的task,process, thread 简介
本文的主要目的是介绍在Linux内核中,task,process, thread这3个名字之间的区别和联系.并且和WINDOWS中的相应观念进行比较.如果你已经很清楚了,那么就不用往下看了. LINU ...
- 初级FTP搭建
一:了解FTP基本知识 Vsftpd 1.什么是FTP? File Transfer Protocol 基于C/S结构的文件传输协议2.使用什么协议?什么端口? TCP 21 建立命令链路 TCP 2 ...
- js Get中文乱码 转码
encodeURI escape post: location.href = "ActivitiesOnSale?CurrId=" + Cid + "&CNam ...
- es6 Module
前言: 这是阮一峰老师的ECMA6入门module一章的缩减,只抽取了我在项目中有用到的内容.带着问题去看老师的教程.感觉吸收更快,也明白了偶尔遇到的export不出来的问题. es6模块设计思想: ...
- Server Tomcat v6.0 at localhost was unable to start within 45 seconds
在eclipse里启动tomcat的时候出现以下的错误: Server Tomcat v6.0 at localhost was unable to start within 45 seconds. ...
- java中的ArrayList 、List、LinkedList、Collection关系详解
一.基础介绍(Set.List.Map) Set(集):集合中的元素不按特定方式排序,并且没有重复对象.他的有些实现类能对集合中的对象按特定方式排序. List(列表):集合中的元素按索引位置排序,可 ...
- 想要见识外太空?一款VR头显就能帮你实现梦想
除了宇航员,我们中的大多数人一生都没有机会前往地球之外的宇宙空间,只能在图片和纪录片中感受浩瀚宇宙的震撼. 美国肯尼迪航天中心和BrandVR合作推出的VR头显 而NASA在VR中的投资,创造的新的V ...
- python简易爬虫实现
目的:爬取昵称 目标网站:糗事百科 依赖的库文件:request.sys.beautifulSoup4.imp.io Python使用版本:3.4 说明:参考http://cn.python-requ ...
- 分离JavaScript
分离JavaScript类似于使用style属性,在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法.如果我们用一个"挂钩",就像CSS机制中的 ...
- jquery.ajax异步发送请求的简单测试
使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...