如何合併UI網格中的列？

有沒有什麼辦法可以將UI網格的列合併顯示爲連續的行（中間沒有任何列線）。我試過這個 merge columns in ui grid 如何合併UI網格中的列？

但是這會導致我丟失行號爲1的行數據。甚至更多我想每個備用行都被合併。

這裏是我的HTML

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

這裏是我的網JS代碼

$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', 
    } 
    ] 
};

請建議我的東西，謝謝

來源

2016-08-30 Sameer Khan

嗨，薩米爾你要合併列或只是你想要列出現連續的列無邊界？ –

任何兩個將工作，但我希望每一個備用行被合併 –

你可以用例子來解釋它，我得到的是第一和第二行應該作爲一行，第三和第四行應該作爲第二行？ –

要實現它，而使用邏輯本來我們有數組，我們合併網格顯示網格本身

創建數組，我們可以合併數據，以便在電網，我們可以得到合併的數據

$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); 
}

這裏代碼筆完成實施 http://codepen.io/vkvicky-vasudev/pen/LRPNyL

如果需要改變螞蟻隨時通知我

來源

2016-08-30 07:41:53

如何合併UI網格中的列？

回答

相關問題