如何处理嵌入式webgrid样式

时间:2014-06-30 16:01:24

标签: jquery css html5 asp.net-mvc-4 webgrid

我在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的第一个网格记录....

enter image description here

enter image description here

...问题 1.我的问题是因为表id的多个实例=&#34; tblsubWebGrid&#34;? 2.我的jquery脚本是否需要更改,以便它适用于这些子webgrids的所有实例?

1 个答案:

答案 0 :(得分:0)

更新:稍微更改了我的Jquery,删除了&#34;:not(:first)&#34;来自&#34; tblsubWebGrid tr&#34;它开始为我添加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>