我有列表对象,我绑定到一个看起来像这样的网格:
{ id: 123, name: 'abc', proposed_value: 99.95, status: 'submitted' }
我想在网格中显示它,但添加一个列,当用户单击该列中的单元格时,该列将显示一个带有“批准”和“拒绝”项目的下拉列表框。当他们从该单元格列表框中进行选择时,列表框应该消失,并且单元格中应该显示“接受”或“拒绝”字样以及其左侧的复选框,以便用户可以通过选中该框来确认他们的操作. 只有完成后,我才会请求更新回服务器。我在这方面遇到了困难..
我所做的是稍微更改模型以添加我可以绑定到的新列/属性:
{ id: 123, name: abc, proposed_value: 99.95, status: submitted, new_status: '' }
网格的列定义如下,“new_status”列使用自定义编辑器:
columns: [
{ field: 'new_status', title: "Action", editor: approvalDropDownEditor },
{ field: "name", title: "Name" },
{ field: "proposed_vale", title: "Proposed Value" },
{ field: "status", title: "Workflow Status" },
],
编辑器功能:
function approvalDropDownEditor(container, options) {
$('<input required data-text-field="description" data-value-field="code" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: model.allowed_actions //Approve, Reject, Cancel
});
}
网格数据源:
var grid_ds = new kendo.data.DataSource({
schema: {
model: {
id: 'id',
fields: {
new_status: { type: 'string', editable: true },
name: { type: 'string', editable: false },
proposed_vale: { type: 'number', editable: false },
status: { type: 'string', editable: false },
}
}
},
transport: {
read: {
url: "get_items_in_workflow",
dataType: "json",
},
update: {
url: "update_workflow",
dataType: "json"
}
}
});
所以我的问题是:
- 如何在用户选择一个值后让复选框或按钮出现在左侧。
- 如何仅针对相关行(构造按钮所在的行)从该网格更新回服务器?
- 这是正确的还是推荐的方法
非常感谢