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

posted on 2016-09-21 11:58  山那边的人  阅读(2471)  评论(0编辑  收藏  举报

导航