我不太了解 Kendo UI，但我正在修改一个几乎完全用 Kendo UI 编写的现有应用程序。通常，通过研究和重新利用现有的代码位来进行小的更改对我来说很有效。但是，我发现了一个无法解决的问题，需要帮助。
我有一个屏幕，在 kendo.grid 中列出了一堆人。每一行都有一个编辑按钮，它会启动一个弹出窗口，其中有一堆可以选中的复选框。然后在更新时我会将这些数据发送到服务器进行处理。
但是，在弹出窗口中，当我按下更新时，数据源：传输：更新：子句没有被触发。 （有关信息，数据源：transport: read: 子句完美触发）。
所以，这是代码。谁能看到我哪里出错了？
function setGrid() {
var command = {};
dataSource = new kendo.data.DataSource({
serverFiltering: false,
serverSorting: false,
serverPaging: false,
sort: {
field: 'per_name',
dir: 'asc'
},
transport: {
read: {
url: 'action.cfm?action=filehandler.list',
dataType: 'json',
cache: false
},
update: {
url: 'action.cfm?action=filehandler.save',
dataType: 'json',
cache: false
}, // THIS NEVER FIRES
parameterMap: function (options, operation) {
console.log(operation);
console.log(options);
if (operation !== 'read') {
return options;
}
}
},
pageSize: 20,
schema: {
model: {
id: 'login',
fields: {
login: {
editable: false
},
per_name: {
editable: false
},
org_name: {
editable: false
},
//lst_user_sec_ids: {
// editable: true
//},
lst_user_sec_labels: {
editable: false
}
}
}
},
change: function (e) {
if (e.action === 'sync') {
lists.loadFilehandlers();
this.read();
}
},
error: function (e) {
app.printMessage({
restError: e.xhr
});
}
});
$screen.find('#filehandler-grid').kendoGrid({
dataSource: dataSource,
sortable: true,
cache: false,
noRecords: true,
pageable: {
pageSize: 20,
pageSizes: [20, 50, 100],
refresh: true,
info: true
},
filterable: {
extra: false,
mode: 'row',
operators: {
string: {
contains: 'Contains'
},
number: {
eq: 'Equals'
}
}
},
editable: {
mode: 'popup',
template: kendo.template($("#sectors-editor").html())
},
edit: function (e) {
$(e.container).parent().css({
top: '50px',
left: '150px',
width: '850px',
height: '600px',
overflow: 'scroll'
});
},
resizable: true,
selectable: 'cell',
columns: [
{
field: 'login',
title: 'ECAS ID',
hidden: true,
type: 'string',
filterable: {
cell: {
showOperators: false
}
},
width: '150px'
},
{
field: 'per_name',
title: 'Name',
hidden: false,
filterable: {
cell: {
showOperators: false
}
}
},
{
field: 'org_name',
title: 'Unit',
hidden: false,
type: 'string',
filterable: {
cell: {
showOperators: false
}
}
},
{
field: 'lst_user_sec_labels',
title: 'Has access to sectors',
hidden: false,
type: 'string',
filterable: {
cell: {
showOperators: false
}
}
},
{
field: 'lst_user_sec_ids',
title: 'hide this later',
hidden: false,
type: 'string',
filterable: {
cell: {
showOperators: false
}
}
},
{
command: [
{
name: 'edit',
text: {
edit: 'Edit',
cancel: 'Cancel'
},
click: function(e) {
// prevent page scroll position change
e.preventDefault();
// e.target is the DOM element representing the button
var tr = $(e.target).closest("tr"); // get the current table row (tr)
// get the data bound to the current table row
var data = this.dataItem(tr);
// Get the data for the list of sectors and write it into the popup window
setSectorsList(data.login, data.lst_user_sec_ids);
}
}
],
title: 'Actions',
width: '225px',
filterable: false
}
]
});
}
更新 1
如果我将 editable: mode: 'popup' 更改为 editable: mode: 'inline' 更新方法会触发。那么我的弹出模板是否存在某种配置问题？
更新 2
如果我将它保留为 editable: mode: 'popup' 但删除我的自定义模板以便它使用默认的弹出模板，更新方法再次触发。
所以，我猜这个问题现在被重新定义为：“为什么我的自定义弹出模板不触发更新方法？”
这是模板代码，它驻留在我的 html 模板中：
<script id="sectors-editor" type="text/x-kendo-template">
<h5 class="sectorH5">Set the sectors that this File Handler can edit cases for</h5>
<div id="sectors-list"><!-- This content is generated by admin-filehandler.js --></div>
</script>
更新 3
这是我的（修改后的）剑道模板：
<script id="sectors-editor" type="text/x-kendo-template">
<h5 class="sectorH5">Set the sectors that this File Handler can edit cases for</h5>
<div id="sectors-list"><!-- This content is generated by admin-filehandler.js --></div>
<ul>
<li><label><input type="checkbox" class="checkbox-inline" name="lst_user_sec_ids_1073" id="sector_id_1073" value="1073" />seventy-three</label></li>
<li><label><input type="checkbox" class="checkbox-inline" name="lst_user_sec_ids_1074" id="sector_id_1074" value="1074" />seventy-four</label></li>
<li><label><input type="checkbox" class="checkbox-inline" name="lst_user_sec_ids_1075" id="sector_id_1075" value="1075" />seventy-five</label></li>
</ul>
</script>
其中包含我动态生成的大量复选框。我有一个 JS 函数可以从数据库中获取它们，根据需要对它们进行预检查，然后将它们推送到该 div 中。
在它下面，你可以看到我在另外三个复选框中手写了。
如果我选中或取消选中任何手写复选框，则会触发更新方法！但是，如果我选中或取消选中任何 javascript 生成的复选框，则不会。
如果我检查浏览器控制台中的两种类型的复选框，它们是相同的（！）
javascript 生成的
<input data-bind="checked:lst_user_sec_ids_98" type="checkbox" class="checkbox-inline" name="lst_user_sec_ids" id="sector_id_98" value="98">
手写
<input type="checkbox" class="checkbox-inline" name="lst_user_sec_ids_1073" id="sector_id_1073" value="1073" data-bind="checked:lst_user_sec_ids_1073">
那么，为什么 javascript 生成的复选框不会触发 Update 方法？