剑道网格 - 选择行并显示与行相关的值
Kendo Grid - Select row and display values related to row
我正在做一个简单的项目,在剑道网格中显示事物列表。当用户单击剑道网格的一行时,我希望显示与该行相关的值。
到目前为止,网格工作正常。它变得可选,其鼠标单击事件触发 JavaScript 函数。
网格如下所示:
@(Html.Kendo().Grid<MyProject.Models.Object>()
.BindTo((IEnumerable<MyProject.Models.Object>)Model)
.Name("Object")
.Columns(columns =>
{
columns.Bound(p => p.ObjectID).Title("ID").Hidden().HtmlAttributes(new { id="ID" });
columns.Bound(p => p.DmObjectName.DmObjectNameDesc).Title("Object Name");
columns.Bound(p => p.DmObjectType.DmObjectTypeDesc).Title("Object Type");
columns.Bound(p => p.DmObjectState.DmObjectStateDesc).Title("Storage State");
})
.Pageable(pager => pager
.PageSizes(new[] { 5, 10, 20, 50, 100, 1000 }))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row)
)
.Sortable()
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resize => resize.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.ObjectID)
))
.Events(e => e.Change("Grid_OnRowSelect"))
)
以及标签和文本框:
<fieldset>
<legend accesskey="H">Object Detail</legend>
<table border="0" style="width: 95%; margin: 0 auto; border-collapse: collapse; border: 0px solid black;">
<tr>
<td class="label">
@Html.Label("Object Name:", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("ObjectName").Enable(false)
</td>
<td class="label">
@Html.Label("Max:", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Max").Enable(false)
</td>
<td class="label">
@Html.Label("Avg:", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Avg").Enable(false)
</td>
</tr>
<tr>
<td class="label">
@Html.Label("Fire", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Fire").Enable(false)
</td>
<td class="label">
@Html.Label("State", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("State").Enable(false)
</td>
</tr>
<tr>
<td class="label">
@Html.Label("Health", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Health").Enable(false)
</td>
<td class="label">
@Html.Label("Location", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Location").Enable(false)
</td>
</tr>
<tr>
<td class="label">
@Html.Label("Reactivity", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Reactivity").Enable(false)
</td>
<td class="label">
@Html.Label("Container", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Container").Enable(false)
</td>
</tr>
<tr>
<td class="label">
@Html.Label("Special", new { @class = "designschema" })
</td>
<td class="editor">
@Html.Kendo().MaskedTextBox().Name("Special").Enable(false)
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend accesskey="N">Notes</legend>
<table border="0" style="width: 95%; margin: 0 auto; border-collapse: collapse; border: 0px solid black;">
<tr>
<td class="editor">
@Html.TextArea("Notes", new { @style = "resize: vertical; width: 100%; height: 20px" })
</td>
</tr>
</table>
</fieldset>
下面是 JavaScript:
<script>
function Grid_OnRowSelect() {
var row = this.select();
var id = row.data("ID");
}
</script>
我目前还没有超出此范围的工作,因为似乎row.data("ID")
不起作用。我在调试模式下运行我的应用程序并捕获了var row
中的内容。
row
的值如下所示:
<tr class="k-state-selected" aria-selected="true">
<td id="ID" style="display:none">1</td>
<td>TEST</td>
<td>Object (Flammable)</td>
<td> </td>
<td> </td>
</tr>
因此,从行中选择的值是正确的。但是有没有一种好方法可以从<td>, <tr>
中挑选每个值?还是使用row.data("ID")
的好方法?
我还想将所选值放入剑道网格正下方的文本框中。我在想有一种方法可以选择模型,而不是 Grid 中的每个值,哪个名称MyProject.Models.Object
ID
与模型匹配的位置。
你能给我一些好的方法来解决和解决,这样我就可以走得更远吗?
你可以试试剑道网格数据项函数。在您的情况下,它将是:
var selectedItem = this.dataItem(this.select());
这是
有记录的:
使用 Grid 的 MVC 包装器时,Grid 必须绑定 Ajax 才能使 dataItem() 方法正常工作。使用服务器绑定时,数据源实例不包含序列化的数据项。
您使用的是 BindTo
,因此网格的 html 在服务器上呈现,并且它不绑定到客户端的任何数据。您可以使用 DataSource
,或者您需要手动执行所有操作。
相关文章:
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- Angular UI-GRID未在页面上显示网格
- 如何使用Kendo UI mvc扩展显示网格页脚值
- 如何在ExtJs中显示网格上的线数
- 如何使用垂直滑动选项在屏幕中间显示网格
- 在 Extjs 中需要帮助才能在面板中显示网格
- 显示网格单元格中的窗口?EXTjs
- 根据选定的单选框,在一组单选框旁边显示网格
- Angular UI在列中显示网格数组
- 如何在three.js中显示网格上的QRcode
- 在D3直方图中没有显示网格线
- Three.js GridHelper:如何隐藏/显示网格
- 引导下拉显示网格
- 第一个选项卡面板没有显示网格中的数据(ie9)
- Extjs显示网格表
- 以html显示网格
- 使用 ext js 4.1 突出显示网格中的一行
- 为什么 ExtJS 3 的 Ext.Loader 似乎缺少零件并且没有显示网格
- 如何在Extjs 4.0中鼠标悬停时突出显示网格