jquery - jQuery在gridview鼠标单击上显示项目

Question

我有这个网格视图，它绑定了数据库中找到的所有类别。

<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False" 
                    DataKeyNames="CategoryId" CssClass="gridview"
                    AlternatingRowStyle-CssClass="even" OnSelectedIndexChanged="gvCategories_SelectedIndexChanged">
                <Columns>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                             <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" 
                             CommandArgument='<%# Eval("CategoryId") %>' CommandName="Select" 
                             Text='<%# Eval("CategoryName") %>'></asp:LinkButton>
                            &nbsp;
                        </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            </asp:GridView>

是否可以（通过 jQuery 或其他任何方式）在鼠标悬停或单击鼠标时显示类别下的所有子类别（来自数据库）？

Answer 1

<script type="text/javascript">
    $(function () {
        $(".gridViewRow, .gridViewAltRow").hover(
        function () {
            $(this).closest("table").find("tr.gridViewSubCategories").hide();
            var self = this;
            var subCategoriesGridRow = $(this).next("tr.gridViewSubCategories");
            if (subCategoriesGridRow.length == 0) {
                var categoryId = parseInt($(this).find("[data-categoryId]").attr("data-categoryId"));
                $.ajax({
                    url: '<%= ResolveClientUrl("~/WebForm2.aspx/GetSubCategories") %>',
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data : "{ 'categoryId' : " + categoryId + " }",
                    success: function (data) {
                        var subTable = $("<table class='subCategories'><tr><th>Id</th><th>Name</th></tr></table>");
                        data = data.d;
                        if (data.length) {
                            for (var i = 1; i < data.length; ++i) {
                                var tr = $("<tr ><td>" + data[i].id + "</td><td>" + data[i].name + "</td></tr>");
                                $(subTable).append(tr);
                            }
                        }
                        var gridRow = $("<tr class='gridViewSubCategories'></tr>");
                        var subCatCell = $("<td colspan='2' ></td>");

                        subTable.appendTo(subCatCell);
                        subCatCell.appendTo(gridRow);
                        $(self).after(gridRow);
                    },
                    error: function (aaa, bbb, ccc) {
                    }
                });
            }
            else {
                subCategoriesGridRow.show();
            }
        },
        function () {
            $(this).closest("table").find("tr.gridViewSubCategories").hide();
        });
    });
</script>

<asp:GridView ID="GridView1" runat="server" DataKeyNames="Id" RowStyle-CssClass="gridViewRow"
    AlternatingRowStyle-CssClass="gridViewAltRow" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
                <span data-categoryId='<%# Eval("Id") %>'>
                    <%# Eval("Id") %>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" />
    </Columns>
</asp:GridView>

代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = Enumerable.Range(1, 10)
            .Select(id => new {Id = id, Name = Guid.NewGuid().ToString()});
        GridView1.DataBind();
    }
}

[WebMethod]
public static object GetSubCategories(int categoryId)
{
    return Enumerable.Range(categoryId, 10)
        .Select(id => new {id = id, name = id.ToString()})
        .ToList();
}

最好使用一些 jsRender 之类的 javascript 模板引擎。