有些时候我们需要针对表格的数据,针对不同的值进行不一样的渲染,而不是干巴巴的问题体现
比如上面的,权限的话样式为红色的,菜单的话为蓝色的,然后是基于不同层级字体大小不一样
如果我们打开F12的话,会看到表格中这一列的不同数据的差异
通过上图可知,其实就是字段的值不一样,对应的class不一样,然后去编写class让差异化体现出来
这里用到的其实是一个属性html
如果要显示自定义的表格,则使用这个,表示直接显示信息模板注意里面的带参使用{{:=item.name}}这样的形式
字段 | 类型 | 示例 | 说明 |
---|---|---|---|
args1 | 字符 | <div><span>{{:=item.name}}</span><span>{{:=item.desc}}</span></div> | 需要在td中显示的html代码,支持模板的写法 |
按照上面的说明,也就是在某一个字段上添加属性html,则到时候渲染的内容就是args1的内容了,而如果你要引用其他字段的值,则需要使用{{:=item.xxx}}的模式,xxx表示其他字段,注意是首个单词小写字母打头
如果上面的roleInfo,我的ListDto的内容如下
///<summary>
///权限列表
///</summary>
public class RoleInfoListDto
{
/// <summary>
/// ID
/// </summary>
[ColumnDataType("orderby", "Id", "Id desc")]
public int Id { get; set; }
///<summary>
///名称
///</summary>
[PasteLeft]
[ColumnDataType("html", "<div class=\"level level{{:=item.level}} role{{:=item.roleTypeInt}}\">{{ if(item.icon){ }}<i class=\"Hui-iconfont {{:=item.icon}}\"></i>{{ } }} {{:=item.name}}</div>")]
public string Name { get; set; }
///<summary>
///模块
///</summary>
[PasteLeft]
public string Model { get; set; }
///<summary>
///权限
///</summary>
[PasteLeft]
public string Role { get; set; }
/// <summary>
/// 图标名称 一般表示样式名称
/// </summary>
[MaxLength(32)]
[PasteHidden]
public string Icon { get; set; }
/// <summary>
/// 路径 作为菜单类型的路径
/// </summary>
[MaxLength(128)]
[PasteLeft]
public string Path { get; set; }
/// <summary>
/// 权限类型 0权限1菜单2按钮,如何让前端支持这个显示
/// </summary>
[PasteSelect(PasteFormString.SelectRoleTypeQuery)]
public int RoleType { get; set; }
/// <summary>
/// 权限类型
/// </summary>
[PasteHidden]
public int RoleTypeInt { get { return RoleType; } }
///<summary>
///描述
///</summary>
public string Desc { get; set; }
///<summary>
///状态
///</summary>
[ColumnDataType("switch", "view")]
public bool IsEnable { get; set; }
/// <summary>
/// 绑定 扩展基于角色的时候是否拥有这个权限
/// </summary>
[ColumnDataType("switch")]
[ColumnDataType("hidden", "bind")]
public bool ExtendBind { get; set; }
///<summary>
///排序
///</summary>
[ColumnDataType("orderby", "Sort", "Sort desc")]
public int Sort { get; set; }
///<summary>
///父级ID
///</summary>
[ColumnDataType("outerdisplay", "", "extendFather?.name || ''")]
public int FatherId { get; set; }
/// <summary>
/// 父级信息,为了给上一个字段FatherId显示使用,你也可以把FatherId隐藏,只显示这个字段,或者2个都显示
/// </summary>
[ColumnDataType("hidden")]
public RoleShortModel ExtendFather { get; set; }
///<summary>
///层级
///</summary>
[ColumnDataType("orderby", "Level", "Level desc")]
public int Level { get; set; }
///// <summary>
///// 扩展 基于角色ID查询,查询这个角色包含哪些权限这个使用上传query
///// </summary>
//[ColumnDataType("hidden")]
//public int ExtendGradeId { get; set; }
///<summary>
///排序串
///</summary>
[PasteHidden]
public string SortStr { get; set; }
/////<summary>
/////
/////</summary>
//public int RootId { get; set; }
/////<summary>
/////
/////</summary>
//public string FatherStr { get; set; }
/// <summary>
/// 添加子权限
/// </summary>
[ColumnDataType("menu", "添加子集", "open_window('添加子权限','./view.html?path=roleInfo&fatherId={{:=item.id}}');")]
public int Menu1 { get; set; }
/// <summary>
/// 详情
/// </summary>
[ColumnDataType("menu", "详情", "open_window('详细','./detail.html?path=roleInfo&id={{:=item.id}}');")]
public int Menu2 { get; set; }
}
注意看
///<summary>
///名称
///</summary>
[PasteLeft]
[ColumnDataType("html", "<div class=\"level level{{:=item.level}} role{{:=item.roleTypeInt}}\">{{ if(item.icon){ }}<i class=\"Hui-iconfont {{:=item.icon}}\"></i>{{ } }} {{:=item.name}}</div>")]
public string Name { get; set; }
需要注意,如果通过属性对某一个字段进行了修改,需要注意这个是否会修改到他对应的值,比如上面的
/// <summary>
/// 权限类型 0权限1菜单2按钮,如何让前端支持这个显示
/// </summary>
[PasteSelect(PasteFormString.SelectRoleTypeQuery)]
public int RoleType { get; set; }
/// <summary>
/// 权限类型
/// </summary>
[PasteHidden]
public int RoleTypeInt { get { return RoleType; } }
由于PasteSelect也就是属性select的介入,在UI中roleType实际的值为select的value,如果其他地方要使用这个字段的原值,则需要使用roleTypeInt
那么有一个新的问题?
本期思考话题:如果我的数据显示需要跨行,跨列要如何实现???