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的写浮动框的更多相关文章

  1. ui-grid 中cellTemplate中click事件

    cellTemplate中使用的函数: 外部定义的函数:

  2. webdriver高级应用- 在ajax方式产生的浮动框中,单击选择包含某个关键字的选项

    Ajax简介: Ajax:局部刷新,原理上也是一个js,js调用服务器的远程接口刷新局部页面数据. Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集). Ajax 是一种用 ...

  3. hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化

    在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...

  4. 非常强大的jQuery万能浮动框插件

    支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...

  5. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  6. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  7. selenium处理Ajax浮动框方法

    package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...

  8. 在AngularJS应用中实现认证授权

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAokAAAFwCAIAAABbwHY6AAAgAElEQVR4nOy9+XtcxbX3+/4H9z73jP ...

  9. div 浮动框

随机推荐

  1. Linux中的task,process, thread 简介

    本文的主要目的是介绍在Linux内核中,task,process, thread这3个名字之间的区别和联系.并且和WINDOWS中的相应观念进行比较.如果你已经很清楚了,那么就不用往下看了. LINU ...

  2. 初级FTP搭建

    一:了解FTP基本知识 Vsftpd 1.什么是FTP? File Transfer Protocol 基于C/S结构的文件传输协议2.使用什么协议?什么端口? TCP 21 建立命令链路 TCP 2 ...

  3. js Get中文乱码 转码

    encodeURI  escape post: location.href = "ActivitiesOnSale?CurrId=" + Cid + "&CNam ...

  4. es6 Module

    前言: 这是阮一峰老师的ECMA6入门module一章的缩减,只抽取了我在项目中有用到的内容.带着问题去看老师的教程.感觉吸收更快,也明白了偶尔遇到的export不出来的问题. es6模块设计思想: ...

  5. 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. ...

  6. java中的ArrayList 、List、LinkedList、Collection关系详解

    一.基础介绍(Set.List.Map) Set(集):集合中的元素不按特定方式排序,并且没有重复对象.他的有些实现类能对集合中的对象按特定方式排序. List(列表):集合中的元素按索引位置排序,可 ...

  7. 想要见识外太空?一款VR头显就能帮你实现梦想

    除了宇航员,我们中的大多数人一生都没有机会前往地球之外的宇宙空间,只能在图片和纪录片中感受浩瀚宇宙的震撼. 美国肯尼迪航天中心和BrandVR合作推出的VR头显 而NASA在VR中的投资,创造的新的V ...

  8. python简易爬虫实现

    目的:爬取昵称 目标网站:糗事百科 依赖的库文件:request.sys.beautifulSoup4.imp.io Python使用版本:3.4 说明:参考http://cn.python-requ ...

  9. 分离JavaScript

    分离JavaScript类似于使用style属性,在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法.如果我们用一个"挂钩",就像CSS机制中的 ...

  10. jquery.ajax异步发送请求的简单测试

    使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...