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

Question

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

我想到的最好的方法是使用格式化程序将其打印到attrubute,但我找不到将id传递给formatter函数的方法,因为formatter调用是列减速级别,而我得到的每一行都是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,这对我们来说是记忆.
3. 这些成员在我们使用格式化程序时变得有用.

当您调用格式化程序时,在Columns声明中,您只需要调用formatter.光滑的网格将完成其余的工作.

这是我的列定义,其中我有一个带有值和id的{span}元素,基于条件.

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

如果所有内容都已正确定义,则Formatter将传递条件或任何其他类型作业所需的所有参数.

格式化程序从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.

而已.你得到它的那一刻很简单.