jquery - SlickGrid-如何从列循环将参数传递到格式化程序(包括详细的答案)

Question

我有一个给定的网格。我想在每一行的属性内放置一个 id 值。 (为了获取行标识，执行删除和编辑操作)。

我想到的最好方法是使用格式化程序将其打印到属性中，但我找不到将 id 传递给格式化程序函数的方法，因为格式化程序调用是列减速级别，并且我得到data 循环内的每一行 ID。

如何做到这一点？

function NameFormatter(row, cell, value, columnDef, dataContext) {
    return '<span data-user-id="'+id+'">"'+text+'"</span>';
}

columns.push({ 
   id: "name", name: "Name", field: "name", width: 180, 
   cssClass: "cellName", sortable: true, formatter:NameFormatter
})

for (var i = 0; i < list_users.length; i++) {
    data[i] = {
        /*
           What I do here?
           How do I pass list_users[i].id & 
           list_users[i].name to the formatter from here? 
        */
        name: list_users[i].name,
        role: returnRole(list_users[i].role),
        email: list_users[i].email,
        portfolios: 'no attr for now'
    };
}

Answer 1

在此处记录代码和答案，以供任何偶然发现我的问题的用户将来使用。

SlickGrid 的逻辑是这样工作的:

1. 列，用于定义表格标题和其他运行时属性(例如可排序、宽度等)
2. 数据循环，获取您的 json 并将值注册到 DataView，这些值适用于我们成员(member)。
3. 当我们使用格式化程序时，这个成员会变得有用。

当您调用格式化程序时，在Columns声明中，您只需调用格式化程序即可。光滑的网格将完成剩下的工作。

这是我的列定义，其中有一个带有值和 ID 的 {span} 元素，具体取决于条件。

columns.push({ 
    id: "options", 
    name: "Options", 
    field: "options", 
    width: 110, 
    cssClass: "cellOptions slick-last-cell", 
    formatter: optionsFormatter 
})

如果一切都定义正确，格式化程序将传递条件或任何其他类型作业所需的所有参数。

格式化程序从 dataView 接收您/我们传递的所有行参数。如果我这样定义我的数据:

for (var i = 0; i < list_users.length; i++) {
    data[i] = {
        id: list_users[i].id,
        name: list_users[i].name,
        role: returnRole(list_users[i].role),
        email: list_users[i].email,
        portfolios: 'no attr for now',
        isPending: list_users[i].isPending
    };
}

比我的 dataContext 会将这个数组握在手中，并将其传递给我到格式化程序，在那里我将用变量值做我想做的事情。

 function optionsFormatter(row, cell, value, columnDef, dataContext) {
    if (dataContext.isPending) {
        return '<span onclick="deleteUser(' + dataContext.id + ')" class="actionIcon delete">Cancel</span>';
    } else {
        return '<span onclick="editUser(' + dataContext.id + ')" class="actionIcon edit">Edit</span>';
    }
}

如您所见，id 和 isPending 在网格中对用户不可见，但它们可用于任何 dataContext。

就是这样。当你得到它的那一刻就非常简单了。