如何在单个 table 的数据 table 库中访问其他 json 对象的值?

How to access values of other json objects in single table of datatable library?

我正在尝试使用数据表显示数据和 view/edit/delete 按钮。

我正在使用如下两个对象获取用户数据和权限: ]

{
    "data": [
        {
            "userid": "1",
            "username": "John",
            "email": "john@gmail.com",
            "userrole": "SYSTEM VENDOR",
            "isactive": "Y",
            "activationstat": "deactivate",
            "activationmsg": "Deactivate"
        }
    ],
    "perm": 
    {
        "read": "y",
        "edit": "y",
        "delete": "n"
    }
}

需要为每一行呈现按钮。数据表代码如下:

$('#dt-user').DataTable({
    dom: 'lBfrtip',
    buttons: [
        {
            extend: 'copyHtml5',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'csvHtml5',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'excelHtml5',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'pdfHtml5',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'print',
            exportOptions: {
                columns: ':visible'
            }
        },
        'colvis'
    ],
    ajax: baseURL + 'user/list-user-aj',
    columns: [
        {
            "data": "id",
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        { data: 'username' },
        { data: 'email' },
        { data: 'userrole' },
        { data: 'isactive' }
    ],
    responsive: {
        details: false
    }
});

如何访问 "perm" JSON 对象来检查其值以显示编辑、删除、打印等按钮?

简答:您将无法在数据表初始化代码中获取 "perm" 对象。数据表初始化代码仅适用于 JSON.

中的 "data" 数组

但是,对于您的情况,有两种可能的解决方案:

选项 1: 如果 "perm" 对象对于 JSON 中的 "data" 数组中的所有元素(用户)是公共的,如下所示:

{
    "data": [
    {
        "userid": "1",
        "username": "John",
        "email": "john@gmail.com",
        "userrole": "SYSTEM VENDOR",
        "isactive": "Y",
        "activationstat": "deactivate",
        "activationmsg": "Deactivate"
    },
    {
        "userid": "2",
        "username": "John2",
        "email": "john2@gmail.com",
        "userrole": "SYSTEM VENDOR2",
        "isactive": "Y",
        "activationstat": "deactivate",
        "activationmsg": "Deactivate"
    }
    <!-- and maybe some more objects-->
   ],
  "perm": 
   {
    "read": "y",
    "edit": "y",
    "delete": "n"
   }
}

然后您可以像下面这样访问 perm 对象:(这将超出 Datatables 定义)

var permissions;
userDatatable.on('xhr', function () {
    var json = userDatatable.ajax.json();
    var permissions = json.perm;

});

当您像下面这样初始化数据表时,其中 userDatatable 将是全局 javascript 变量:

var userDatatable = $('#dt-user').DataTable({  //......and all your code 

然后在您的列定义中,您可以像这样访问 perm 对象和呈现按钮:

 columns:[
    {
      data:null,
      "render": function(data, type, row, meta){
         if(perm.delete === 'y'){
             return "<button class='deleteButton'> Delete </button>";
         }
      }
    }
 ]

确保 javascript 变量 "permissions" 是全局变量并且对您的 Datatables 初始化代码可见。这将为您提供删除按钮,但您必须编写额外的 Javascript/JQuery 代码来触发数据表编辑器的 AJAX 调用以删除该行;在后端和从网格。

选项 2:您可以将服务器端代码修改为 return JSON,这样它将在 "data"数组:

{
    "data": [
    {
        "userid": "1",
        "username": "John",
        "email": "john@gmail.com",
        "userrole": "SYSTEM VENDOR",
        "isactive": "Y",
        "activationstat": "deactivate",
        "activationmsg": "Deactivate",
        "perm": 
          {
            "read": "y",
            "edit": "y",
            "delete": "n"
           }
    },
    {
        "userid": "2",
        "username": "John2",
        "email": "john2@gmail.com",
        "userrole": "SYSTEM VENDOR2",
        "isactive": "Y",
        "activationstat": "deactivate",
        "activationmsg": "Deactivate",
         "perm": 
           {
             "read": "y",
             "edit": "y",
             "delete": "n"
           }
    }
    <!-- and maybe some more objects-->
   ]
}

使用第二个选项,您可以使用 "row.perm.delete" 属性.

在 "render" 函数中访问 perm 对象

希望对您有所帮助!