代码之家 › 专栏 › 技术社区 › loremIpsum1771

如何预填充下拉字段

kendo-ui asp.net-mvc html jquery javascript

loremIpsum1771 · 技术社区 · 6 年前

我有一个剑道HTML网格,其中有可编辑的数据行。在特定行上选择“编辑”按钮时,将弹出一个模式,其中包含该行中可编辑字段的子集。模式中的每个字段都是一个下拉列表(包含从SQL查询返回的每个字段的所有可能条目),用户可以在其中从每个列表中选择一个值。

现在的问题是,每个字段都没有预先填充实际网格行中的值,而是每个字段以从sql查询返回的列表的第一个值开始。为了澄清,每个网格行包含以下HTML结构:

<tbody role="rowgroup">
<tr role="row" data-uid="6f0062a8-878a-47b9-8185-6bf71523452">
<td role="gridcell" style="display: none;">232</td>
<td role="gridcell">1000</td>
<td role="gridcell">Value 1</td>
<td role="gridcell">2000</td>
<td role="gridcell">Value 2</td>
<td role="gridcell">3000</td>
<td role="gridcell">Value 3</td>
<td role="gridcell">Value 4</td>
<td role="gridcell">4000</td>
<td role="gridcell"><a class="k-button k-button-icontext k-grid-Edit" href="#"><span class=" "></span>Edit</a><a class="k-button k-button-icontext k-grid-Remove" href="#"><span class=" "></span>Remove</a></td>
</tr>
</tbody>

模式中出现的列值是包含单词“value”的列值。单击每行中的“编辑”按钮时,将调用以下函数以获取所选行:

 function showEdit(e) {
        currentRow = this.dataItem($(e.currentTarget).closest("tr"));
        $('#editPopUp').data('kendoWindow').open().center().toFront();
    }

调用以下模式代码:

<div>
    @(Html.Kendo().Window()
        .Name("editPopUp")
        .Scrollable(false)
        .Width(500)
        .Height(300)
        .Modal(true)
        .Title("Edit Report")
        .Visible(false)
    .Content(@<text>
            <div>
                <div class="addReports">
                    <div>

                        @(Html.Kendo().DropDownList()


                          .Name("Value1Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value1"] as IEnumerable<SelectListItem>)
                        )
                        )
                    </div>
                    <div>

                        @(Html.Kendo().DropDownList()
                          .Name("Value2Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value2"] as IEnumerable<SelectListItem>)
                        )
                        )
                    </div>
                    <div>
                        @(Html.Kendo().DropDownList()
                          .Name("Value3Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value3"] as IEnumerable<SelectListItem>)
                        )
                        )

                    </div>
                    <div>

                        @(Html.Kendo().DropDownList()
                          .Name("Value4Edit")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .HtmlAttributes(new { style = "width:100%" })
                                  .BindTo(ViewData["value4"] as IEnumerable<SelectListItem>)
                        )
                    </div>
                </div>

如何将表行中的字段值传递给模态以预填充其字段?

1 回复 | 直到 6 年前

DontVoteMeDown 6 年前

打开窗口时,可以在运行时设置下拉值:

function showEdit(e) {
    currentRow = this.dataItem($(e.currentTarget).closest("tr"));

    let wnd = $('#editPopUp').data('kendoWindow');

    wnd.bind("open", function () {
        let $element = this.element,
            ddl1 = $element.find('#Value1Edit').data("kendoDropDownList"); // If the selector '#Value1Edit' doens't works, try by name attr '[name="Value1Edit"]', i'm not sure how kendo generates asp.net mvc widgets names/ids

        dd1.value(currentRow.Value1);
    });

    wnd.open().center().toFront();
}

对窗口中的所有下拉窗口小部件执行此操作。如果下拉列表太多,也可以保存一些代码并为此创建函数:

let fillDropDowns = function fillDropDowns($element, data, valuesCount) {
    for (let i = 1; i <= valuesCount; i++) {
         $element.find(`#ValueEdit${i}`).data("kendoDropDownList").value(data[`Value${i}`])
    });
}

在公开活动中这样称呼:

fillDropDowns($element, currentRow, 3);

该函数将尝试用名称填充3个下拉列表 ValueEdit1 , ValueEdit2 和 ValueEdit3 带着钥匙 Value1 , Value2 和 Value3 从 currentRow .