フィールドの状態に応じた最終的なdatatableの行の書式設定

Question

私は、角度表示で究極のデータ型を使用しています。私は、名前がstatus（boolean）のフィールドを持つUsersという名前のモデルを持っています：1はブロックを意味し、0はブロックされません。すべてのデータベースの行は、Statusフィールドを含むUsersHomeViewに表示されます。ステータスフィールドに1（ブロックされているユーザー）が含まれているすべての行に、異なるCSS形式を使用し、赤色で表示する必要があります。 私は究極のデータベースを検索しましたが、十分な情報がありません。ここ は私UserHomeControllerです：あなたが最初のパラメータとしてvalue.dataとの関数とすることができるconfig.lines.trClassを使用して、TR属性に特定のCSSクラスを追加することができます

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

ステータスがある場合、あなたは確認することができます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