Ag Grid是一个用于构建企业级数据网格的JavaScript库。在Ag Grid中,可以使用主/从行的概念来创建一个具有层次结构的网格。主行是父行,从行是子行。
要保持从行永久打开,可以使用Ag Grid的isExpanded
属性。通过将isExpanded
属性设置为true
,可以将从行打开并保持打开状态。
以下是一个包含代码示例的解决方案:
// 数据
var rowData = [
{ id: 1, name: "主行1", age: 30, gender: "男" },
{ id: 2, name: "主行2", age: 25, gender: "女" },
{ id: 3, name: "主行3", age: 40, gender: "男" },
];
var subRowData = [
{ id: 1, subName: "从行1", subAge: 15, subGender: "男" },
{ id: 2, subName: "从行2", subAge: 12, subGender: "女" },
];
// 列定义
var columnDefs = [
{ headerName: "ID", field: "id" },
{ headerName: "姓名", field: "name" },
{ headerName: "年龄", field: "age" },
{ headerName: "性别", field: "gender" },
];
var subColumnDefs = [
{ headerName: "ID", field: "id" },
{ headerName: "从行姓名", field: "subName" },
{ headerName: "从行年龄", field: "subAge" },
{ headerName: "从行性别", field: "subGender" },
];
// 主行数据源
var gridOptions = {
rowData: rowData,
columnDefs: columnDefs,
masterDetail: true, // 启用主/从行功能
detailCellRendererParams: {
detailGridOptions: {
columnDefs: subColumnDefs,
rowData: subRowData,
isExpanded: true, // 将从行打开并保持打开状态
},
getDetailRowData: function (params) {
params.successCallback(params.data.subRowData);
},
},
};
// 创建Ag Grid实例
new agGrid.Grid(document.querySelector("#myGrid"), gridOptions);
在上面的代码中,首先定义了主行数据rowData
和从行数据subRowData
。然后,定义了主行和从行的列定义columnDefs
和subColumnDefs
。
接下来,通过在gridOptions
对象中设置masterDetail
为true
启用主/从行功能,并在detailCellRendererParams
中指定从行的配置。在detailGridOptions
中,设置了从行的列定义subColumnDefs
和数据subRowData
,并将isExpanded
属性设置为true
来保持从行打开。
最后,通过调用new agGrid.Grid
创建Ag Grid实例,并将其绑定到HTML元素上。
请注意,上述代码仅为示例,您需要根据您的实际需求进行适当的修改。