在Ui grid Angular中定义列位置

时间:2015-05-11 08:30:34

标签: angularjs angular-ui-grid

这里是我如何在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'
                        }
                );

        })
    }  

但其他col定义如下:

 $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

任何想法?

由于

2 个答案:

答案 0 :(得分:2)

使用splice功能在正确的位置插入新的列定义

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

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

中的示例

更新:对于您的要求“假设列应该是这样的: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'
});

答案 1 :(得分:1)

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