Question

当以Angular格式使用JqxGrid时，我正在创建一个复选框，该复选框将切换显示其他列。我认为，当网格要占用所有可用空间时，这将是一件非常简单的事情。

我注意到的问题是，切换状态以添加新行，将出现一个滚动条。

我的代码库如下：

///Globals: 
//    dataColumns: []
//    dataAdapter: []
//    isToggled : boolean
//    dataFields: []

toggleFired(e){
    this.isToggled = e.target.checked;
    this.setColumns(this.columns);
    this.setDataAdapter();
}
setColumns(columns){
    let dColumns = []
    let dataFields = []
    if (this.isToggled){
        //The reason i clone columns is to not augment the original column array.  If i removed this, subsequent taps will mention datafield reuse errors.
        columns = columns.slice;
        let iconColumn = new DataColumn();
        iconColumn.width = "20px";
        /// other properties set.
        columns.unshift(iconColumn);
    }
    for( let col of columns){
      let dColumn = {
        width: col.width,
        text: col.text || "",
        cellsrenderer: null,
        cellClassName: "col",
        dataField: col.datafield
      };
      if (!dColumn.width) delete dColumn.width;
      dColumns.push(dColumn);
    }
    this.dataFields = dataFields;
    this.dataColumns = dColumns;
}
setDataAdapter(){
    //This aspect is primarily used for the data rows.  It sets localdata, datatype, and datafields. 
    //After creating that object, it will update the dataAdapter Obj passed into jqxGrid.
}

因此，当我切换此按钮时，它将完全完成所需的操作。它将创建此新列。但是注入似乎无法正确调整其他项目的大小。滚动条的外观似乎与创建的新列直接相关。

注意：某些列可能有一定的宽度，但有些则没有，这意味着要占用尽可能多的空间。

注意：在此演示中，没有列具有定义的宽度，但此新注入的宽度为“ 20px”

我当时想，当重置数据列时，它将重绘未定义with的列，以尽可能地适应。

我在jqxGrid内寻找其他功能，但没有人跳出来，并且api并未提供有关功能的详细信息，仅提供了功能，属性等的列表。

标记：

<jqxGrid [source]="dataAdapter" [columns]="dataColumns" 
         [columnsresize]="true" 
         width="100%" height="100%"></jqxGrid>

供参考：https://www.jqwidgets.com/angular-components-documentation/documentation/jqxgrid/angular-grid-api.htm?search=grid

编辑：我注意到，当我调整窗口或拆分器的大小时，网格会自动进行调整。这意味着正在监听事件。我一直在尝试使用类似的事件对其进行仿真：例如$(window).trigger("resize")，但无济于事。我可以利用某个地方的潜在功能。

截至目前，我已尝试以下操作： -this.grid.render（） -this.grid.resize（） -$（this.hostRef）.trigger（“ resize”） -$（this.grid）.trigger（“ resize”） -$（this.grid.host）.trigger（“ resize”） -$（window）.trigger（“ resize”）

一无所有。

动态添加/删除列为我提供了水平滚动条

0 个答案: