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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM