Как обрабатывать встроенный стиль веб-сетки

#jquery #css #html #asp.net-mvc-4 #webgrid

#jquery #css #HTML #asp.net-mvc-4 #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>
  

ПРОБЛЕМА: классы применяются только к первой записи сетки с вложенной веб-сеткой….

введите описание изображения здесь

введите описание изображения здесь

Вопрос … 1. Моя проблема в том, что несколько экземпляров таблицы id =»tblsubWebGrid»? 2. Нужно ли изменять мой скрипт jquery, чтобы он применялся ко всем экземплярам этих вложенных веб-сеток?

Ответ №1:

ОБНОВЛЕНИЕ: немного изменил мой Jquery, удалил «: not (:first)» после «tblsubWebGrid tr», и он начал добавлять ссылки на классы 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>