Question

我是jquery的新手，需要一些帮助。

我在jquery的帮助下写了一个像网格一样的表。

当用户点击“名称”列时，用户将被重定向到详细信息页面。

现在我想知道我能否以更好的方式做到这一点？

JS代码应该在页面中还是在单独的JS文件中？

这是代码。

    <table id="grid">
    <thead>
        <tr>
            <th data-field="name">Namn</th>
            <th data-field="location">Ort</th>
            <th data-field="phone">Telefon</th>
            <th data-field="buildinmonth">Bygga inom</th>
            <th data-field="houselot">Har tomt</th>
            <th data-field="created">Skapad</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td><span id="open" data-id="@item.Id">@item.Name</span></td>
                <td>@item.Location</td>
                <td>@item.Phone</td>
                <td>@item.BuildInMonth</td>
                <td>@item.HouseLot</td>
                <td>@String.Format("{0:d}", item.CreatedDate)</td>
            </tr>
        }
    </tbody>
</table>

<script>
        $("#grid").kendoGrid({
            scrollable: false,
            sortable: true
        });

    $("#grid #open").click(function () {
        window.location.replace("/lead/details/" + $(this).data("id"));
    });
</script>

Answer 1

在这种情况下，不需要使用任何jquery点击事件，当html表加载时，我们可以给出一个<a>标签，

<td><a href="../lead/details/"+"@item.Id" ><span id="open" data-id="@item.Id">@item.Name</span></a></td>

Answer 2

当用户单击“名称”列时，用户将被重定向到详细信息页面。现在我想知道我能否以更好的方式做到这一点？

这似乎没问题。我觉得唯一可以添加的就是在名称列悬停时，您可以显示工具提示“显示更多详细信息”或更直观的内容。

JS代码应该在页面中还是在单独的JS文件中？

是的，我总是希望将所有JS代码放在一个单独的文件中。这样做的好处是您可以稍后缩小JS代码。

jquery网格和javascript最佳实践

2 个答案: