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

来源:互联网 发布:华罗庚知乎 编辑:程序博客网 时间:2024/05/16 08:13

前言:

通过实践,对于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();

效果:


总结:

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