EXT.NET GridPanel中如何改变选中行的样式(包括前端JS)

ASP.NET 2014-07-10 16267阅读 0评论 0收藏 收藏本文
在开发邮件管理系统时遇到的一个问题,需求是这样的:首先有一个邮件的列表,大致展示方式和GMAIL的展示差不多,未读邮件的字体为粗体,已读邮件的字体则去掉粗体显示。在数据库中未读的标记为ReadCount=0,邮件被阅读一次,ReadCount自动加1,所以判断邮件是否已读只需要判断ReadCount这个标记是否大于0即可,那么Ext.net前台如果依据此规则来Render呢?答案是--用GridPanel的GetRowClass来处理,具体实现请看下面: 1.定义一个CSS样式,用以加粗字体:
.bold td {
      font-weight: bold;
    }
2.定义一个JS函数:
var rowClassEmailIsRead = function (r) {
      var d = r.data.ReadCount;
      if (d == 0) {
        return "bold";
      } else {
        return "";
      }
    }
  3.在GridPanel的GetRowClass中调用rowClassEmailIsRead函数
<View>
  <ext:GridView ID="gpView" LoadMask="true" DefaultAnchor="100%" TrackOver="true" LoadingText="Loading..." MarkDirty="false">
   <GetRowClass Fn="rowClassEmailIsRead" /></ext:GridView>
</View>
附图: gridpanel 如果我们点击某一条未读邮件之后,是不是应该在加载此邮件详情的时候也把加粗的字体去掉呢?那么下面则是去掉加粗字体样式的方法,设置ReadCount>0即可:
var gpCellClick = function (grid, td, cellIndex, record, tr, rowIndex) {
      var colnumName = grid.getHeaderCt().getHeaderAtIndex(cellIndex).dataIndex;
      if (colnumName == 'Subject') {
        var Id = record.getData(rowIndex).Id;
        record.set("ReadCount", record.getData(rowIndex).ReadCount + 1);
        App.direct.LoadFormData(Id);
      }
    };
  资料参考:http://forums.ext.net/showthread.php?16352-Change-Gridpanel-s-row-background-CodeBehind

转载请注明:图享网 » EXT.NET GridPanel中如何改变选中行的样式(包括前端JS)

文章评论

获取验证码