如何处理嵌入式 webgrid 样式答案

【问题标题】：How to handle embedded webgrid styling如何处理嵌入式 webgrid 样式
【发布时间】：2014-08-21 01:44:05
【问题描述】：

我在 webgrid 中有一个子 Webgrid，它返回每条记录的用户...

<div id="grid">
        @grid.GetHtml(
            tableStyle: "webgrid",
            headerStyle: "webgrid-header",
            footerStyle: "webgrid-footer",
            alternatingRowStyle: "webgrid-alternating-row",
            selectedRowStyle: "webgrid-selected-row",
            columns: grid.Columns( grid.Column("BlogBlogId", "BlogId ",style: "BlogBlogId"),
                                    grid.Column("Domain", "Domain",style: "Domain"),
                                    grid.Column("Path", "Path",style: "Path"),
                                    grid.Column("BlogUsers", "Blog Users", style: "BlogUsers", format : (item) =>
                                    {
                                        string temp = "<div style='text-align:left;height:100%;" + "width: 100%; overflow: auto; overflow-x:hidden;'>";
                                        var sub = new WebGrid(item.BlogUsers,
                                           canPage: false,
                                           ajaxUpdateContainerId: "sub",
                                           ajaxUpdateCallback: "jQueryTableStyling",
                                           defaultSort: "BlogBlogId", 
                                           rowsPerPage: 100);
                                           temp += sub.GetHtml(htmlAttributes: new { id = "tblsubWebGrid" },
                                           columns:sub.Columns(
                                                    sub.Column("UserLogon", "Logon"),
                                                    sub.Column("Adstatus", "AdStatus")
                                                   )
                                            );
                                        temp += "</div>";
                                        return new HtmlString(temp);

                                    }),
                                    grid.Column("Archived", "Archived",style: "Archived"),
                                    grid.Column("Deleted", "Deleted",style: "Deleted"),
                                    grid.Column("Allusersvalid", "All Users Valid?",style: "User IP")


                )
             )
    </div>

我根据用户的状态应用文本颜色更改...

<script>
    function styleGrid() {
        $("#tblsubWebGrid tr:not(:first)").each(function () {
            var aptStatus = $(this).find("td:nth-child(2)").html();
            if (aptStatus == 'User Exists') {
                $(this).find("td:nth-child(2)").addClass("clsGreen");
            } else {
                $(this).find("td:nth-child(2)").addClass("clsRed");
            }

        });
    }

    $(document).ready(function() {
        styleGrid();
    });
</script>

问题：这些类仅适用于带有子 webgrid....的第一个网格记录。

问题... 1.我的问题是因为表id =“tblsubWebGrid”的多个实例吗？ 2. 我的 jquery 脚本是否需要更改以适用于这些子 webgrids 的所有实例？

【问题讨论】：

标签： jquery css html asp.net-mvc-4 webgrid

【解决方案1】：

更新：稍微更改了我的 Jquery，从“tblsubWebGrid tr”之后删除了“:not(:first)”，它开始为我附加 CSS 类引用..

<script>
    function styleGrid() {
        $("#tblsubWebGrid tr").each(function () {
            var aptStatus = $(this).find("td:nth-child(2)").html();
            if (aptStatus == 'User Exists') {
                $(this).find("td:nth-child(2)").addClass("clsGreen");
            } else {
                $(this).find("td:nth-child(2)").addClass("clsRed");
            }

        });
    }

    $(document).ready(function() {
        styleGrid();
    });
</script>

【讨论】：