格式根據在角

Question

我使用最終的數據表中的角視場狀態最終數據錶行。我有一個名爲Users的模型，其中有一個名爲status（boolean）的字段：1表示阻塞，0表示阻塞。所有數據庫行都顯示在UsersHomeView中，包括「狀態」字段。我需要狀態字段包含1的所有行（被阻止的用戶）使用不同的CSS格式並顯示爲紅色。 我搜索了關於最終的數據表，但沒有足夠的信息可用。 這裏是我的UserHomeController：

define(['app', 'u_datatables'], function (app) { 
    app.controller('UserHomeController', ['$scope', '$rootScope', '$location', '$http', 'datatable', 
     function ($scope, $rootScope, $location, $http, datatable) { 
      $scope.formData = {}; 

      var datatableConfig = { 
       "name": "simple_datatable", 
       "columns": [ 

        { 
         "header": "Alias", 
         "property": "user", 
         "type": "text", 
        }, 


        { 
         "header": "Nombre", 
         "property": "name", 
         "type": "text", 
        }, 
        { 
         "header": "Email", 
         "property": "email", 
         "type": "email", 
        }, 
        { 
         "header": "Estado", 
         "property": "status", 
         "type": "boolean", 
         "edit":true, 
        }, 

        { 
         "header": "Tipo", 
         "property": "type", 
         "type": "checkbox", 

        }, 
        { 
         "header": "Rol", 
         "property": "role", 
         "type": "text", 

        } 



       ], 
        "edit":{ 
        "active":true, 
        "columnMode":true 
       }, 
       "filter": { 
        "active": true, 
        "highlight": true, 
        "columnMode": false 
       }, 
       "pagination": { 
        "mode": 'local', 
        "bottom": true, 
        "numberRecordsPerPageList": [{ 
         number: 10, 
         clazz: '' 
        }, { 
         number: 25, 
         clazz: '' 
        }] 
       }, 
       "order": { 
        "mode": 'local' 
       }, 
       "remove": { 
        "active": true, 
        "mode": 'remote', 
        "url": function (value) { 
         return '/api/users/' + value.id; 
        } 
       }, 

    "edit" : { 
    "active":true,//Active or not 
    "withoutSelect":false, //edit all line without selected it        
    "showButton":true,//Show the edit button in the toolbar 
    "showLineButton": false, // Show the edit buttons left of each line 
    "columnMode":true,//Edit column 
    "byDefault":false, //Set in edit mode when the datatable is build 
    "lineMode":function(line){ return boolean;} //function used to define if line is editable 
}, 
       "compact": true, 
       "hide": { 
        "active": true, 
        "byDefault": [ 
         // "address", 
         // "description" 
        ] 
       }, 
       "show" : { 
        "active":true, 
        "showButton":true, 
        "add":function(user){ 
         $location.url('/User?id=' + user.id); 
        } 
       }, 
       "select":{ 
        "active":true,//Active or not 
        "showButton":true,//Show the select all button in the toolbar, 
       }, 
       "mouseevents": { 
        "active": true, 
        "clickCallback": function (line, data) { 
         console.log("callback select : " + data.name); 
        } 
       } 
      }; 

      //GET ALL USERS 
      $http.get('/api/users').then(function (response) { 
       console.log(response.data); 
       $scope.users = response.data; 

       $scope.datatable = datatable(datatableConfig); 
       $scope.datatable.setData($scope.users); 
      }); 

     }]) 

}); 

Answer 1

您可以添加特定CSS類使用config.lines.trClass其可與value.data作爲第一個參數的函數TR屬性，那麼您可以檢查是否狀態1或0並返回你的CSS類。

var datatableConfig = { name = "asdfad" ... lines = { trClass = function(value.data, value.line) { return some css class } }

鏈接到源代碼：https://github.com/institut-de-genomique/Ultimate-DataTable/blob/a654711b0f35891ab70cc5f0df193f7671b42ad7/src/directives/udt-table.js#L35