Question

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

Answer 1

为了实现它，我们可以在为网格本身创建数组时合并数据

使用逻辑最初我们有合并在网格中显示的数组，以便在网格中我们可以获得合并数据

  $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

如果需要更改蚂蚁，请随时通知我

How can I merge columns in UI-grid?

1 个答案: