Определить положение столбца в сетке пользовательского интерфейса Angular

вот как я определил один из моих столбцов в сетке пользовательского интерфейса:

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

Есть идеи ?

Спасибо


angularjs angular-ui-grid
person Sadeghbayan    schedule 11.05.2015    source источник
comment
Можете ли вы более четко указать, какие позиции для столбцов вы хотите? Также вы динамически добавляете новые столбцы в сетку?   -  person kachhalimbu    schedule 11.05.2015
comment
предположим, что столбец должен быть таким: col1 col2 dynamic-col col3, но теперь это похоже на: dynamic-col col1 col2 col 3   -  person Sadeghbayan    schedule 11.05.2015

Ответы (2)


arrow_upward
2
arrow_downward

Используйте функцию splice, чтобы вставить новые определения столбцов в нужное место.

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

Код выше добавляет новый столбец во вторую позицию. См. пример из руководства по uioo-grid.

ОБНОВЛЕНИЕ: для вашего этого требования «предположим, что столбец должен быть таким: col1 col2 dynamic-col col3, но теперь он похож на: 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'
});
person kachhalimbu    schedule 11.05.2015
comment
это нормально, но я не могу переместить статический столбец? - person Sadeghbayan; 11.05.2015
comment
columDef — это просто массив JS. Расположите его так, как хотите, и столбцы будут отображаться соответственно. Я не уверен, что еще вы ожидаете. Вы сами определяете порядок отображения столбцов. - person kachhalimbu; 11.05.2015

arrow_upward
1
arrow_downward

columnDef - это массив, и вам нужно просто вставить столбцы в той же последовательности, в которой вы хотите показать. Для динамических столбцов необходимо обрабатывать эти случаи с помощью данных и кода.

person Subhash Kumar    schedule 11.05.2015
comment
так ты имеешь в виду, что это невозможно? - person Sadeghbayan; 11.05.2015
comment
Да.. вам просто нужно установить массив в соответствии с вашими требованиями.. Другого способа изменить последовательность нет.. - person Subhash Kumar; 11.05.2015
comment
В приведенном выше ответе просто изменение позиций массива, а не что-то еще.. в коде есть много способов изменить массив, но нет возможности установить последовательность отображения.. если вы знаете, поделитесь со мной.. - person Subhash Kumar; 11.05.2015