0

我已经将脚本和样式动态应用于 webgrid 中的列值。一切正常，直到我对一列进行排序，那是当类或样式被删除时。我已经在 _layout 以及视图中尝试了我的代码..

<script type="text/javascript">
    $(document).ready(function () {            
        $("#tblWebGrid tr:not(:first)").each(function () {               
            var aptStatus = $(this).find("td:nth-child(9)").html();             
            if (aptStatus == 'Scheduled') {                   
                $(this).find("td:nth-child(9)").addClass("clsGreen");
            } else {                   
                $(this).find("td:nth-child(9)").addClass("clsRed");
            }
        });
    });     
</script>

<style type="text/css">
.clsGreen
{
    color: Green;
    font: bold 1em Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bolder;
    margin: 0 auto;
    width: auto;
}
.clsRed
{ 
    color: Red;
    font: bold 1em Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bolder;
    margin:0 auto;
    width:auto;
}

如何重新加载 DOM 和/或防止我的样式从动态标签中剥离？

4

1 回答 1

2

您可以将应用样式的代码包装在单独的函数中，然后将函数的名称传递给 WebGrid 的 ajaxUpdateCallback 参数：

<script>
    function styleGrid(){
    $("#tblWebGrid tr:not(:first)").each(function () {               
            var aptStatus = $(this).find("td:nth-child(9)").html();             
            if (aptStatus == 'Scheduled') {                   
                $(this).find("td:nth-child(9)").addClass("clsGreen");
            } else {                   
                $(this).find("td:nth-child(9)").addClass("clsRed");
            }
        });
    }
    $(document).ready(function(){
        styleGrid();
    })
</script>

然后在你的 Razor 块中：

var grid = new WebGrid(data, ajaxUpdateCallback: "styleGrid");
于 2013-08-23T08:05:32.013 回答