Question

我有动态应用于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和/或阻止我的样式从动态代码中删除？

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区块中：

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

Mvc webgrid排序清除DOM

1 个答案: