如何合并UI网格中的列? [英] How can I merge columns in UI-grid?

问题描述

是否有任何方法可以合并UI-grid的列以显示为连续行(之间没有任何列线).我已经试过了在ui网格中合并列

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

但这会导致我丢失行号为1的行数据.我还希望合并每一个备用行.

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

这是我的HTML

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>

这是我的网格js代码

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

请给我一些建议，谢谢

推荐答案

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

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

这是完成实施的代码笔 http://codepen.io/vkvicky-vasudev/pen/LRPNyL

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

如果需要更换蚂蚁，请随时告诉我

If ant change required feel free to inform me

这篇关于如何合并UI网格中的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！