Question

我有一个kendogrid，每行都有一个可编辑的文本框。文本框在加载时自动填充来自db的数据。

我想异步保存对文本框所做的任何更改。现在我甚至无法在输入中访问我的文本框....

代码：

@model IEnumerable<DTOFacility>
@{
    Layout = null;
}

<script>
    $(document).ready(function () {
        $('tbody > tr > td > div.col-xs-s > :text').on('propertychange input', function (e) {
            console.log('first' + $(this).val());
        });
    });

</script>

<div id="Screen">
    @using (Html.BeginForm(new { id = "GridForm" }))
    {
        <div id="SystemPreferences">
            <div class="panel panel-primary ">
                <div class="panel-heading col-xs-12 clearfix">
                    <div class="col-xs-12">
                        <h2 class="pull-left mt5">Grid</h2>

                        <hr>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panel-action-bar">
                        @(Html.Kendo().Grid<DTOFacility>()
                              .Name("Grid")
                              .Columns(columns =>
                                  {
                                      columns.Bound(e => e.Facility);
                                      columns.Bound(e => e.Number)
                                             .ClientTemplate(
                                                 @"<div class='col-xs-2'><input type='text' class='form-control' id='codebox' value='#= value #' maxlength='3'/></div> "
                                          );
                                  })
                              .Pageable(pager => pager.Messages(Info => Info.Empty("No Results Found")))
                              .HtmlAttributes(new { style = "overflow-y: hidden;" })
                              .DataSource(dataSource => dataSource
                                                            .Ajax()
                                                            .PageSize(6)
                                                            .Read(read => read.Action("Data", "MyController"))
                              )
                              )
                    </div>
                </div>
            </div>
        </div>
    }
</div>

标记：

<tbody role="rowgroup">

<tr data-uid="27c8a881-1d6b-4e0b-b897-c6b04a185cd6" role="row">
<td role="gridcell">Facility  1</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="BGG" maxlength="3"></div>
</td></tr>

<tr class="k-alt" data-uid="5ed6cee8-9365-42db-b711-f2aaa2c69adf" role="row">
<td role="gridcell">Facility 2</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="ABC" maxlength="3"></div> 
</td></tr>

<tr data-uid="da8ba253-0fc0-4dc7-a110-7b4bda6b8a35" role="row">
<td role="gridcell">Facility 3</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="DEF" maxlength="3"></div>
</td></tr>

<tr class="k-alt" data-uid="36d2e72f-b3cb-4dd6-8fd3-f62f3a5a26e7" role="row">
<td role="gridcell">Facility 4</td>
<td role="gridcell"><div class="col-xs-2"><input type="text" class="form-control" id="codebox" value="GHI" maxlength="3"></div> 
</td></tr>
</tbody>

Answer 1

[在上面的评论中有些来回，有些事情＆＃34;回答＆＃34; -worthy可能正在出现...]

拉动数据并插入网格。如果它在加载数据之前触发了jquery，我该如何解决？我已经在视图的底部有了jquery。

其中似乎有瑕疵。问题中的jQuery代码在文档加载时执行，但是在文档加载后很快就会出现，Kendo网格使其AJAX请求实际获取数据并填充网格。

所以我看到两个可能的选择......

也许Kendo在异步操作完成后可以调用一些事件或回调？我不太了解该产品，但我怀疑该产品已经足够成熟，可以有类似的产品。

作为替代方案，您可以使用具有更高级别DOM元素的.on()来捕获动态创建的元素的事件。这样的事情可能有用：

$(document).on('propertychange input', 'tbody > tr > td > div.col-xs-2 > :text', function (e) { // ... });

请注意，处理程序附加到document本身，当文档加载时，它确实存在。（从技术上讲，它可以附加到目标元素和顶层之间层次结构中的任何非变化元素。）它只是根据选择器过滤事件。

更新db的异步调用

1 个答案: