我已经创建了带有复选框的行详细视图的光滑网格。它在行扩展操作上运行良好。但是行详细视图不可见当我展开行并单击网格中的复选框时
预期行为：
当行扩展到详细视图并在网格中单击复选框时，详细视图应该仍然相同
在这里我附上了示例截图
展开行详细信息时
单击复选框时的动作
Ts 代码示例：
export class GridRowDetail implements OnInit {
angularGrid: AngularGridInstance;
columnDefinitions: Column[];
gridOptions: GridOption;
dataset: any[];
detailViewRowCount = 9;
message: string;
constructor() { }
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
}
get rowDetailInstance(): any {
return this.angularGrid.extensions.rowDetailView.instance || {};
}
ngOnInit(): void {
this.defineGrid();
}
defineGrid() {
this.columnDefinitions = [
{
id: 'customername',
name: 'Customer Name',
field: 'customername',
minWidth: 190,
cssClass: 'cell-title',
sortable: true,
queryFieldSorter: 'id',
type: FieldType.string
},
{ id: 'orderamount',
name: 'order Amount',
field: 'orderamount',
minWidth: 190,
},
{
id: 'orderdate',
name: 'Orderdate',
field: 'orderdate',
minWidth: 160,
type: FieldType.dateIso,
sortable: true,
formatter: Formatters.dateIso,
}
];
this.gridOptions = {
autoResize: {
containerId: 'demo-container',
sidePadding: 10
},
enableFiltering: true,
enableRowDetailView: true,
rowSelectionOptions: {
selectActiveRow: true
},
rowMoveManager: {
onBeforeMoveRows: (e, args) => this.onBeforeMoveRows(e, args),
onMoveRows: (e, args) => this.onMoveRows(e, args),
},
enableCheckboxSelector: true,
enableRowSelection: true,
checkboxSelector: {
hideInFilterHeaderRow: false,
},
multiSelect: false,
datasetIdPropertyName: 'id',
rowDetailView: {
process: (item) => this.makeRowData(item),
loadOnce: true,
singleRowExpand: false,
useRowClick: false,
panelRows: 7,
viewComponent: RowDetailView
}
};
this.getData();
}
childColumnDefinitions = [
{
id: 'productname',
name: 'Product Name',
field: 'productname',
width: 220,
cssClass: 'cell-title',
filterable: true,
sortable: true,
queryFieldSorter: 'id',
type: FieldType.string
},
{ id: 'price',
name: 'Price',
field: 'price',
minWidth: 90,
filterable: true },
{ id: 'quantity',
name: 'Quantity',
field: 'quantity',
minWidth: 90,
filterable: true }
];
getData() {
this. dataset = [
{
id: 'id_d4',
customername: "customer3",
orderamount: "5300",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_d6',
customername: "customer5",
orderamount: "5030",
'childs':[],
orderdate: "dec15",
},
{
id: 'id_1d2',
customername: "customer11",
orderamount: "500",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_1d5',
customername: "customer14",
orderamount: "300",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_1d6',
customername: "customer15",
orderamount: "5030",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_11d2',
customername: "customer16",
orderamount: "500",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_11d3',
customername: "customer14",
orderamount: "5000",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_11d4',
customername: "customer25",
orderamount: "5300",
orderdate: "dec15",
'childs':[]
},
{
id: 'id_d210',
customername: "customer11",
orderamount: "300",
orderdate: "dec15",
'childs':[]
},
];
}
changeDetailViewRowCount() {
if (this.angularGrid && this.angularGrid.extensionService) {
const options = this.rowDetailInstance.getOptions();
if (options && options.panelRows) {
options.panelRows = this.detailViewRowCount; // change number of rows dynamically
this.rowDetailInstance.setOptions(options);
}
}
}
closeAllRowDetail() {
if (this.angularGrid && this.angularGrid.extensionService) {
this.rowDetailInstance.collapseAll();
}
}
makeRowData(item: any) {
const itemDetail = item;
itemDetail.id = itemDetail.id
itemDetail.dataSet=itemDetail.childs;
itemDetail.columnDefinition=this.childColumnDefinitions;
return itemDetail
}
onGridItemClick(event)
{
console.log("event", event);
}
onBeforeMoveRows(e, data){
this. collapseAll();
for (let i = 0; i < data.rows.length; i++) {
// no point in moving before or after itself
if (data.rows[i] === data.insertBefore || data.rows[i] === data.insertBefore - 1) {
e.stopPropagation();
return false;
}
}
return true;
}
collapseAll() {
var rowDetail = this.angularGrid.extensionService.getSlickgridAddonInstance(
ExtensionName.rowDetailView
);
rowDetail.collapseAll();
}
onMoveRows(e, args) {
const extractedRows = [];
let left;
let right;
const rows = args.rows;
const insertBefore = args.insertBefore;
left = this.dataset.slice(0, insertBefore);
right = this.dataset.slice(insertBefore, this.dataset.length);
rows.sort((a, b) => {
return a - b;
});
for (let i = 0; i < rows.length; i++) {
extractedRows.push(this.dataset[rows[i]]);
}
rows.reverse();
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
if (row < insertBefore) {
left.splice(row, 1);
} else {
right.splice(row - insertBefore, 1);
}
}
this.dataset = left.concat(extractedRows.concat(right));
const selectedRows = [];
for (let i = 0; i < rows.length; i++) {
selectedRows.push(left.length + i);
}
this.angularGrid.slickGrid.resetActiveCell();
this.angularGrid.slickGrid.setData(this.dataset);
this.angularGrid.slickGrid.setSelectedRows(selectedRows);
this.angularGrid.slickGrid.render();
}
}
html代码示例
<div class="container-fluid">
<angular-slickgrid gridId="grid21" [columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset" (sgOnClick)="onGridItemClick($event)" (onAngularGridCreated)="angularGridReady($event)">
</angular-slickgrid>
</div>