Javascript 如何在Razor页面中有条件地绘制DataTables列

目前，我们这样做是为了为两个不同的用户绘制服务器端数据表的列，我们能够使用razor代码隐藏列标题，以便仅在用户是管理员或组管理员时绘制它们。然而，在绘制数据时，我们遇到了以下问题：

function getTableColumns() {
            var allowedToDelete = @(User.IsInRole("SysAdmin") || GroupManager.IsUserGroupAdmin(Model.GroupId, User.FindFirst(ClaimTypes.NameIdentifier).Value) ? "true" : "false");

            if (allowedToDelete) {
                return [{ "defaultContent": "" },
                { "data": "deadlineDate", "name": "DeadlineDate" },
                { "data": "priority", "name": "Priority" },
                { "data": "jobNumber", "name": "JobNumber" },
                { "data": "project", "name": "Project" },
                { "data": "description", "name": "Description" },
                { "data": "reference", "name": "Reference" },
                { "data": "subReference", "name": "SubReference" },
                { "data": "employee", "name": "Employee" },
                { "data": "allocatedTo", "name": "AllocatedTo" },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Archive Item' class='fa fa-archive table-icon-view' onclick='archiveJob(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Delete' class='fa fa-trash table-icon-delete' onclick='showDeleteModal(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                { "data": "issueDate" },
                { "data": "startDate" },
                { "data": "createdBy" },
                { "data": "createdDate" },
                { "data": "notes" }];
            } else {
                return [{ "defaultContent": "" },
                { "data": "deadlineDate", "name": "DeadlineDate" },
                { "data": "priority", "name": "Priority" },
                { "data": "jobNumber", "name": "JobNumber" },
                { "data": "project", "name": "Project" },
                { "data": "description", "name": "Description" },
                { "data": "reference", "name": "Reference" },
                { "data": "subReference", "name": "SubReference" },
                { "data": "employee", "name": "Employee" },
                { "data": "allocatedTo", "name": "AllocatedTo" },
                {
                    "render": function (data, type, full, meta) {
                        return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                            + full.groupId + "\",\"" + full.id + "\")'></i>";
                    }
                },
                { "data": "issueDate" },
                { "data": "startDate" },
                { "data": "createdBy" },
                { "data": "createdDate" },
                { "data": "notes" }];
            }
        }

函数getTableColumns（）{ var allowedToDelete=@（User.IsInRole（“SysAdmin”）| | GroupManager.IsUserGroupAdmin（Model.GroupId，User.FindFirst（ClaimTypes.NameIdentifier）.Value）？“true”：“false”）； 如果（允许删除）{ 返回[{“defaultContent”：“}， {“数据”：“deadlineDate”，“名称”：“deadlineDate”}， {“数据”：“优先级”，“名称”：“优先级”}， {“数据”：“作业编号”，“名称”：“作业编号”}， {“数据”：“项目”，“名称”：“项目”}， {“数据”：“描述”，“名称”：“描述”}， {“数据”：“引用”，“名称”：“引用”}， {“数据”：“子引用”，“名称”：“子引用”}， {“数据”：“员工”，“姓名”：“员工”}， {“data”：“allocatedTo”，“name”：“allocatedTo”}， { “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }, { “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }, { “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }, {“数据”：“发布日期”}， {“数据”：“起始日期”}， {“数据”：“createdBy”}， {“数据”：“createdDate”}， {“数据”：“注释”}]； }否则{ 返回[{“defaultContent”：“}， {“数据”：“deadlineDate”，“名称”：“deadlineDate”}， {“数据”：“优先级”，“名称”：“优先级”}， {“数据”：“作业编号”，“名称”：“作业编号”}， {“数据”：“项目”，“名称”：“项目”}， {“数据”：“描述”，“名称”：“描述”}， {“数据”：“引用”，“名称”：“引用”}， {“数据”：“子引用”，“名称”：“子引用”}， {“数据”：“员工”，“姓名”：“员工”}， {“data”：“allocatedTo”，“name”：“allocatedTo”}， { “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }, {“数据”：“发布日期”}， {“数据”：“起始日期”}， {“数据”：“createdBy”}， {“数据”：“createdDate”}， {“数据”：“注释”}]； } }

---

是否有办法对此进行优化，使我们不必重复代码来隐藏2个图标链接？

您可以在变量中定义默认数组，并将2个图标链接推入if中，然后返回：

function getTableColumns() {
        var allowedToDelete = @(User.IsInRole("SysAdmin") || GroupManager.IsUserGroupAdmin(Model.GroupId, User.FindFirst(ClaimTypes.NameIdentifier).Value) ? "true" : "false");

        var dataArray = [{ "defaultContent": "" },
            { "data": "deadlineDate", "name": "DeadlineDate" },
            { "data": "priority", "name": "Priority" },
            { "data": "jobNumber", "name": "JobNumber" },
            { "data": "project", "name": "Project" },
            { "data": "description", "name": "Description" },
            { "data": "reference", "name": "Reference" },
            { "data": "subReference", "name": "SubReference" },
            { "data": "employee", "name": "Employee" },
            { "data": "allocatedTo", "name": "AllocatedTo" },
            {
                "render": function (data, type, full, meta) {
                    return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                        + full.groupId + "\",\"" + full.id + "\")'></i>";
                }
            },
            { "data": "issueDate" },
            { "data": "startDate" },
            { "data": "createdBy" },
            { "data": "createdDate" },
            { "data": "notes" }];

        if (allowedToDelete) {
            return dataArray.Concat([{
                "render": function (data, type, full, meta) {
                    return "<i title ='Edit' class='fa fa-pencil table-icon-edit' onclick='editJob(\""
                        + full.groupId + "\",\"" + full.id + "\")'></i>";
                }
            },
            {
                "render": function (data, type, full, meta) {
                    return "<i title ='Delete' class='fa fa-trash table-icon-delete' onclick='showDeleteModal(\""
                        + full.groupId + "\",\"" + full.id + "\")'></i>";
                }
            }]).ToArray();
        } else {
            return dataArray;
        }
    }

函数getTableColumns（）{ var allowedToDelete=@（User.IsInRole（“SysAdmin”）| | GroupManager.IsUserGroupAdmin（Model.GroupId，User.FindFirst（ClaimTypes.NameIdentifier）.Value）？“true”：“false”）； var dataArray=[{“defaultContent”：“}， {“数据”：“deadlineDate”，“名称”：“deadlineDate”}， {“数据”：“优先级”，“名称”：“优先级”}， {“数据”：“作业编号”，“名称”：“作业编号”}， {“数据”：“项目”，“名称”：“项目”}， {“数据”：“描述”，“名称”：“描述”}， {“数据”：“引用”，“名称”：“引用”}， {“数据”：“子引用”，“名称”：“子引用”}， {“数据”：“员工”，“姓名”：“员工”}， {“data”：“allocatedTo”，“name”：“allocatedTo”}， { “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }, {“数据”：“发布日期”}， {“数据”：“起始日期”}， {“数据”：“createdBy”}， {“数据”：“createdDate”}， {“数据”：“注释”}]； 如果（允许删除）{ 返回dataArray.Concat([{ “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }, { “呈现”：函数（数据、类型、完整、元）{ 返回“”； } }]).ToArray（）； }否则{ 返回数据数组； } } 您可以使用相应的显示/隐藏列

此外，为了避免渲染函数的某些重复，可能值得一看

创建这样的渲染函数可能如下所示：

$.fn.dataTable.render.icon = function ( title, icon, func) {
    return function ( data, type, row ) {
        return "<i title ='" + title + "' class='fa " + icon + "' onclick='" + func + "(\""
            + row.groupId + "\",\"" + row.id + "\")'></i>";
    }
};

{
    //Column visibility
    visible: allowedToDelete,
    //Reusable renderer
    render: $.fn.dataTable.render.icon('Archive Item', 'fa-archive table-icon-view', 'archiveJob')
},
{
    visible: allowedToDelete,
    render: $.fn.dataTable.render.icon('Edit', 'fa-pencil table-icon-edit', 'editJob')
},
{
    visible: allowedToDelete,
    render: $.fn.dataTable.render.icon('Delete', 'fa-trash table-icon-delete', 'showDeleteModal')
},