如何在单个 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 对象
希望对您有所帮助!
我正在尝试使用数据表显示数据和 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 对象希望对您有所帮助!