Extjs5嵌套网格(表:子表)
extjs5 nested grid (table:subtable)
实际上我有两个表(Amenazas和Salvaguardas),第一个表显示Amenazas,第二个表显示Salvaguardas。每个Salvaguarda都与任何Amenazas相关联,所以我想在每一行中显示另一个子表(与Salvaguardas表)使用ExtJS5的rowExpand。类似于这个例子。如何使用salvaguardaStore插入另一个网格,并仅显示与该行的Amenaza相关的Salvaguardas ?(类似于客户-购买)下面是代码:
//MODEL
// AMENAZAS
Ext.define('Amenazas', {
extend: 'Ext.data.Model',
fields: [ 'id', 'codigo', 'denominacion', 'a_impacto', 'a_riesgo','c_impacto', 'c_riesgo','i_impacto', 'i_riesgo', 'd_impacto', 'd_riesgo','t_impacto', 't_riesgo','total_impacto', 'total_riesgo',]
});
// SALVAGUARDAS
Ext.define('Salvaguardas', {
extend: 'Ext.data.Model',
fields: [ 'id_amenaza','tipo','modo', 'codigo','denominacion', 'eficiencia',]
});
数据存储(在我的数据库Amenaza.id = Salvaguardas.id_amenaza
中每一行创建1:n关联)
// DATASTORE
//AMENAZAS
var amenazaStore = Ext.create('Ext.data.Store', {
model: 'Amenazas',
data: [
{ id: 1, codigo: 'E.1', denominacion: 'Errores de los usuarios', a_riesgo: '0', c_riesgo: '0', i_riesgo: '0', d_riesgo: '1015875', t_riesgo: '0', total_riesgo: '1015875'},
{ id: 2, codigo: 'E.5', denominacion: 'Deficiencias en la organización', a_riesgo: '0', c_riesgo: '0', i_riesgo: '0', d_riesgo: '526750', t_riesgo: '0', total_riesgo: '526750'},
{ id: 3, codigo: 'E.8', denominacion: 'Escapes de información', a_riesgo: '0', c_riesgo: '0', i_riesgo: '0', d_riesgo: '752500', t_riesgo: '0', total_riesgo: '752500'},
{ id: 4, codigo: 'E.9', denominacion: 'Alteración accidental de la información', a_riesgo: '0', c_riesgo: '0', i_riesgo: '0', d_riesgo: '376250', t_riesgo: '0', total_riesgo: '376250'}
]
});
//SALVAGUARDAS
var salvaguardaStore = Ext.create('Ext.data.Store', {
model: 'Salvaguardas',
data: [
{ id_amenaza: 1, tipo: 'Correctiva', modo: 'Correctiva', codigo: 'corr-01', denominacion: 'correctiva 1', eficiencia: 'MB' }
]
});
并且Grid使用rowExpander来展开每一行并显示信息,我想在行中显示用自己的Salvaguardas扩展第二个表。
//GRIDPANEL
Ext.create('Ext.grid.Panel', {
renderTo: 'example-grid',
store: amenazaStore,
width: 980,
height: 790,
title: '<bean:write name="informesAGRForm" property="nombreActivo"/>',
plugins: [
{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Denominación:</b> {denominacion}</p>',
'<p><b>Código:</b> {codigo}</p><br>',
'<p><b>Riesgo Total:</b> {total_riesgo}</p>')
}
],
collapsible: false,
animCollapse: false,
columns: [
{
text: 'ID',
hidden: true,
hideable: false,
dataIndex: 'id'
},
{
text: 'Codigo',
width: 50,
sortable: true,
hideable: false,
dataIndex: 'codigo'
},
{
text: 'Denominación',
width: 150,
dataIndex: 'denominacion',
},
{
text: ' Autenticidad',
flex: 1,
dataIndex: 'a_riesgo'
},
{
text: 'Confidencialidad',
flex: 1,
dataIndex: 'c_riesgo'
},
{
text: 'Integridad',
flex: 1,
dataIndex: 'i_riesgo'
},
{
text: 'Disponibilidad',
flex: 1,
dataIndex: 'd_riesgo'
},
{
text: 'Trazabilidad',
flex: 1,
dataIndex: 't_riesgo'
},
{
text: 'Total',
flex: 1,
dataIndex: 'total_riesgo'
}]
});
提前感谢
其实很简单。您应该在您的项目中包含子表插件(您可以从http://dev.sencha.com/extjs/5.0.0/examples/ux/grid/SubTable.js下载它)。然后像这样配置:
{
ptype: "subtable",
headerWidth: 24,
columns: [{
text: 'id_amenaza',
dataIndex: 'id_amenaza',
width: 100
}, {
width: 100,
text: 'codigo',
dataIndex: 'codigo'
}],
getAssociatedRecords: function(record) {
var result = Ext.Array.filter(
salvaguardaStore.data.items,
function(r) { return r.get('id_amenaza') == record.get('id'); }
);
return result;
}
}
最重要的位是getAssociatedRecords
覆盖。你必须返回记录数组来显示,所以你基本上可以过滤salvaguardaStore
数据。
工作示例:http://jsfiddle.net/7czs02yz/11/
相关文章:
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 如何递归地获取嵌套对象中所有子对象的列表
- 嵌套JSON到平面HTML表
- Ui路由器未显示嵌套的子内容
- 动态创建嵌套的JSON对象父对象和子对象
- 如何使用代码点火器使用Bootstarp数据表搜索数据嵌套表数据
- 在RubyonRails中创建嵌套表单
- DataTable-如何实现嵌套的数据表
- 嵌套在表单中的引导下拉菜单:输入时选项卡索引中断
- 在 React 中嵌套组件,props 不会传递给子组件
- 嵌套的 Jquery 每个 2D 数组错误地重复表单元格
- 如何在同一个表中显示这两个嵌套ng重复的元素
- 角度路由器不选择子状态(嵌套状态)
- 引导表:如何将一个表嵌套到另一个表中
- 从父函数返回什么以获取从子函数/嵌套函数返回的值
- JQuery 手风琴子菜单/嵌套不起作用
- 用ng-repeat表嵌套数据
- Extjs5嵌套网格(表:子表)
- tableorter嵌套表—子行(由用户根据需要创建)不与父行排序
- 将子路由嵌套在另一个子路由中