javascript - 如何在剑道中的单击事件中获取包含复选框的行

Question

我有一个剑道网格，它包含两种类型的行:一种是 css 类 k-master-row，它在网格最初加载时出现，另一种是属于 css 类 k-detail-row k-alt，它在单击下拉菜单时出现，本质上充当每个主行的详细信息。每个详细信息行都是一个网格，它本身有包含两个复选框的行:

<td class="" role="gridcell"><input id="FirstRun" name="FirstRun" class="chkbx" type="checkbox" checked=""></td>
<td class="" role="gridcell"><input id="SecondRun" name="SecondRun" type="checkbox" checked="" class="chkbx"></td>

现在，为了获取每个复选框的当前值，单击每个复选框时都会触发一些事件。

$("#sectionGrid .k-grid-content").on("change", 'input.chkbx[name="FirstRun"]', function (e) {
})

$("#sectionGrid .k-grid-content").on("change", 'input.chkbx[name="SecondRun"]', function (e) {
})

这两个事件似乎都在触发，但我不确定如何设置与每个嵌套表格行关联的模型的值。通过查看代码示例，我尝试了这样的事情:

var checked = $(this).is(':checked');
var grid = $(<selector for each nested grid>).data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('#FirstRun', checked);

问题是我不确定如何在获取复选框中的行之前首先获取每个复选框所在的嵌套网格被嵌入。我怎样才能真正得到复选框被嵌入的行，以便可以更新模型字段？

下面是一段 html(为简洁起见，删除了一些列):

 <tbody>
    <tr class="k-master-row" data-uid="c5aa3ba6-ecd6-47f3-aeb5-7e5c1111028e" role="row">
        <td class="k-hierarchy-cell" aria-expanded="false"><a class="k-icon k-i-expand" href="#" aria-label="Expand" tabindex="-1"></a></td>
        <td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="01d0ab93-c661-439b-abee-01f9ce34b1b6" aria-label="Select row" aria-checked="false" type="checkbox"><label for="01d0ab93-c661-439b-abee-01f9ce34b1b6" class="k-checkbox-label k-no-text">​</label></td>
        <td style="display:none" class="" role="gridcell">15</td>
        <td style="display:none" class="" role="gridcell">4</td>
        <td class="" role="gridcell">3. Portfolio Characteristics and Investment Results</td>
        <td style="display:none" class="" role="gridcell"></td>
        <td class="" role="gridcell"><input id="TOC_ckbx" name="TOC_ckbx" type="checkbox" value="15" checked="checked" class="chkbx"></td>
        <td style="display:none" class="" role="gridcell">01/01/1900</td>
        <td style="display:none" class="" role="gridcell"></td>
        <td class="" role="gridcell"><span class="sortSpan"> 3 </span></td>
        <td class="" role="gridcell"></td>
        <td class="" role="gridcell"></td>
        <td class="" role="gridcell"></td>
        <td class="" role="gridcell"></td>
     </tr>


    <tr class="k-detail-row k-alt">
        <td class="k-hierarchy-cell"></td>
        <td class="k-detail-cell" colspan="8">
        <div class="k-widget k-grid detail-grid k-display-block k-editable" id="grid_14" data-role="grid" style="height: 379px;">
            <div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-mode=insert"><span class="k-icon k-i-add"></span>Add Page</a><a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)"><span class="k-icon k-i-check"></span>Save Pages</a><a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)"><span class="k-icon k-i-cancel"></span>Cancel changes</a></div>
            <div class="k-grid-header" style="padding-right: 17px;">
                <div class="k-grid-header-wrap k-auto-scrollable">
                    <table role="grid">
                    <colgroup>
                        <col style="width:60px">
                        <col style="width:225px">
                        <col style="width:300px">
                        <col style="width:120px">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col style="width:110px">
                        <col style="width:110px">
                    </colgroup>
                    <thead role="rowgroup">
                        <tr role="row">
                            <th class="k-header" scope="col" data-index="0"><span class="k-link">Delete</span></th>
                            <th class="k-header" data-field="SectionPageID" data-index="1" data-title="Section Page ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=SectionPageID-asc">Section Page ID</a></th>
                            <th class="k-header" data-field="SectionID" data-index="2" data-title="Section ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=SectionID-asc">Section ID</a></th>
                            <th class="k-header" data-field="PageID" data-index="3" data-title="Page ID" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageID-asc">Page ID</a></th>
                            <th class="k-header" data-field="PageCD" data-index="4" data-title="Page" scope="col" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageCD-asc">Page</a></th>
                            <th class="k-header" data-field="PageTitle" data-index="5" data-title="Page Title" scope="col" style="display:none" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageTitle-asc">Page Title</a></th>
                            <th class="k-header" data-field="PageTitleOverride" data-index="6" data-title="Page Title Override" scope="col" data-role="columnsorter"><a class="k-link" href="/Document/SectionPage?sectionID=%23%3DSectionID%23&amp;documentID=4&amp;_=1544475674808&amp;grid_%23%3DSectionID%23-sort=PageTitleOverride-asc">Page Title Override</a></th>
                        </tr>
                    </thead>
                    </table>
                </div>
            </div>
            <div class="k-grid-content" style="height: 307px;">
                <table role="grid" data-role="sortable">

                    <tbody role="rowgroup">
                    <tr data-uid="34d19927-c356-4d6d-9e00-5b470fe369eb" role="row">
                        <td role="gridcell"><input class="k-checkbox" data-role="checkbox" id="0b1e4591-88c0-4796-aa62-1c9482005be1" aria-label="Select row" aria-checked="false" type="checkbox"><label for="0b1e4591-88c0-4796-aa62-1c9482005be1" class="k-checkbox-label k-no-text">​</label></td>
                        <td class="" role="gridcell"><input id="FirstRun" name="FirstRun" class="chkbx" type="checkbox" checked=""></td>
                        <td class="" role="gridcell"><input id="SecondRun" name="SecondRun" type="checkbox" checked="" class="chkbx"></td>
                    </tr>

                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script>
            kendo.syncReady(function(){jQuery("#grid_14").kendoGrid({"dataBound":detailGrid_onDataBound,"saveChanges":detailGrid_onSaveChanges,"edit":detailGrid_onEdit,"columns":[{"width":"60px","selectable":true},{"title":"Section Page ID","headerAttributes":{"data-field":"SectionPageID","data-title":"Section Page ID"},"hidden":true,"field":"SectionPageID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SectionPageID must be a number.\" id=\"SectionPageID\" name=\"SectionPageID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SectionPageID\" data-valmsg-replace=\"true\"></span>"},{"title":"Section ID","headerAttributes":{"data-field":"SectionID","data-title":"Section ID"},"hidden":true,"field":"SectionID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SectionID must be a number.\" id=\"SectionID\" name=\"SectionID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SectionID\" data-valmsg-replace=\"true\"></span>"},{"title":"Page ID","headerAttributes":{"data-field":"PageID","data-title":"Page ID"},"hidden":true,"field":"PageID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field PageID must be a number.\" id=\"PageID\" name=\"PageID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"PageID\" data-valmsg-replace=\"true\"></span>"},{"title":"Page","headerAttributes":{"data-field":"PageCD","data-title":"Page"},"width":"225px","field":"PageCD","encoded":true,"editor":"<input id=\"PageCD\" name=\"PageCD\" type=\"text\" /><script>  kendo.syncReady(function(){jQuery(\"#PageCD\").kendoDropDownList({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/Document/GetDropDownListItems?parentKey=Page_CD\u0026fieldText=Lookup\u0026fieldValue=LookupValue\u0026isSP=False\u0026includeValue=%20\"},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}},\"dataTextField\":\"Text\",\"dataValueField\":\"Text\"});});<\/script><span class=\"field-validation-valid\" data-valmsg-for=\"PageCD\" data-valmsg-replace=\"true\"></span>"},{"title":"Page Title","headerAttributes":{"data-field":"PageTitle","data-title":"Page Title"},"hidden":true,"field":"PageTitle","encoded":true},{"title":"Page Title Override","headerAttributes":{"data-field":"PageTitleOverride","data-title":"Page Title Override"},"width":"300px","field":"PageTitleOverride","encoded":true,"editor":"<input class=\"text-box single-line\" id=\"PageTitleOverride\" name=\"PageTitleOverride\" type=\"text\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"PageTitleOverride\" data-valmsg-replace=\"true\"></span>"},{"title":"Account ID","headerAttributes":{"data-field":"AccountID","data-title":"Account ID"},"hidden":true,"field":"AccountID","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field AccountID must be a number.\" id=\"AccountID\" name=\"AccountID\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"AccountID\" data-valmsg-replace=\"true\"></span>"},{"title":"Account","headerAttributes":{"data-field":"AccountCD","data-title":"Account"},"width":"120px","field":"AccountCD","encoded":true,"editor":"<input id=\"AccountCD\" name=\"AccountCD\" type=\"text\" /><script> kendo.syncReady(function(){jQuery(\"#AccountCD\").kendoAutoComplete({\"dataSource\":{\"transport\":{\"read\":{\"url\":\"/Document/GetAutoCompleteItems\",\"data\":txtFilterValue_onAdditionalData},\"prefix\":\"\"},\"schema\":{\"errors\":\"Errors\"}}});});<\/script><span class=\"field-validation-valid\" data-valmsg-for=\"AccountCD\" data-valmsg-replace=\"true\"></span>"},{"title":"Effective Date","headerAttributes":{"data-field":"EffectiveDate","data-title":"Effective Date"},"hidden":true,"width":"60px","field":"EffectiveDate","format":"{0:MM/dd/yyyy}","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-date=\"The field EffectiveDate must be a date.\" id=\"EffectiveDate\" name=\"EffectiveDate\" type=\"datetime\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"EffectiveDate\" data-valmsg-replace=\"true\"></span>"},{"title":"End Date","headerAttributes":{"data-field":"EndDate","data-title":"End Date"},"hidden":true,"width":"60px","field":"EndDate","format":"{0:MM/dd/yyyy}","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-date=\"The field EndDate must be a date.\" id=\"EndDate\" name=\"EndDate\" type=\"datetime\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"EndDate\" data-valmsg-replace=\"true\"></span>"},{"title":"Sort Order","headerAttributes":{"data-field":"SPSortOrder","data-title":"Sort Order"},"template":"<span class='spSortSpan'>#if(SPSortOrder != null) {# #=SPSortOrder# #} else {# #=0# #}#</span>","field":"SPSortOrder","encoded":true,"editor":"<input class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field SPSortOrder must be a number.\" id=\"SPSortOrder\" name=\"SPSortOrder\" type=\"number\" value=\"\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SPSortOrder\" data-valmsg-replace=\"true\"></span>"},{"title":"Added By","headerAttributes":{"data-field":"AddedBy","data-title":"Added By"},"field":"AddedBy","encoded":true},{"title":"Added On","headerAttributes":{"data-field":"AddedOn","data-title":"Added On"},"field":"AddedOn","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"Updated By","headerAttributes":{"data-field":"UpdatedBy","data-title":"Updated By"},"field":"UpdatedBy","encoded":true},{"title":"Updated On","headerAttributes":{"data-field":"UpdatedOn","data-title":"Updated On"},"field":"UpdatedOn","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"First Run","headerAttributes":{"data-field":"FirstRun","data-title":"First Run"},"width":"110px","template":"<input id='FirstRun' name='FirstRun' class='chkbx'  type='checkbox'  #= FirstRun ? checked='checked' : '' #/>","field":"FirstRun","encoded":true,"editor":"<input class=\"check-box\" data-val=\"true\" data-val-required=\"The FirstRun field is required.\" id=\"FirstRun\" name=\"FirstRun\" type=\"checkbox\" value=\"true\" /><input name=\"FirstRun\" type=\"hidden\" value=\"false\" /><span class=\"field-validation-valid\" data-valmsg-for=\"FirstRun\" data-valmsg-replace=\"true\"></span>"},{"title":"Second Run","headerAttributes":{"data-field":"SecondRun","data-title":"Second Run"},"width":"110px","template":"<input id='SecondRun' name='SecondRun' type='checkbox' #= SecondRun ? checked='checked' : '' # class='chkbx'/>","field":"SecondRun","encoded":true,"editor":"<input class=\"check-box\" data-val=\"true\" data-val-required=\"The SecondRun field is required.\" id=\"SecondRun\" name=\"SecondRun\" type=\"checkbox\" value=\"true\" /><input name=\"SecondRun\" type=\"hidden\" value=\"false\" /><span class=\"field-validation-valid\" data-valmsg-for=\"SecondRun\" data-valmsg-replace=\"true\"></span>"}],"sortable":true,"scrollable":{"height":"200px"},"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"incell","template":null,"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add Page"},{"name":null,"buttonType":"ImageAndText"}]},"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Document/SectionPage?sectionID=14"},"prefix":"","update":{"url":"/Document/SectionPage_Update"},"create":{"url":"/Document/SectionPage_Create"},"destroy":{"url":"/Document/SectionPage_Delete"}},"error":detailGridDS_onError,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"SectionPageID","fields":{"SectionPageID":{"type":"number","defaultValue":null},"SectionID":{"type":"number","defaultValue":null},"PageID":{"type":"number","defaultValue":null},"PageCD":{"type":"string"},"PageTitle":{"editable":false,"type":"string"},"PageTitleOverride":{"type":"string"},"AccountID":{"type":"number","defaultValue":null},"AccountCD":{"type":"string"},"EffectiveDate":{"type":"date","defaultValue":null},"EndDate":{"type":"date","defaultValue":null},"SPSortOrder":{"type":"number","defaultValue":null},"AddedBy":{"editable":false,"type":"string"},"AddedOn":{"editable":false,"type":"date","defaultValue":null},"UpdatedBy":{"editable":false,"type":"string"},"UpdatedOn":{"editable":false,"type":"date","defaultValue":null},"FirstRun":{"type":"boolean"},"SecondRun":{"type":"boolean"}}}}}});});
        </script>
        </td>
    </tr>
    </tbody>           

Answer 1

这很简单:使用与检索 tr 相同的逻辑:

$(this).closest(".k-grid")

这将为您提供网格的元素，然后您只需从中获取小部件引用，如您所知。

Demo