Javascript 剑道网格-自定义编辑器，更新不触发，行删除
我有一个本地加载数据源的网格（不使用传输）。我能够创建一个自定义编辑器，当用户单击“编辑”按钮时，它会将复选框添加到行中。无法使用默认编辑器，因为我必须对每个字段进行检查，以查看用户是否有权更改字段 点击“编辑”按钮做我所期望的，它会在应该做的地方显示复选框。但是，在更改数据并单击“更新”按钮后，该行将删除。或者，在“编辑”模式下，用户单击另一行中的另一个“编辑”按钮时，原始行将删除空数据或控制台错误 更新事件似乎也不会触发，所以我可以手动处理更新数据源Javascript 剑道网格-自定义编辑器，更新不触发，行删除,javascript,jquery,kendo-ui,kendo-grid,Javascript,Jquery,Kendo Ui,Kendo Grid,我有一个本地加载数据源的网格（不使用传输）。我能够创建一个自定义编辑器，当用户单击“编辑”按钮时，它会将复选框添加到行中。无法使用默认编辑器，因为我必须对每个字段进行检查，以查看用户是否有权更改字段 点击“编辑”按钮做我所期望的，它会在应该做的地方显示复选框。但是，在更改数据并单击“更新”按钮后，该行将删除。或者，在“编辑”模式下，用户单击另一行中的另一个“编辑”按钮时，原始行将删除空数据或控制台错误 更新事件似乎也不会触发，所以我可以手动处理更新数据源 dataSource = new ken
dataSource = new kendo.data.DataSource({
data: result,
change: function(e){
console.log('a change happened');
console.log(e);
},
schema: {
model: {
id: "uid",
fields: {
lastName: {editable:false},
firstName: {editable:false},
email: {editable:false},
accountNum: {editable:false},
email: {editable:false},
status: {editable:true},
RQ:{editable:true, type:"boolean"},
RR:{editable:true, type:"boolean"},
ER:{editable:true, type:"boolean"},
}
}
},
batch: true,
pageSize: 50
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "inline",
pageable: {
refresh: false,
pageSize: 50,
pageSizes: [
50,
100,
200
]
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with"
},
}
},
reorderable: true,
resizable: true,
columns: columnsettings,
edit: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
console.log('an edit happened');
console.log(e);
//e.preventDefault();
},
cancel: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
$('#grid').data('kendoGrid').dataSource.read();
},
update: function(e){
console.log('an update happened');
console.log(e);
},
change: function(e){
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function(e){
console.log('a save is about to occurr');
console.log(e);
},
// get grid state to save to DB
dataBound: function(e){
var grid = this;
var dataSource = this.dataSource;
var state = kendo.stringify({
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter()
});
}
});
function customInlineEditor(container, options){
var currentField = options.field;
var inputField;
if(options.model[currentField] === true){
inputField = $('<input type="checkbox" data-value-field="'+currentField+'" name="'+currentField+'" checked>');
}else if(options.model[currentField] === false){
inputField = $('<input type="checkbox" name="'+currentField+'">');
}else{
//inputField = "Locked";
}
container.append(inputField);
}
dataSource=new kendo.data.dataSource({
数据：结果，
更改：功能（e）{
log（“发生了更改”）；
控制台日志（e）；
},
模式：{
型号：{
id:“uid”，
字段：{
lastName:{可编辑：false}，
名字：{可编辑：false}，
电子邮件：{可编辑：false}，
accountNum:{可编辑：false}，
电子邮件：{可编辑：false}，
状态：{可编辑：true}，
RQ:{可编辑：true，键入：“boolean”}，
RR:{editable:true，键入：“boolean”}，
ER:{editable:true，键入：“boolean”}，
}
}
},
批次：对，
页面大小：50
});
$（“#网格”）.kendoGrid({
数据源：数据源，
可编辑：“内联”，
可分页：{
刷新：false，
页面大小：50，
页面大小：[
50,
100,
200
]
},
可过滤：{
额外：错，
操作员：{
字符串：{
包含：“包含”，
开始：“从开始”
},
}
},
可重定额：对，
可调整大小：正确，
列：列设置，
编辑：功能（e）{
//$（'#grid'）.data（'kendoGrid'）.dataSource.read（）；
log（“发生了编辑”）；
控制台日志（e）；
//e、 预防默认值（）；
},
取消：功能（e）{
//$（'#grid'）.data（'kendoGrid'）.dataSource.read（）；
//$（'#grid'）.data（'kendoGrid'）.dataSource.sync（）；
log（“取消发生”）；
控制台日志（e）；
//e、 预防默认值（）；
$（'#grid'）.data（'kendoGrid'）.dataSource.read（）；
},
更新：职能（e）{
log（“发生了更新”）；
控制台日志（e）；
},
更改：功能（e）{
log（'发生的更改不是datasource one'）；
控制台日志（e）；
},
保存更改：函数（e）{
log（“保存即将发生”）；
控制台日志（e）；
},
//获取要保存到DB的网格状态
数据绑定：函数（e）{
var grid=此；
var dataSource=this.dataSource；
var state=kendo.stringify({
page:dataSource.page（），
pageSize:dataSource.pageSize（），
sort:dataSource.sort（），
组：dataSource.group（），
筛选器：dataSource.filter（）
});
}
});
函数customInlineEditor（容器、选项）{
var currentField=options.field；
var输入域；
if（options.model[currentField]==true）{
inputField=$（''）；
}else if（options.model[currentField]==false）{
inputField=$（''）；
}否则{
//inputField=“已锁定”；
}
container.append（inputField）；
}
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
是一个应该可以正常工作的示例。没有定义传输的剑道网格旨在“显示”数据，而不是编辑数据。对于诸如“save”、“update”、“edit”之类的事件，您可以不使用事件处理程序，而是将传输操作声明为函数
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
这是一个很好的例子。虽然这在游戏后期才出现，但我认为看到完整的数据源对其他人会有好处
dataSource = new kendo.data.DataSource({
data: result,
change: function(e){
console.log('a change happened');
console.log(e);
},
schema: {
model: {
id: "uid",
fields: {
lastName: {editable:false},
firstName: {editable:false},
email: {editable:false},
accountNum: {editable:false},
email: {editable:false},
status: {editable:true},
RQ:{editable:true, type:"boolean"},
RR:{editable:true, type:"boolean"},
ER:{editable:true, type:"boolean"},
}
}
},
batch: true,
pageSize: 50
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "inline",
pageable: {
refresh: false,
pageSize: 50,
pageSizes: [
50,
100,
200
]
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with"
},
}
},
reorderable: true,
resizable: true,
columns: columnsettings,
edit: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
console.log('an edit happened');
console.log(e);
//e.preventDefault();
},
cancel: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
$('#grid').data('kendoGrid').dataSource.read();
},
update: function(e){
console.log('an update happened');
console.log(e);
},
change: function(e){
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function(e){
console.log('a save is about to occurr');
console.log(e);
},
// get grid state to save to DB
dataBound: function(e){
var grid = this;
var dataSource = this.dataSource;
var state = kendo.stringify({
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter()
});
}
});
function customInlineEditor(container, options){
var currentField = options.field;
var inputField;
if(options.model[currentField] === true){
inputField = $('<input type="checkbox" data-value-field="'+currentField+'" name="'+currentField+'" checked>');
}else if(options.model[currentField] === false){
inputField = $('<input type="checkbox" name="'+currentField+'">');
}else{
//inputField = "Locked";
}
container.append(inputField);
}
return new kendo.data.DataSource({
type: "odata",
transport: {
read:
function (options) {
var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");
dataFactory.getList(odataParams)
.success(function (result) {
options.success(result);
})
.error(function (error) {
console.log("data error");
});
//$http({
// url: crudServiceBaseUrl,
// method: 'GET',
// params: odataParams
//})
//.success(function (result) {
// options.success(result);
//});
},
//{
// url: crudServiceBaseUrl,
// dataType: "json"
//},
// {function (options) {
// //var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read"); // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
// (new abstractFactory2().query({ odataUrl: crudServiceBaseUrl })).$getAll()
// .then(function (data) {
// return options.success(data);
// });
//var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read"); // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
//contentTypeFactory.getList()
// .success(function (data) {
// return options.success(data);
// })
// .error(function (error) {
// console.log(error);
// });
//},
update:
function (options) {
//var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "update");
var data = options.data;
dataFactory.update(data.ContentTypeId, data)
.success(function (result) {
// call standard error message function
customFunctions.showConfirmation();
options.success(result);
})
.error(function (error) {
customFunctions.showError("Update Failed"); // use default error message
console.log("data error");
});
//{ // PUT
//url: function (data) {
// console.log(data);
// dataType: "json"
// return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
//},
//error: function (e) {
// console.log("error: " + e);
//}
},
create:
function (options) {
var data = options.data;
data.ContentTypeId = "0"; // required for valid field data
dataFactory.insert(data)
.success(function (result) {
options.success(result);
})
.error(function (error) {
customFunctions.showError("Create Failed"); // use default error message
});
//{ // POST
//data: function (data) {
// // reformat the data to match the DTO
// data.ContentTypeId = "0";
// data.NumberOfContentTypes = "0";
// //data.msrepl_tran_version = "00000000-0000-0000-0000-000000000000";
// return data;
//},
//url: function (data) {
// console.log(data);
// return crudServiceBaseUrl;
//},
//error: function (e) {
// console.log("create error: " + e);
//},
//dataType: "json",
},
destroy:
function (options) {
var data = options.data;
dataFactory.remove(data.ContentTypeId)
.success(function (result) {
options.success(result);
})
.error(function (error) {
console.log("data error");
});
//{
//url: function (data) {
// dataType: "json";
// return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
//},
//success: function (e) {
// console.log("success");
//},
//error: function (e) {
// console.log(e);
//}
},
parameterMap: function (options, type) {
// this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
if (operation !== "read" && options.models) {
return JSON.stringify({ models: options });
}
//var parameterMap = kendo.data.transports.odata.parameterMap(options);
//delete parameterMap.$inlinecount; // remove inlinecount parameter
//delete parameterMap.$format; // remove format parameter
//return parameterMap;
},
},
batch: false,
pageSize: 10,
serverPaging: true,
change: function (e) {
console.log("change: " + e.action);
// do something with e
},
schema: {
data: function (data) {
//console.log(data)
return data.value;
},
total: function (data) {
console.log("count: " + data["odata.count"]);
return data["odata.count"];
},
model: {
id: "ContentTypeId",
fields: {
ContentTypeId: { editable: false, nullable: true },
//UserId: {editable: false, nullable: false },
Description: { type: "string", validation: { required: true } },
//msrepl_tran_version: { type: "string", validation: { required: true } }
}
}
},
error: function (e) {
//var response = JSON.parse(e.responseText);
var response = e.status;
console.log(response);
}
}) // dataSource
odataParamsparameterMap:console.log（）希望这是有益的。虽然这是游戏的后期，但我认为看到整个数据源会对其他人有利
dataSource = new kendo.data.DataSource({
data: result,
change: function(e){
console.log('a change happened');
console.log(e);
},
schema: {
model: {
id: "uid",
fields: {
lastName: {editable:false},
firstName: {editable:false},
email: {editable:false},
accountNum: {editable:false},
email: {editable:false},
status: {editable:true},
RQ:{editable:true, type:"boolean"},
RR:{editable:true, type:"boolean"},
ER:{editable:true, type:"boolean"},
}
}
},
batch: true,
pageSize: 50
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "inline",
pageable: {
refresh: false,
pageSize: 50,
pageSizes: [
50,
100,
200
]
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with"
},
}
},
reorderable: true,
resizable: true,
columns: columnsettings,
edit: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
console.log('an edit happened');
console.log(e);
//e.preventDefault();
},
cancel: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
$('#grid').data('kendoGrid').dataSource.read();
},
update: function(e){
console.log('an update happened');
console.log(e);
},
change: function(e){
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function(e){
console.log('a save is about to occurr');
console.log(e);
},
// get grid state to save to DB
dataBound: function(e){
var grid = this;
var dataSource = this.dataSource;
var state = kendo.stringify({
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter()
});
}
});
function customInlineEditor(container, options){
var currentField = options.field;
var inputField;
if(options.model[currentField] === true){
inputField = $('<input type="checkbox" data-value-field="'+currentField+'" name="'+currentField+'" checked>');
}else if(options.model[currentField] === false){
inputField = $('<input type="checkbox" name="'+currentField+'">');
}else{
//inputField = "Locked";
}
container.append(inputField);
}
return new kendo.data.DataSource({
type: "odata",
transport: {
read:
function (options) {
var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");
dataFactory.getList(odataParams)
.success(function (result) {
options.success(result);
})
.error(function (error) {
console.log("data error");
});
//$http({
// url: crudServiceBaseUrl,
// method: 'GET',
// params: odataParams
//})
//.success(function (result) {
// options.success(result);
//});
},
//{
// url: crudServiceBaseUrl,
// dataType: "json"
//},
// {function (options) {
// //var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read"); // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
// (new abstractFactory2().query({ odataUrl: crudServiceBaseUrl })).$getAll()
// .then(function (data) {
// return options.success(data);
// });
//var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read"); // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
//contentTypeFactory.getList()
// .success(function (data) {
// return options.success(data);
// })
// .error(function (error) {
// console.log(error);
// });
//},
update:
function (options) {
//var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "update");
var data = options.data;
dataFactory.update(data.ContentTypeId, data)
.success(function (result) {
// call standard error message function
customFunctions.showConfirmation();
options.success(result);
})
.error(function (error) {
customFunctions.showError("Update Failed"); // use default error message
console.log("data error");
});
//{ // PUT
//url: function (data) {
// console.log(data);
// dataType: "json"
// return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
//},
//error: function (e) {
// console.log("error: " + e);
//}
},
create:
function (options) {
var data = options.data;
data.ContentTypeId = "0"; // required for valid field data
dataFactory.insert(data)
.success(function (result) {
options.success(result);
})
.error(function (error) {
customFunctions.showError("Create Failed"); // use default error message
});
//{ // POST
//data: function (data) {
// // reformat the data to match the DTO
// data.ContentTypeId = "0";
// data.NumberOfContentTypes = "0";
// //data.msrepl_tran_version = "00000000-0000-0000-0000-000000000000";
// return data;
//},
//url: function (data) {
// console.log(data);
// return crudServiceBaseUrl;
//},
//error: function (e) {
// console.log("create error: " + e);
//},
//dataType: "json",
},
destroy:
function (options) {
var data = options.data;
dataFactory.remove(data.ContentTypeId)
.success(function (result) {
options.success(result);
})
.error(function (error) {
console.log("data error");
});
//{
//url: function (data) {
// dataType: "json";
// return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
//},
//success: function (e) {
// console.log("success");
//},
//error: function (e) {
// console.log(e);
//}
},
parameterMap: function (options, type) {
// this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
if (operation !== "read" && options.models) {
return JSON.stringify({ models: options });
}
//var parameterMap = kendo.data.transports.odata.parameterMap(options);
//delete parameterMap.$inlinecount; // remove inlinecount parameter
//delete parameterMap.$format; // remove format parameter
//return parameterMap;
},
},
batch: false,
pageSize: 10,
serverPaging: true,
change: function (e) {
console.log("change: " + e.action);
// do something with e
},
schema: {
data: function (data) {
//console.log(data)
return data.value;
},
total: function (data) {
console.log("count: " + data["odata.count"]);
return data["odata.count"];
},
model: {
id: "ContentTypeId",
fields: {
ContentTypeId: { editable: false, nullable: true },
//UserId: {editable: false, nullable: false },
Description: { type: "string", validation: { required: true } },
//msrepl_tran_version: { type: "string", validation: { required: true } }
}
}
},
error: function (e) {
//var response = JSON.parse(e.responseText);
var response = e.status;
console.log(response);
}
}) // dataSource
odataParamsparameterMap:console.log（）希望这是有益的。这允许我编辑一条记录，并将更改保存到屏幕上。仍然存在一个奇怪的问题，即当一行中有一行时删除一行