我想将选定行的值与文本框绑定(bind)
document.onreadystatechange = function () {
var selectedRow = null;
var viewModel = kendo.observable({
Items: [],
onUpdateItems: function (data) {
alert('updating items');
document.getElementById("id").value = data.models[0].Id,
document.getElementById("ic").value = data.models[0].CurrentCurrencyCode,
document.getElementById("isn").value = data.models[0].ShortName,
document.getElementById("ifn").value = data.models[0].FullName,
document.getElementById("icp").value = data.models[0].ContactPerson,
document.getElementById("iadd").value = data.models[0].Address1,
document.getElementById("icc").value = data.models[0].CompanyCity,
document.getElementById("ics").value = data.models[0].CompanyState,
document.getElementById("icco").value = data.models[0].CompanyCountry,
document.getElementById("izpc").value = data.models[0].ZipPostCode,
document.getElementById("ita").value = data.models[0].TelArea
},
products: new kendo.data.DataSource({
transport: {
read: {
type: "GET",
url: "/api/Companies/GetAllCompanies2",
dataType: "json",
async: false
},
create: {
type: "PUT",
url: "/api/Companies/UpdateDefCompny",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false
},
update: {
url: "/api/Companies/SaveDefCompny",
async: false,
contentType: "application/json",
dataType: "json",
type: "POST"
},
destroy: {
url: "/api/Companies/Delete", // here you need correct api url
dataType: "json"
},
parameterMap: function (data, operation) {
if (operation !== "read" && data) {
if (operation == "update") {
// here i call the function change
viewModel.Items.trigger("change",data);
}
else {
return JSON.stringify(data.models[0]);
}
}
}
},
serverPaging: true,
serverFiltering: true,
pageSize: 10,
schema: {
//data:"Data",
total: "Count",
model: {
id: "Id",
fields: {
Id: { type: "int" },
CurrentCurrencyCode: { editable: true, type: "int" },
ShortName: { editable: true, type: "string" },
FullName: { editable: true, type: "string" },
ContactPerson: { editable: true, type: "string" },
Address1: { editable: true, type: "string" },
CompanyCity: { editable: true, type: "string" },
CompanyState: { editable: true, type: "string" },
CompanyCountry: { editable: true, type: "string" },
ZipPostCode: { editable: true, type: "string" },
TelArea: { editable: true, type: "string" }
}
}
},
batch: true,
})
});
viewModel.Items.bind('change', function (e) {
//function called
viewModel.onUpdateItems(e);
});
kendo.bind(document.getElementById("example"), viewModel);
}
我在 HTML 代码命令行中使用命令编辑而不是更新，然后它就可以工作了。这是我的 HTML 代码:
<!--data-editable="inline"-->
<div id="example">
<div id="kendoGrid"
data-role="grid"
data-pageable=" true"
data-sortable=" true"
data-filterable="true"
data-toolbar="['create','save', 'cancel']"
data-columns="[
{ 'field': 'Id', 'width': 100 },
{ 'field': 'CurrentCurrencyCode', 'width': 100 },
{ 'field': 'ShortName', 'width': 100 },
{ 'field': 'FullName', 'width': 100 },
{ 'field': 'ContactPerson', 'width': 100 },
{ 'field': 'Address1', 'width': 100 },
{ 'field': 'CompanyCity', 'width': 100 },
{ 'field': 'CompanyState', 'width': 100 },
{ 'field': 'CompanyCountry', 'width': 100 },
{ 'field': 'ZipPostCode', 'width': 100 },
{ 'field': 'TelArea', 'width': 100 },
{ command: ['update'], title: 'Actions', width: '250px' },
]"
data-bind="source: products"
style=" height :500px">
</div>
</div>
<div>
<input id="id" class="k-textbox" data-bind="value: Id " />
<input id="ic" class="k-textbox" data-bind="value: CurrentCurrencyCode " type="text" />
<input id="isn" class="k-textbox" data-bind="value: ShortName " type="text" />
<input id="ifn" class="k-textbox" data-bind="value: FullName " type="text" />
<input id="icp" class="k-textbox" data-bind="value: ContactPerson " type="text" />
<input id="iadd" class="k-textbox" data-bind="value: Address1 " type="text" />
<input id="icc" class="k-textbox" data-bind="value: CompanyCity " type="text" />
<input id="ics" class="k-textbox" data-bind="value: CompanyState " type="text" />
<input id="icco" class="k-textbox" data-bind="value: CompanyCountry " type="text" />
<input id="izpc" class="k-textbox" data-bind="value: ZipPostCode " type="text" />
<input id="ita" class="k-textbox" data-bind="value: TelArea " type="text" />
<input id="Update" type="submit" value="Update" />
</div>
当我使用更新操作时触发的函数change()会转到onUpdateItems() 有两个问题:
1-我必须使用绑定(bind)方法而不是 document.getelementbyId
2-调用函数时不使用命令中的编辑，仅在html代码中使用更新 当我使用更新时它不起作用，但如果我使用
data-editable="inline"
与编辑一起工作
最佳答案
为什么不添加 data-bind="change: onChange"和 data-selectable="true"
然后在 onChange 函数上你可以这样做
function (e) {
selectedRow = this.select();
var item = this.dataItem(selectedRow);
kendo.bind($("#textbox-wrapper"), item);
}
不要忘记将 id 添加到包装文本框的 div 并替换此代码上的绑定(bind) kendo.bind($("#textbox-wrapper"), item);
从您想要将选定行的值与文本框绑定(bind)的问题来看，我认为您的问题类似于 this他想将所选行绑定(bind)到文本框、日期选择器或复选框。除了这个问题之外，它不使用 mvvm。我也已经提供了 jsfiddle但这不是 mvvm
编辑我已经创建了 mvvm，这里是 jsfiddle
关于javascript - 如何将剑道网格的选定行值与文本框绑定(bind)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30501221/