Question

将ngx-datatable与checkboxable=true一起使用。可以正确显示，但是现在，我想在加载组件时默认选中所有复选框。这是数据表的实现-

<us-data-table [dataTableConfig]="userTableConfig" [data]="getData()"  (activate)="onActivate($event)"  [selected]="selected" (onSelection)='userSelected($event)'>
    <us-data-table-column name="Product Type">
        <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" us-data-table-column-cell>
            <div>{{row.row.userProdType}}</div>
        </ng-template>
    </us-data-table-column>
    <us-data-table-column name="User Name">
        <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" us-data-table-column-cell>
            <div>
                <input type="text" [(ngModel)]="row.row.userName" class="row
                        baseline-edit icon-image-preview" length="255" style="width:95%;margin-right:0px !important;">
                <i class="material-icons pull-right
                        icon_position">mode_edit</i>
            </div>
        </ng-template>
    </us-data-table-column>
    <us-data-table-column name="Start Date">
        <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" us-data-table-column-cell>                        
            <div class="row">
                <ejs-datepicker id='datepicker' class="usr_start_date" placeholder='Select a date' [value]="row.row.userStartDate" ></ejs-datepicker> <!-- [min]='minDate' [max]='maxDate' -->
                <div class="input-field col s12">
                        <span class="character-counter" style="float: right; font-size: 12px; height: 1px;"></span>
                </div>
            </div>
        </ng-template>
    </us-data-table-column>
</us-data-table>

从config调用的所有数据表配置，例如-

export class demoUserConfig {
    public configs: any = {
        TABLE: {
            USER_TABLE: {
                headerCheckboxable: true,
                selectionType: "checkbox",
                checkboxable: true,
                columns: [
                    {
                        name: "User Type",
                        headerClass: "",
                        cellClass: "",
                        columnType: "string",
                        columnKey: "userProdType",
                        columnOrder: 1,
                        isDefault: true,
                        isCustom: true
                    },
                    {
                        name: "User Name",
                        headerClass: "",
                        cellClass: "",
                        columnType: "string",
                        columnKey: "userName",
                        columnOrder: 2,
                        isDefault: true,
                        isCustom: true
                    },
                    {
                        name: "Start Date",
                        headerClass: "",
                        cellClass: "",
                        columnType: "date",
                        columnKey: "userStartDate",
                        columnOrder: 3,
                        isDefault: true,
                        isCustom: true
                    }
                ]
            }
        }
    };
}

尝试了3种方法来默认选择复选框：

方法1： Google搜索它以找到任何要默认选中复选框的属性，发现了2-3个属性，例如-[selectAllRowsOnPage]="true"和[allRowsSelected]="allRowsSelected"。当我将其应用于<us-data-table>时，两者似乎都不再起作用。

方法2： 然后，我尝试使用核心javascript选中这些复选框。在ts文件的getData()方法中，例如-

var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++)
{
        if(inputs[i].getAttribute('type')=='checkbox')
        {
                inputs[i].checked = true;
        }
}

效果很好。默认情况下，它会选中所有复选框。但这又导致了另一个问题。当您单击任何复选框以取消选择时，它不会执行任何操作。它保持选中状态。但是，当您下次单击时，它将取消选中该复选框。第一次，该复选框都不执行任何操作，但是在第二次单击时，它们开始起作用。

方法3： 然后，再次尝试通过添加新的自定义复选框来实现此默认复选框选择，而不是使checkboxable = true。在配置和html文件中添加了新列-

<us-data-table-column name="Product Check">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
        <div id="chk-box">
            <input type="checkbox"/>
        </div>
  </ng-template>
</us-data-table-column>

在构建应用程序并加载页面时，在此列下不显示任何内容。当我检查控制台时，它显示为-

我不知道为什么它显示为空白。

以上三种方法中的任何一种都非常感谢任何帮助。另外，非常欢迎任何新的解决方案。

谢谢。

ngx datatable默认选择复选框

0 个答案: