时间戳

首页 > 解决方案 > 如何访问数据表库单表中其他json对象的值？

javascript - 如何访问数据表库单表中其他json对象的值？

问题描述

我正在尝试使用数据表显示数据和查看/编辑/删除按钮。

我正在使用这样的两个对象获取用户数据和权限： [截屏]

{
    "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 对象以检查其值以显示编辑、删除、打印等按钮？

标签： javascriptjquerydatatablescodeigniter-3

解决方案

简短回答：您将无法在数据表初始化代码中获取“perm”对象。数据表初始化代码仅适用于 JSON 中的“数据”数组。

但是，对于您的情况，这里有两种可能的解决方案：

选项 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;

});

当您初始化 Datatables 时，其中 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 变量“权限”是全局的并且对您的 Datatables 初始化代码可见。这将为您提供删除按钮，但您必须编写额外的 Javascript/JQuery 代码来触发数据表编辑器的 AJAX 调用以删除行；在后端和网格中。

选项 2：您可以修改服务器端代码以返回 JSON，使其在“数据”数组的每个元素中都具有权限对象：

{
    "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 对象。

希望这有帮助！

推荐阅读