Question

在我的网页上，我正在显示一个数据表，我想让用户能够使用下拉列表对该数据进行排序（例如，按FirstName，按姓氏，按状态等...）。

我想使用Ajax将排序后的数据加载到数据表中，而无需刷新页面。我还想以一种不引人注目的方式使用javascript，以便用户仍然可以排序javascript是否被禁用。这是我第一次尝试这种方法。

我一直在跟随'ASP.NET MVC In Action'中的一些代码作为我的模板。到目前为止，我有：

网页

<% using (Html.BeginForm("SortCourseData", "Summary", FormMethod.Post, new { id = "summarysort"})) %>
<% { %>
<div id="sort"><%=Html.DropDownList("SortSelection", Model.sortList, new { onchange="this.form.submit();" })%> </div>         
<% } %>

呈现HTML

<form action="/Summary/SortCourseData" id="summarysort" method="post">
    <div id="sort"><select id="SortSelection" name="SortSelection" onchange="this.form.submit();"><option>Incomplete</option>
    <option>By first name</option>
    <option>By last name</option>
    <option>By state</option>
    </select> </div>         
</form>

Jquery

$('form#summarysort').submit(function(event) {
    event.preventDefault();
    var sortKey = $("#SortSelection").val();
    hijack(this, updateList, sortKey, "html")
});

function hijack(form, callback, sortKey, format) {
    $.ajax({
        url: '/Summary/SortCourseData',
        type: "POST",
        data: 'SortSelection=sortKey',
        dataType: format,
        success: callback
    });
}

function updateList(result) {
    $('div#datadisplayarea').html(result);
}

控制器

public ActionResult SortCourseData(string SortSelection)
    {
        SummaryViewModel m = new SummaryViewModel();
        SummaryViewData modelData = m.GetViewModelData(SortSelection);

        if (Request.IsAjaxRequest())
            return PartialView("SummaryCourseList", modelData);

        return View("Index", modelData);
    }

我遇到的问题是，当我在下拉列表中选择排序方法时，我的jquery中的submit事件不会捕获该事件。如果我在代码块中放置一个简单的alert();，我就不会收到警告，表明它没有挂钩到表单提交事件。

如何成功劫持表单提交事件，以便我可以使用ajax更新我的课程表？任何指导都将不胜感激......

Answer 1

假设选择框类似于：

<form action="" method="get">
<label for="sortBy">Sort by:</label>
<select id="sortBy" name="sortBy">
    <option value="0">id</option>
    <option value="1">First name</option>
    <option value="2">Surname</option>
    <option value="3">Website</option>
</select>
<input type="submit" value="Sort table" />
</form>

...和一个类似于以下内容的表格：

<table id="sorting">
    <thead>
        <tr>
            <th>numerical Id</th>
            <th>first name</th>
            <th>surname</th>
            <th>website</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mike</td>
            <td>Masnick</td>
            <td>techdirt.com/index.php</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Randall</td>
            <td>Munroe</td>
            <td>xkcd.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jerry</td>
            <td>Holkins</td>
            <td>www.penny-arcade.com</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mike</td>
            <td>Krahulik</td>
            <td>www.penny-arcade.com</td>
        </tr>
    </tbody>
</table>

我建议使用jQuery插件“{{而不是使用Ajax（并且在每个时间点击网络你的用户想要对已经加载的表进行重新排序）。” 3}}“（或任何tablesorter），并将其称为

$(document).ready( function(){ // hides the submit button (to avoid having to hijack the submit event) $('input:submit').remove(); // sorts the table on load. $('#sorting').tablesorter(); $('#sortBy').change( function() { // call the tablesorter plugin var sortedBy = parseInt($('#sortBy').val()); $("#sorting").tablesorter({ // sort on the first column and third column, order asc sortList: [[sortedBy,0]] }); }) } );

在equivalents进行演示。

Answer 2

试

$("#SortSelection").change(function(){
     $('form#summarysort').submit();
});

Answer 3

提交事件仅在用户提交表单时触发，如果JavaScript执行则不会触发。

您需要修改onchange处理程序。

如何在下拉列表更改触发时劫持表单提交事件

3 个答案: