0

所以我使用 jquery.dataTables.js 来显示大约一千行，而一次只显示大约二十行。问题在于每一行的下拉列表加载页面大约需要 10 秒，并且在加载时显示更多记录。我考虑过在使用 ajax 加载页面后执行此操作，但不确定如何使用所有这些操作干净利落地执行此操作。有任何想法吗。

@for (int i = 0; i < Model.billVersion.Count; i++)
{<tr>
    <td>@Html.DisplayFor(model => model.billVersion[i].billNumber)@Html.HiddenFor(model => model.billVersion[i].billNumber)</td>
    <td>@Html.DisplayFor(model => model.billVersion[i].lrNumber)</td>
    <td>@Html.DisplayFor(model => model.billVersion[i].previousYear)</td>
    <td>@Html.DisplayFor(model => model.billVersion[i].committeeRec)</td>
    <td>@Html.DropDownListFor(model => model.billVersion[i].committeeID, @Model.committeDropDown, "")</td>
    <td>@Html.CheckBoxFor(model => model.billVersion[i].save_Remove)</td>
</tr>                
}
4

1 回答 1

0

Jquery UI自动完成的一个应用：

!function ($) {
    var cache = {};

    $("[data-options]").each(constructAjaxOptions);

    function constructAjaxOptions() {

        var el = $(this),
            acEl = $(el.clone(false)),
            url = el.attr('data-options'),
            initialLabel = el.attr('data-initial-label') || el.val(),
            myCache = cache[url];

        if (!myCache) {
            myCache = cache[url] = {};
        }

        el.hide();

        acEl
        .removeAttr('id').removeAttr('name')
        .val(initialLabel)
        .insertAfter(el)
        .autocomplete({
            autoFocus: true,
            minLength: 0,
            source: function (request, response) {
                var term = request.term;
                if (term in myCache) {
                    response(myCache[term]);
                    return;
                }
                $.getJSON(url, request, function (data, status, xhr) {
                    myCache[term] = data;
                    response(data);
                });
            },
            focus: function (event, ui) {
                // Overridden to keep the value of the field
                // from flashing in the textbox.
                return false;
            },
            select: function (event, ui) {
                acEl.val(ui.item.label);
                el.val(ui.item.value);
                return false;
            }
        });
    }
}(jQuery);

.cshtml

<input type="text" id="@Html.IdFor(model => model.billVersion[i].committeeID)" name="@Html.NameFor(model => model.billVersion[i].committeeID)" value="@Value"
data-options="@Url.Action("BillVersions", "Options")" data-initial-label="@model => model.billVersion[i].commiteeName" />

在 MVC 操作中：

var model = billVersions.Select(o => new
    {
        value = o.committeeID,
        label = o.commiteeName
    })
    .ToList();

return new JsonResult { JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = model };
于 2013-09-12T19:18:28.770 回答