easyUI中datagrid展示对象下属性以及显示多个子属性(Day_37)
easyUI中datagrid展示对象下属性以及显示多个子属性
显示对象单个属性值
添加formatter
属性
<th field="decidedzone" width="100" align="center" formatter="formatName">所属定区</th>
<script>
// value:显示的值 row:行 index: 当前下标
function formatDistrict(value,row,index){
//region:对象名 district:要显示的字段名
return row.region.district;
}
</script>
显示对象多个子属性值
先来看看,若像上面显示单个属性值一样
结果显示如下图:
很显然,省市区显示有误,所以,当需要显示对象多个子属性时。我们需要从row这个参数上下手,将代码修改为如下:
<th field="province" width="110" align="center" formatter="formatProvince">省</th>
<th field="city" width="90" align="center" formatter="formatCity">市</th>
<th field="district" width="90" align="center" formatter="formatDistrict">区(县)</th>
field
的值改为对象的属性值。
最终代码:
<tr>
<th field="idd"checkbox="true"></th>
<th field="id" width="90" align="center">分区编号</th>
<th field="province" width="110" align="center" formatter="formatProvince">省</th>
<th field="city" width="90" align="center" formatter="formatCity">市</th>
<th field="district" width="90" align="center" formatter="formatDistrict">区(县)</th>
<th field="addresskey" width="120" align="center">位置关键字</th>
<th field="startnum" width="60" align="center">起始号</th>
<th field="endnum" width="60" align="center">结束号</th>
<th field="single" width="60" align="center">单双号</th>
<th field="position" width="200" align="center">具体位置信息</th>
<th field="decidedzone" width="100" align="center" formatter="formatName">所属定区</th>
</tr>
<script>
function formatName(value,row,index) {
return row.decidedzone.name;
}
function formatProvince(value,row,index) {
return row.region.province;
}
function formatCity(value,row,index) {
return row.region.city;
}
function formatDistrict(value,row,index){
return row.region.district;
}
</script>
最终显示: