这是我的代码。
$(document).ready(function() {
var kendoWindow_room = $("#window_room");
kendoWindow_room.hide();
$("#roombut").on(
'click',
function()
{
home_id = $("#home_id").val();
if (home_id) {
kendoWindow_room.data("kendoWindow").open();
$('.k-window').css({'marginLeft': -$('.k-window').width() / 2});
dataSource.read();
$("#room_listview_pager .k-link:first").hide();
$("#room_listview_pager .k-link:last").hide();
$("#room_listview_pager a.k-link").each(function(index) {
$(this).addClass("pager_new_icons");
$(this).addClass("mortgage");
});
}
}
);
home_datasource = new kendo.data.DataSource({
transport: {
read: {
url: "<?php echo BASE_URL . 'user/get_edit_home_name' ?>",
dataType: "json"
}
}
});
room_datasource = new kendo.data.DataSource({
transport: {
read: {
url: "<?php echo BASE_URL . 'common/get_dropdown_entries' ?>",
dataType: "json",
data: {thisisfor: "floortype"}
}
}
});
var crudServiceBaseUrl = "<?php echo BASE_URL . 'user/room_crud_listview_' ?>",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: function() {
return crudServiceBaseUrl + "read?home_id=" + $("#home_id").val()
},
dataType: "json",
contentType: "application/json"
},
update: {
url: crudServiceBaseUrl + "update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "create",
dataType: "json",
type: "POST"
}
},
batch: true,
pageSize: 1,
schema: {
model: {
id: "id",
fields: {
rd_home_id: "rd_home_id",
homename: "homename",
nickname: "nickname",
type: "type",
wallcolor: "wallcolor",
trimcolor: "trimcolor",
floorcolor: "floorcolor",
floortype: "floortype",
windows: "windows"
}
}
}
});
$("#room_listview_pager").kendoPager({
dataSource: dataSource,
info: false,
numeric: false
});
var room_listview = $("#room_listview").kendoListView({
dataSource: dataSource,
template: kendo.template($("#room_listview_template").html()),
editTemplate: kendo.template($("#room_editview_template").html())
}).data("kendoListView");
// Add Row
$("#room_add_row").on("click", function(event) {
event.preventDefault();
room_listview.add();
});
// Delete Row
$("#room_delete_row").on("click", function(event) {
event.preventDefault();
room_listview.remove(room_listview.element.children().first());
if (dataSource.total() < 1) {
room_listview.add();
} else {
dataSource.read();
}
});
// edit row
$("#room_edit_row").on("click", function(event) {
event.preventDefault();
room_listview.edit(room_listview.element.children().first());
});
// save row
$("#room_save_row").on("click", function(event) {
event.preventDefault();
room_listview.save();
});
if (!kendoWindow_room.data("kendoWindow")) {
kendoWindow_room.kendoWindow({
width: "520px",
title: "Room Designer"
});
}
});
<div style="background-color: #FFFFFF; border: 0; max-width: 90px; float: left;" id="room_listview_pager"></div>
<span style="float: right; margin-top: 4px;">
<a id="room_add_row" class="k-add" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon7.png" alt="" height="36" width="37"></a>
<a id="room_delete_row" class="k-delete" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon8.png" alt="" height="36" width="37"></a>
<a id="room_edit_row" class="k-edit" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon9.png" alt="" height="36" width="37"></a>
<a id="room_save_row" class="k-insert" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon10.png" alt="" height="36" width="37"></a>
</span><div class="clear"></div>
This is the kendo template with id - "room_listview_template"
<div class="product-view k-widget">
<dl>
<dt>Home</dt>
<dd>#:homename#</dd>
<dt>Nickname</dt>
<dd>#:nickname#</dd>
<dt>Type</dt>
<dd>#:type#</dd>
<dt>Wall Color</dt>
<dd>#:wallcolor#</dd>
<dt>Trim Color</dt>
<dd>#:trimcolor#</dd>
<dt>Floor Color</dt>
<dd>#:floorcolor#</dd>
<dt>Floor Type</dt>
<dd>#:floortype#</dd>
<dt>Windows</dt>
<dd>#:windows#</dd>
</dl>
</div>
This is the kendo template with id - "room_editview_template"
<div class="product-view k-widget">
<dl>
<dt>Home</dt>
<dd>
<select id="home"
data-role="dropdownlist"
data-text-field="nickname"
data-value-field="id"
data-source="home_datasource"
data-bind="value:rd_home_id"
name="rd_home_id"
required="required"
validationMessage="required">
</select>
<span data-for="rd_home_id" class="k-invalid-msg"></span>
</dd>
<dt>Nickname</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:nickname" name="nickname" required="required" validationMessage="required" />
<span data-for="nickname" class="k-invalid-msg"></span>
</dd>
<dt>Type</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:type" name="type" required="required" min="1" validationMessage="required" />
<span data-for="type" class="k-invalid-msg"></span>
</dd>
<dt>Wall Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:wallcolor" name="wallcolor" required="required" validationMessage="required" />
<span data-for="wallcolor" class="k-invalid-msg"></span>
</dd>
<dt>Trim Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:trimcolor" name="trimcolor" required="required" validationMessage="required" />
<span data-for="trimcolor" class="k-invalid-msg"></span>
</dd>
<dt>Floor Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:floorcolor" name="floorcolor" required="required" validationMessage="required" />
<span data-for="floorcolor" class="k-invalid-msg"></span>
</dd>
<dt>Floor Type</dt>
<dd>
<select
data-role="dropdownlist"
data-text-field="name"
data-value-field="value"
data-source="room_datasource"
data-bind="value:floortype"
name="floortype"
required="required"
validationMessage="required">
</select>
<span data-for="floortype" class="k-invalid-msg"></span>
</dd>
<dt>Windows</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:windows" name="windows" required="required" validationMessage="required" />
<span data-for="windows" class="k-invalid-msg"></span>
</dd>
</dl>
</div>
我在 kendowindow 中有一个列表视图,其中包含创建、读取、更新和删除的选项。
它使用一个模板列出记录并使用另一个模板进行编辑。
在字段中,我有一个下拉列表,字段名称为“rd_home_id”,其数据文本字段和数据值字段不同。它将家庭名称显示为选项,每个选项都有其整数值。
插入和更新工作正常,我在服务器端得到整数值。
在阅读时,显然我想显示家庭名称 - 所以,我有字段名称“homename” - 从服务器,我传递了这个值,我可以在列表模板中看到它 - 效果很好。
剩下的唯一问题是 - 在我插入一条记录后,“homename”没有出现 - 它的 null - 所有其他值都显示出来并且是正确的。
如何在插入后立即显示值“homename”?
我知道我可以在调用 listview 的保存函数后立即调用 room_save_row 的 onclick 中数据源的读取函数 - 这将解决问题,但这样做会使验证不起作用。
有没有办法改变模板中呈现的字段的值?
谢谢
刚刚解决了问题
如果插入的记录作为来自服务器的响应(来自创建 URL)发送 - 它会被更新 - 并且该值将反映在列表模板中 - 在我没有从服务器发送任何内容之前。这就是问题所在。