javascript - Mvc webgrid 排序清除DOM

Question

我有动态应用于 webgrid 中的列值的脚本和样式。一切正常，直到我对列进行排序，然后才删除类或样式。我已经在 _layout 和 View 中尝试了我的代码..

<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 和/或防止我的样式从动态标签中剥离？

Answer 1

您可以将应用样式的代码包装在一个单独的函数中，然后将函数的名称传递给 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 block 中:

var grid = new WebGrid(data, ajaxUpdateCallback: "styleGrid");