테이블의 모든 선택 요소를 해당 열의 가장 넓은 요소와 동일한 너비로 설정하십시오.

Question

디자인 요구 사항으로, 주어진 열의 모든 선택 요소가 가장 넓은 선택을 사용하여 동일한 너비인지 확인해야합니다 그 열에 그들을 설정합니다.

예 :

의 폭은 동일한 열에서 그 외 일치하고 안 전체 테이블의 넓은 <select> 일치한다.

내가 (아래 참조) 작동합니다 것 같다 기능을 날조했지만,이 전에 페이지 데이터를 다시로드, 내가 스틱 상관없이 을 실행합니다.

함수 호출은 현재 getData 함수 끝에 ngTableParams입니다.

기능 :

$scope.resizeInputs = function(table, inputType) { 
    var cols = [], 
     rows = table+" tbody tr"; 

    angular.forEach($(rows), function(element, key, obj) { 
     $(element).find('td').each(function(i, el) { 
      var thisInput = $(el).find(inputType), 
       currentWidth = cols[i] == null ? null : cols[i], 
       maxWidth = Math.max(currentWidth, $(thisInput).width()); 

      if (thisInput.length > 0 && maxWidth > 0) { 
       cols[i] = maxWidth; 
      } 
     }); 
    }); 

    $.each(cols, function(index, el) { 
     if (el != undefined) { 
      var x = index + 1; 
      $(rows).children('td:nth-child('+x+')').find(inputType).width(el); 
     } 
    }); 
} 

편집 : GetData의 기능 :

$scope.searchTable = function(){ 
    $scope.doSelectFunctions = true; 
    $scope.copySendDate = null; 
    var today = new Date(); 
    todayStr = (today.getMonth() + 1) + "/" + today.getDate() + "/" + today.getFullYear(); 
    searchCriteria = { 
//    startDate: toStartTimeStamp(todayStr), 
      startDate: toStartTimeStamp("11/01/2014"), 
      endDate: toEndTimeStamp(todayStr) 
    }; 

    $scope.tableParams = new ngTableParams({ 
     count: 100,   // Default results per page, down from 1000! 
     sorting: { 
      pending: 'desc', 
      campaignId: 'desc', 
      } 
     },{ 
     getData: function($defer, params) { 
      // ajax request to api 
      $timeout(function() { 
       Report.search(searchCriteria, function(data) { 
        angular.forEach(data, function(v,k) { 
         $scope.doCampaignInfo(v); 

         if (pageData.bulkProfileData.length == 0) { 
          pageData.bulkProfileData.push({ioOfferId:v.ioOfferId, profileId:v.profileId}); 
         } 
         else if (v.ioOfferId != null && v.profileId != null) { 
          var stop = pageData.bulkProfileData.length, 
           ioOfferIdFound = false, 
           profileIdFound = false; 

          for (var i = 0; i< stop; i++) { 
           if (pageData.bulkProfileData[i].ioOfferId == v.ioOfferId) { 
            ioOfferIdFound = true; 
           } 
           if (pageData.bulkProfileData[i].profileId == v.profileId) { 
            profileIdFound = true; 
           } 
          } 

          if (!ioOfferIdFound || !profileIdFound) { 
           pageData.bulkProfileData.push({ioOfferId:v.ioOfferId, profileId:v.profileId}) 
          } 
         } 
        }); 

        $scope.campaignData = data; 
        $scope.doProfileAssetStats($scope.campaignData);       
        $scope.searchDone = true; 
        $scope.dataLoading = false; 

        // Sort the data 
        var orderedData = params.sorting ? $filter('orderBy')(data, params.orderBy()) : data; 

        // Filter the data 
        orderedData = $filter('campaignStatusFilter')(orderedData, $scope.campaignStatusForFilter); 
        orderedData = $filter('filter')(orderedData, $scope.tblSearch); 

        // Update table params 
        params.total(orderedData.length); 

        // Slice off the data for the current page 
        $scope.campaignData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 

        // Set the lastPage 
        $scope.lastPage = Math.ceil($scope.tableParams.total()/$scope.tableParams.count()); 

        // Resize all the select elements 
        $scope.resizeInputs('#search-results', 'select'); 

        // Do the stuff 
        $defer.resolve($scope.campaignData); 
       }); 
      }, 50); 
     } 
    }); 
}; 

내가 대신 순수 각도 솔루션을 사용할 수 있다면, 내가 좋겠 훨씬 선호한다. 각 열의 선택 요소를 바인딩하여 동일한 너비를 공유하는 방법이 있습니까? 가능한 경우 다른 값을 선택하면 <select>의 너비가 변경되므로 이것이 가장 좋습니다!

감사합니다.

Answer 1

나는 이것이 간단한 CSS 지시어로 할 수 있다고 생각한다.

select { 
    display: block; 
    width: 100%; 
} 

하지 않으면, 어쩌면 자신의 코드의이 버전 : -

에서 함수를 트리거하려면 http://jsfiddle.net/Lenkhvvp/

편집을 ...

$scope.resizeInputs = function(table, inputType) { 
    var cols = [], 
     rows = table + " tbody tr"; 
    $(rows).each(function(i, tr) { 
     $(tr).find('td').each(function(i, td) { 
      cols[i] = Math.max(cols[i] || 0, $(td).find(inputType).width() || 0); 
     }); 
    }).each(function(i, tr) { 
     $(tr).find('td').each(function(i, td) { 
      $(td).find(inputType).width(cols[i]); 
     }); 
    }); 
} 

작동하는 것 같다 다이제스트주기는 다음과 같이 작성하십시오.

function resizeInputs(table, inputType) { 
    var cols = [], 
     rows = table + " tbody tr"; 
    $(rows).each(function(i, tr) { 
     $(tr).find('td').each(function(i, td) { 
      cols[i] = Math.max(cols[i] || 0, $(td).find(inputType).width() || 0); 
     }); 
    }).each(function(i, tr) { 
     $(tr).find('td').each(function(i, td) { 
      $(td).find(inputType).width(cols[i]); 
     }); 
    }); 
} 

과 $watch 설정 :

$rootScope.$watch(resizeInputs.bind(null, '#myTable', 'select')); 

편집 2 ...

당신은 "감시자"절반은 "리사이로, 중간 아래 기능을 절단 할 수 있어야한다 "절반.

내가 알고 있듯이, 감시자는 항상 다이제스트 당 한 번 실행되지만 관찰자로부터 "감시중인 값"을 반환하여 관찰 된 변경 사항 당 한 번 실행되도록 만들 수 있습니다. 그러나 각도 문서화의 예와 달리 우리의 "가치관"은 배열, 즉 cols입니다. cols을 간단히 반환 할 수 있지만 cols.join()을 반환하는 것이 좋을 것이며 이전 값과 비교하기가 더 쉽습니다.

다시 말하지만, 반환 값 비교는 각도에 의해 자동으로 수행되며, 수동 비교는 초기화시 바람직하지 않은 영향을 억제하기 위해서만 필요합니다. 그러나 코드 작성을 귀찮게 할 수만 있다면 비교 작업에 아무런 해가 없습니다.

함께 모든 퍼팅, 나는 다음에 도착 :

function watcher(table, inputType) { 
    var cols = [], 
     rows = table + " tbody tr"; 
    $(rows).each(function(i, tr) { 
     $(tr).find('td').each(function(i, td) { 
      cols[i] = Math.max(cols[i] || 0, $(td).find(inputType).width() || 0); 
     }); 
    }); 
    return cols.join(); 
} 
function resizer(table, inputType, oldValue, newValue) { 
    if(newValue !== oldValue) { 
     var cols = newValue.split(','), 
      rows = table + " tbody tr"; 
     $(rows).each(function(i, tr) { 
      $(tr).find('td').each(function(i, td) { 
       $(td).find(inputType).width(cols[i]); 
      }); 
     }); 
    } 
} 

이제, 우리는 "$ 시계"문은 두 개의 매개 변수 값 바운드 각각있는 기능을 제공 할 수 있습니다.

$rootScope.$watch(
    watcher.bind(null, '#search-results', 'select'), 
    resizer.bind(null, '#search-results', 'select') 
);