How can I merge columns in UI-grid?

问题

Is there any way to merge the columns of UI-grid to be appear as continuous row (without any column line in between). I have tried this merge columns in ui grid

but this causes me loss of row data at row number number 1. Even more I want every alternate row to be merged.

Here is my Html

<div id="grid" ui-grid="gridOptions" ui-grid-move-columns ui-grid-resize-columns ui-grid-auto-resize class="grid"></div>

Here is my js code for grid

$scope.gridOptions = {
    enableColumnResizing: true,
    enableRowHeaderSelection: false,
    enableGridMenu: true,
    enableHorizontalScrollbar: 0,
    enableVerticalScrollbar: 2,
    enableColumnMenus: false,
    enableRowSelection: true,
    columnDefs: [
   {
       name: 'Code',
       field: 'Code',
   }, {
       name: 'Title',
       field: 'Title',
   }, {
       name: 'Visits',
       field: 'Visit',
   }, {
       name: 'UsedVisits',
       field: 'usedVisits',
   }, {
       name: 'Pending Visits',
       field: 'pendingVisits',
   }, {
       name: 'Available Visits',
       field: 'availableVisits',
   }, {
       name: 'Start Date',
       field: 'StartDate',
   }, {
       name: 'End Date',
       field: 'EndDate',
   }, {
       name: 'Status',
       field: 'Status',
   }
    ]
};

Please suggest me something, Thank you

回答1:

To implement it we can merge data while creating array for grid itself

using logic originally we have array which we merge to show in grid so that in grid we can get merged data

  $scope.myData = [{name: "1Abcd", age: "one", gender:2},
               {name: "2Tom", age: "two", gender:1},
               {name: "3Abcd", age: "three", gender:2},
               {name: "4Abcd", age: "four", gender:2},
               {name: "5Abcd", age: "five", gender:2},
               {name: "6Abcd", age: "six", gender:2},
               {name: "7Abcd", age: "seven", gender:2},
               {name: "8Abcd", age: "eight", gender:2},
               {name: "9Abcd", age: "nine", gender:2},

              ];

$scope.myDataNew =[]     ;    

for(var i=0;i<(($scope.myData.length/2)+1);i++){
var tempObj ={};
if($scope.myData[i*2] && $scope.myData[i*2].name && $scope.myData[i*2+1] &&$scope.myData[i*2+1].name){
 tempObj.name =$scope.myData[i*2].name+$scope.myData[i*2+1].name ;
 }
 else if($scope.myData[i*2] && $scope.myData[i*2].name &&    !$scope.myData[i*2+1] ){
tempObj.name =$scope.myData[i*2].name;
 }
if($scope.myData[i*2] && $scope.myData[i*2].age && $scope.myData[i*2+1]    &&$scope.myData[i*2+1].age){
tempObj.age =$scope.myData[i*2].age+$scope.myData[i*2+1].age ;
}else if($scope.myData[i*2] && $scope.myData[i*2].age &&    !$scope.myData[i*2+1] )
{
tempObj.age =$scope.myData[i*2].age;
}

$scope.myDataNew.push(tempObj);
}

here is code pen for completed implementation http://codepen.io/vkvicky-vasudev/pen/LRPNyL

If ant change required feel free to inform me

来源：https://stackoverflow.com/questions/39218778/how-can-i-merge-columns-in-ui-grid

标签

angularjs

ui-grid