ExtJS中如何通过父Model获取子Model的nextDate字段并在Grid展示

嘿，这个场景我之前处理过类似的，其实核心就是利用模型的嵌套关联关系，通过点符号（.）来直接访问子模型的字段，不过具体的实现细节得看你用的UI Grid组件。我给你整理了通用思路和几个常见框架的示例，应该能解决你的问题：

通用核心思路 #

• 首先要确认你的offence模型已经正确关联了result子模型，并且数据层已经把result的数据完整加载进来（因为offence依赖result，如果用了懒加载的ORM框架，一定要确保关联数据被预加载，否则result会是null）
• 在Grid的列配置中，直接通过offence.result.nextDate这种点式路径来指定字段——绝大多数主流UI Grid组件都支持这种嵌套字段的访问方式

示例1：ASP.NET MVC + Telerik Kendo UI Grid #

如果是用Kendo UI Grid，列配置可以这么写：

@(Html.Kendo().Grid<Offence>()
    .Name("live-offence-grid")
    .Columns(columns => {
        // 配置其他业务列...
        columns.Bound(o => o.Result.NextDate).Title("Next Scheduled Date");
    })
    // 数据源等其他配置...
)

注意模型类的属性命名要对应：Offence类里要有Result属性，Result类里要有NextDate属性。

示例2：DevExpress ASP.NET GridView #

对于DevExpress的GridView，直接在列的FieldName里写嵌套路径就行：

<dx:ASPxGridView ID="liveOffenceGrid" runat="server" DataSourceID="OffenceDataSource">
    <Columns>
        <!-- 其他列配置 -->
        <dx:GridViewDataDateColumn FieldName="Result.NextDate" Caption="Next Date" />
    </Columns>
</dx:ASPxGridView>

数据源这边要记得用ORM的预加载方法（比如EF的Include(o => o.Result)）确保result数据被加载：

var offenceData = db.Offences.Include(o => o.Result).ToList();

示例3：前端Vue.js + Element UI Table #

如果是前端Vue项目用Element Table，列的prop属性直接写嵌套路径即可：

<el-table :data="liveOffenceList" border>
    <!-- 其他列 -->
    <el-table-column prop="result.nextDate" label="Next Date" />
</el-table>

这里的liveOffenceList是后端返回的包含offence对象的数组，每个offence对象的result属性里要包含nextDate字段。

额外注意点 #

• 一定要处理result为null的情况，避免出现空引用错误。可以在Grid列里加模板判断，比如Vue里可以这么写：

<el-table-column label="Next Date">
    <template #default="scope">
        {{ scope.row.result ? scope.row.result.nextDate : 'N/A' }}
    </template>
</el-table-column>

• 如果是后端ORM框架，务必确认关联数据已经被预加载，不要依赖懒加载（尤其是在前后端分离场景下，懒加载的数据不会被序列化返回给前端）

内容的提问来源于stack exchange，提问作者akshay anand