在 Ui 网格 Angular 中定义列位置

Question

这是我在 Ui 网格中定义我的一个 col 的方式：

getDeviceTypeList = function () {
        BaseInfoService.getDeviceTypeList().then(function (data) {
            debugger;
            $scope.deviceTypeList = data;

            $scope.gridOptions.columnDefs.push(

                        {
                            headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>',
                            cellTemplate: '<div>{{getExternalScopes().deviceTypeFormatter(row.entity.DeviceTypeCode)}}</div>',
                            field: 'DeviceTypeCode',
                            enableCellEdit: true,
                            editType: 'dropdown',
                            editDropdownOptionsArray: $scope.deviceTypeList,
                            editableCellTemplate: 'ui-grid/dropdownEditor',
                            editDropdownIdLabel: 'SubCode',
                            editDropdownValueLabel: 'ParamDesc',
                            editModelField: 'DeviceTypeCode'
                        }
                );

        })
    }

但其他列定义如下：

 $scope.gridOptions = {

        columnDefs: [
       {
       name:"soheil"},
      { name: 'توضیحات', field: 'Command', headerCellTemplate: '<div>{{"common.Comment"|translate}}</div>', editModelField: 'Command' },
      { name: 'تعداد', field: 'NeededDeviceNumber', headerCellTemplate: '<div>{{"common.NeededDeviceNumber"|translate}}</div>', type: 'number', editModelField: 'NeededDeviceNumber' },

      //{ name: 'نوع وسایل', field: 'DeviceType', headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>', cellTemplate: '<select ng-model="neededDiviceViewModel.templateCode" ng-options="item.SubCode as item.ParamDesc for item in dastourKarViewModelList"><option value="" style="display:none" selected="selected">انتخاب</option></select>' }
        ],
    }

如何为列定义自定义位置？现在就像：
1 3 5 2 4

这不是我想要的，例如：1 2 3 4

有什么想法吗？

谢谢

Answer 1

使用 splice 函数在正确的位置插入新的列定义

$scope.columns.splice(1, 0, { field: 'company', enableSorting: false });

以上代码在第二个位置添加了一个新列。请参阅 uioo-grid tutorial

中的示例

更新：对于你的这个要求"assume the column should be like this : col1 col2 dynamic-col col3 but now it's like : dynamic-col col1 col2 col 3"你需要使用下面的代码

$scope.gridOptions.columnDefs.splice(2, 0, { headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>',
    cellTemplate: '<div>{{getExternalScopes().deviceTypeFormatter(row.entity.DeviceTypeCode)}}</div>',
    field: 'DeviceTypeCode',
    enableCellEdit: true,
    editType: 'dropdown',
    editDropdownOptionsArray: $scope.deviceTypeList,
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownIdLabel: 'SubCode',
    editDropdownValueLabel: 'ParamDesc',
    editModelField: 'DeviceTypeCode'
});

Answer 2

columnDef 是一个数组，您只需按要显示的相同顺序推送列。对于动态推送列，你需要通过数据和代码来处理这些情况。

在 Ui 网格 Angular 中定义列位置

Define column position in Ui grid Angular

angularjs

angular-ui-grid