【项目实战】---EasyUI数据表格的行风格

前言：

通过实践，对于easyui的了解在进一步的加深，小小的效果能增添显示的清晰度和美感。这次要求通过生成时间和年限计算出到期时间，并更具到期时间和当前时间的比较，让到期的行显示成粉色，其余行颜色不变。这就涉及到数据表格的行风格。

分析：

easyui数据表格的行风格通过data-option的rowStyler来实现。

核心代码：

@*数据列表*@
 <div>
 <table id="BottleLifeGrid" class="easyui-datagrid" style="width:100%;height: 460px"
 data-options="rowStyler: function (index, row) {
 if (row.DueDate > new Date().toLocaleDateString()) {return 'background-color:#FFC0CB;color:#fff;'; }}">
</table>
</div>

//获取使用年限
 int serviceLife = Convert.ToInt32(item.ServiceLife);
//通过生产时间和使用年限计算到期时间
  DateTime DueDate = Convert.ToDateTime(item.ProduceDate).AddYears(serviceLife);
//格式转换
  string dueDate = DueDate.ToShortDateString();

效果：

总结：

小小的效果也好好好的对待，通过这些效果的实现能得到很好的锻炼，最重要的是小小效果的不断积累能很好的提高用户的体验度。