javascript - 包含具有唯一 ID 的用户控件问题的分层网格

Question

我有一个嵌套的 Kendo Grid，它包含一个 TabStrip 控件，而该控件又包含多个从初始 生成的 kendoComboBox div 元素。

网格是用 Javascript 生成的:

$("#configAddGrid").kendoGrid({
        dataSource: gridConfigDataSourceAdd,
        height: 550,
        detailTemplate: kendo.template($("#templateAdd").html()),
        detailInit: detailAddInit,
        navigatable: true,
        autoBind: false,
        editable: {
            mode: "incell"
        },
        toolbar: ["create"],
        columns: columnSchemaAdd
    });

kendo-template 定义如下。 TabStrip 使用每行的 ID 字段进行唯一标识:

@(Html.Kendo().TabStrip()
        .Name("tabStripAdd_#=ID#")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .Items(items =>
        {
                items.Add().Text((string)ViewBag.ControlSetLots[0].LotNumber).Content(@<text>

                    <p>StandardComment: </p>
                    <div id='Lot1StandardCommentDropDownAdd_#=ID#' class='Lot1StandardCommentDropDownAdd'>    
                    </div> 
                    <p>Review Comment: </p>
                    <div id='Lot1ReviewCommentDropDownAdd_#=ID#' class='Lot1ReviewCommentDropDownAdd'>        
                    </div>

                   </text>
                );
            }...

我的计划是通过 detailAddInit 函数初始化每个 Kendo ComboBox，即一旦发送扩展行的请求。 ComboBox 的创建将基于 div 的唯一 ID。然而，分配给 div 的 #=ID# 在使用检查器窗口 (emptyID.png) 检查时是空的，即使它附加到 TabStrip控制。

function detailAddInit(e) {
    var closestCB = e.detailRow.find('.Lot1StandardCommentDropDownAdd');        

    createStandardCommentDropDown("#Lot1StandardCommentDropDownAdd");
    createReviewCommentDropDown("#Lot1ReviewCommentDropDownAdd");            
    kendo.bind(e.detailRow, e.data);
}

有没有一种方法可以将相同的 ID 附加到 div 的末尾以使其唯一？

此外，如果有人能想到更好的方法来实现相同的结果，请随时发表评论，因为我愿意接受建议。

Answer 1

我找到了一个解决方案来确保每个 ComboBox 都分配有一个唯一的 ID。

1) 删除了 cshtml 中分配的 ID:

@(Html.Kendo().TabStrip()
        .Name("tabStripEdit_#=ID#")
        .SelectedIndex(0)
        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
        .Items(items =>
        {                
            items.Add().Text((string)ViewBag.ControlSetLots[0].LotNumber).Content(@<text>

                <p>Standard Comment: </p>
                <div class='Lot1StandardCommentDropDownEdit'>
                </div>
                <p>Review Comment: </p>
                <div class='Lot1ReviewCommentDropDownEdit'>
                </div>

                </text>
            );
        }

2) 修改了 detailAddInit(e) 函数以使用请求嵌套 detailTemplate 的当前时间分配唯一的 div ID 网格:

function detailAddInit(e) {
    var time = new Date().getTime().toString();
    // find combo box associated with current row
    var closestSCCB = e.detailRow.find('.Lot1StandardCommentDropDownAdd');            
    // assign a unique ID to the div
    var SCID = 'Lot1StandardCommentDropDownAdd_' + time;
    closestSCCB.attr('id', SCID);
    var closestSCCB2 = e.detailRow.find('.Lot1StandardCommentDropDownAdd');            

    var closestRCCB = e.detailRow.find('.Lot1ReviewCommentDropDownAdd');
    var RCID = 'Lot1ReviewCommentDropDownAdd_' + time;
    closestRCCB.attr('id', RCID);
    var closestRCCB2 = e.detailRow.find('.Lot1ReviewCommentDropDownAdd');

    createStandardCommentDropDown(closestSCCB2[0]);
    createReviewCommentDropDown(closestRCCB2[0]);   
}

虽然这是一个非常小众的场景，但我希望这能在未来成为某人的一天!