在 Javascript 中填充剑道 ui 网格
Posted
技术标签:
【中文标题】在 Javascript 中填充剑道 ui 网格【英文标题】：populate kendo ui grid in Javascript 【发布时间】：2013-06-18 18:53:40 【问题描述】：我遇到了剑道网格双重加载的问题，所以我使用了 .autobind(false) 并输入：
var wgrid = $("#WasteGrid").data("kendoGrid"); wgrid.dataSource.Read();
在文档准备功能中。
现在我收到控制台错误，“未捕获的类型错误：无法读取未定义的属性 'datasource'”
我的问题是如何在 javascript 中手动填充剑道网格？
（我也附上了屏幕截图）
这是我的代码（我还有一个 _Layout.cshtml，如果这还不够，我可以发布）：
@model IEnumerable<OPS.Models.LabourSchedule>
@
ViewBag.Title = "Ham";
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.DatePageType = "LabourEntry";
<script>
$(document).ready(function ()
//reads and populates the waste grid
var wgrid = $("#WasteGrid").data("kendoGrid");
wgrid.dataSource.Read();
);
//waste form update parameters
function Update_Data()
return
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
;
//waste form read parameters
function Read_Data()
return
LineName: "Ham",
CurDate: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd"),
ShiftName: @(Session["currentShift"]) + ""
;
</script>
@section footer
<div data-inline="true">
<div data-inline="true">
@if (ViewBag.curHour > 0)
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.prevHour"></a>
@for (var i = ViewBag.curHour - 7; i <= ViewBag.curHour + 7; i++)
if (ViewBag.curHour == i)
<a data-role="button" href="#" data-theme="b" data-inline="true">@i</a>
else if (@i >= 0 && @i <= 23)
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-theme="c" data-inline="true" data-time="@i">@i</a>
@if (ViewBag.curHour < 23)
<a data-role="button" href="#" data-url="@Url.Action("Ham", "LabourEntry")" onclick="buttonLoad(this)" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true" data-time="@ViewBag.nextHour">Arrow right</a>
<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="grid" data-iconpos="notext" data-theme="b">Options</a>
</div>
</div>
<div data-role="popup" id="popupWaste" class="ui-content" data-theme="d" data-overlay-theme="a" data-dismissible="false" style="width: 90%; position: relative; margin: 20px auto;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div style="width: 100%;">
<h3>Date: <label id="lblWasteFormDate"></label>
</h3>
@(Html.Kendo().Grid<OPS.Models.LineProductWasteEntry>()
.Name("WasteGrid")
.Columns(columns =>
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.BucketWeight).Hidden(true);
columns.Bound(p => p.LineCategoryId).Hidden(true);
columns.Bound(p => p.LineCategoryProduct).Hidden(true);
columns.Bound(p => p.LineProductId).Hidden(true);
columns.Bound(p => p.ShiftId).Hidden(true);
columns.Bound(p => p.SourceId).Hidden(true);
columns.Bound(p => p.UserId).Hidden(true);
columns.Bound(p => p.CategoryName);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Value);
columns.Bound(p => p.SourceName);
columns.Bound(p => p.Source);
columns.Bound(p => p.Weight);
columns.Bound(p => p.Weight2);
columns.Bound(p => p.Weight3);
)
.ToolBar(toolbar =>
toolbar.Save();
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
model.Id(p => p.Id);
model.Field(p => p.SourceName).Editable(false);
model.Field(p => p.CategoryName).Editable(false);
model.Field(p => p.ProductName).Editable(false);
model.Field(p => p.Value).Editable(false);
)
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error"))
.Read(read => read.Action("Waste_Read", "LabourEntry")
.Data("Read_Data"))
.Update(update => update.Action("Waste_Update", "LabourEntry")
.Data("Update_Data"))
)
.AutoBind(false)
)
</div>
</div>
<div data-role="popup" id="popupMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width: 270px;" data-theme="a" class="nav-search">
<li data-role="divider" data-theme="d">Choose an action</li>
<li><a data-url="@Url.Action("PullFromPrevHour", "LabourEntry")" data-hour="@ViewBag.curHour" data-line="Ham" data-shift="@Session["currentShift"]" onclick="pullfrompeviousLoad(this)">Pull From Previous Hour</a></li>
<li><a data-url="@Url.Action("ResetToSchedule", "LabourEntry")" data-hour="@ViewBag.curHour" data-line="Ham" data-shift="@Session["currentShift"]" onclick="pullfrompeviousLoad(this)">Reset To Schedule</a></li>
<li><a href="#popupWaste" data-rel="popup" data-position-to="window" data-transition="pop">Add Waste</a></li>
<li><a href="#popupDownTime" data-rel="popup" data-position-to="window" data-transition="pop">Add Downtime</a></li>
<li data-role="divider" data-theme="d">Navigation</li>
<li><a data-url="@Url.Action("MainBreak", "LabourEntry")" onclick="menuLoad(this)">Main Break</a></li>
<li><a data-url="@Url.Action("Loin", "LabourEntry")" onclick="menuLoad(this)">Loin</a></li>
<li><a data-url="@Url.Action("Shoulder", "LabourEntry")" onclick="menuLoad(this)">Shoulder</a></li>
<li><a data-url="@Url.Action("Packaging", "LabourEntry")" onclick="menuLoad(this)">Packaging</a></li>
</ul>
</div>
在将 js 移动到网格之后并出现同样的错误后，我觉得可能是脚本？这是我的 _Layout 代码...
<!DOCTYPE html>
<html lang="en">
<head>
@
if (Session["currentDate"] == null)
HttpContext.Current.Session["currentDate"] = DateTime.Today.ToString("yyyy-MM-dd");
if (Session["currentShift"] == null)
HttpContext.Current.Session["currentShift"] = "1";
<title>@ViewBag.Title</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="~/Resources/Triangle.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.silver.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.319/kendo.dataviz.silver.min.css")" rel="stylesheet" type="text/css" />
@*<script src="@Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"></script>*@
<script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"></script>
@*<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
@RenderSection("DateSessions1", false)
@RenderSection("DateSessions2", false)
<script type="text/javascript">
//prevents ipad vertical bounce scrolling
document.ontouchmove = function (event)
event.preventDefault();
function UpdateDate()
UpdateSessionDate();
UpdateSessionShift();
UpdateSessionReportType();
var DatePageType = '@(ViewBag.DatePageType)';
if (DatePageType == "Reporting")
UpdateCharts();
if (DatePageType == "LiveView")
UpdateViews($('#hoursaver').val());
UpdateLineViews($('#hoursaver').val());
UpdateOverallInfoBox($('#linesaver').val());
UpdateOverviewOfLabourChart()
if (DatePageType == "LabourEntry")
UpdateViews($('#hoursaver').val());
refreshLabourEntry();
function UpdateShift()
UpdateSessionDate();
UpdateSessionShift();
var DatePageType = '@(ViewBag.DatePageType)';
if (DatePageType == "Reporting")
UpdateCharts();
if (DatePageType == "LiveView")
UpdateViews($('#hoursaver').val());
UpdateLineViews($('#hoursaver').val());
UpdateOverallInfoBox($('#linesaver').val());
if (DatePageType == "LabourEntry")
refreshLabourEntry();
function pullfrompeviousLoad(objThis)
var url = $(objThis).data('url') + '?hour=' + $(objThis).data('hour') + '&Shift=' + $(objThis).data('shift') + '&LineName=' + $(objThis).data('line');
window.location.href = url;
function menuLoad(objThis)
var url = $(objThis).data('url');
// do something with the url client side variable, for example redirect
window.location.href = url;
function buttonLoad(objThis)
var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
// do something with the url client side variable, for example redirect
window.location.href = url;
function saveLoad(objThis)
$('#labourform').submit();
//document.forms["labourform"].submit();
//document.labourform.submit();
var url = $(objThis).data('url') + '?hour=' + $(objThis).data('time');
// do something with the url client side variable, for example redirect
window.location.href = url;
return false;
// update date session data
function UpdateSessionDate()
$.post('/SetSession/SetVariable',
key: "currentDate",
value: kendo.toString($("#datepicker").data("kendoDatePicker").value(), "yyyy-MM-dd")
);
;
// update shift session data
function UpdateSessionShift()
$.post('/SetSession/SetVariable',
key: 'currentShift',
value: $('#shift').val()
);
;
// update report type session data
function UpdateSessionReportType()
$.post('/SetSession/SetVariable',
key: "ReportType",
value: $('#ReportType').val()
);
;
function UpdateButtons(h)
var arrayToModify = [];
var i = 0, j, k, buttonsToCreate, buttonContainer, newButton;
var buttonsToCreate = [];
var now = parseInt(h);
//sets the number of buttons to create and their values
for (var j = (now - 7) ; j <= (now + 7) ; j++)
if (j >= 0 && j <= 23)
buttonsToCreate[i] = j;
i++;
buttonContainer = document.getElementById('ddShift');
for (k = 0; k < buttonsToCreate.length; k++)
if (buttonsToCreate[k] == parseInt(h) + 1)
newButton.style.cssText = 'background-color: red;';
newButton = document.createElement('input');
newButton.type = 'button';
newButton.value = buttonsToCreate[k];
newButton.id = buttonsToCreate[k];
newButton.onclick = function ()
arrayToModify[arrayToModify.length] = this.id;
$('#hoursaver').val(this.id);
UpdateViews(this.id);
UpdateLineViews(this.id);
;
buttonContainer.appendChild(newButton);
;
//Populate the shift select element dynamically
function addCombo()
var combo = document.getElementById('shift');
var option1 = document.createElement('option');
var option2 = document.createElement('option');
var option3 = document.createElement('option');
option1.text = 'Shift 1';
option1.value = '1';
combo.add(option1);
option2.text = 'Shift 2';
option2.value = '2';
combo.add(option2);
var DatePageType = '@ViewBag.DatePageType';
if (DatePageType != 'LabourEntry')
option3.text = 'All Shifts';
option3.value = 'All';
combo.add(option3);
kendo.culture("en-US");
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="index">
<div data-role="header" data-position="fixed">
<h1>@ViewBag.Title</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext" class="ui-btn-left">Menu</a>
@if (Request.IsAuthenticated)
@Html.ActionLink("My Account", "Index", "Account", routeValues: null, htmlAttributes: new data_icon = "gear" )
else
@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new data_icon = "gear" )
<div class="datepickerbtn" style="width: 212.5px;">
@(Html.Kendo().DatePicker()
.Name("datepicker")
.Events(e =>
e.Change("UpdateDate");
)
.Format("yyyy-MM-dd")
.Value((String)Session["currentDate"])
)
</div>
<div class="shiftpickerbtn" id="btnshift">
<select name="shift" id="shift" onchange="UpdateShift()"></select>
</div>
</div>
<div data-role="content">
@RenderBody()
</div>
<div data-role="footer" style="text-align: center" data-position="fixed">
@RenderSection("footer", false)
</div>
<div data-role="panel" data-position-fixed="true" data-theme="b" data-content-theme="d" id="nav-panel">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a data-url="@Url.Action("Index", "Home")" onclick="menuLoad(this)">Home</a></li>
<li><a data-url="@Url.Action("Index", "LabourEntry")" onclick="menuLoad(this)">Labour Entry</a></li>
</ul>
</div>
</div>
@RenderSection("scripts", required: false)
</body>
</html>
【问题讨论】：
【参考方案1】：将文档就绪处理程序放在 Grid 的初始化下方。 Grid 还使用在您的脚本之后执行的文档就绪功能 - 这就是引发异常的原因 - Grid 仍未初始化。
【讨论】：
我也是这么想的，并尝试在网格之后移动它，然后我通过一个按钮调用它，两个更改仍然给出相同的错误 - “未捕获的类型错误：无法读取未定义的属性‘数据源’”。我会将我的 _Layout 代码添加到这个线程，因为我觉得我的脚本可能没有正确设置。 1) 确保您没有多次加载 jQuery 库 2) wgrid.dataSource.Read(); read 不是大写字母。以上是关于在 Javascript 中填充剑道 ui 网格的主要内容，如果未能解决你的问题，请参考以下文章