AngularJS

Question

में फिक्स्ड हेडर टेबल मैं एक निश्चित शीर्षलेख तालिका से संबंधित किसी समस्या पर फंस गया हूं। मैं एक वेब अनुप्रयोग बनाने के लिए AngularJS & बूटस्ट्रैप का उपयोग कर रहा हूं। मैं ng-grid का उपयोग नहीं कर सकता क्योंकि यह आईई 7 का समर्थन नहीं करता है। इसलिए, मैं तालिका पंक्तियों को ng-repeat द्वारा पॉप्युलेट कर रहा हूं। आवेदन उत्तरदायी है। इसलिए, मैं कोशिकाओं/शीर्षकों को निश्चित चौड़ाई नहीं दे सकता। टेबल हेडर तय करने का कोई आसान तरीका है?

मैं अग्रिम में Fixed header table with AngularJS

धन्यवाद एक Plunker ऊपर डाल दिया।

Answer 1

आप तालिका के बाहर हेडर भाग रखना बेहतर है।

• हेडर के लिए एक और
• तालिका डेटा के लिए एक और एक: दो तालिकाओं लो। (स्क्रॉलर को केवल टेबल डेटा भाग में रखें।)

शुभकामनाएं! https://github.com/objectcomputing/FixedHeader

इस कार्यान्वयन नहीं के रूप में कुछ के रूप में पूरी तरह से चित्रित किया है:

Answer 2

एक सह कार्यकर्ता और मैं एक नया GitHub परियोजना है कि एक कोणीय निर्देश है कि आप तय हेडर के साथ अपनी मेज सजाने के लिए उपयोग कर सकते हैं की आपूर्ति अभी जारी किया है अन्य कार्यान्वयन, लेकिन यदि आपकी आवश्यकता केवल निश्चित सारणी जोड़ने के लिए है, तो हमें लगता है कि यह एक अच्छा विकल्प हो सकता है।

Answer 3

मैं हाल ही में इस के लिए एक निर्देश बनाए हैं तो आप बोवर का उपयोग कर इसे स्थापित कर सकते हैं:

bower install angu-fixed-header-table 

अधिक जानकारी के लिए और एक काम उदाहरण आप http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

Answer 4

पर अपने ब्लॉग पोस्ट को देख सकता मैं कुमार के सुझाव का इस्तेमाल किया और बनाया दो टेबल। एक में थैड होता है, और दूसरे में थैड और टोड दोनों होते हैं।

<div ng-style="{'margin-right': scrollBarWidth}"> 
    <table> 
     <thead> 
     <tr> 
      <th width="{{tableSizes[0].width}}">Col0</th> 
      <th width="{{tableSizes[1].width}}">Col1</th> 
      <th width="{{tableSizes[2].width}}">Col2</th> 
     </tr> 
     </thead> 
    </table> 
</div> 
<div class="fixedHeadBody"> 
    <table ng-style="{'margin-top': -rowSize.height}"> 
     <thead> 
     <tr el-size="rowSize"> 
      <th el-size="{{tableSizes[0].width}}">Col0</th> 
      <th el-size="{{tableSizes[1].width}}">Col1</th> 
      <th el-size="{{tableSizes[2].width}}">Col2</th> 
     </tr> 
     </thead> 
     <tbody> 
     <!-- data goes here --> 
     </tbody> 
    </table> 
</div> 

दूसरे के आधार पर, मैंने एक निर्देश जोड़ा (नीचे देखें) जो प्रत्येक कॉलम की चौड़ाई और ऊंचाई को देखता है। इन कॉलम का आउटपुट पहले थैड (कोणीय बाध्यकारी) की चौड़ाई निर्धारित करने के लिए उपयोग किया जाता है। मैंने दूसरी तालिका के थैड टी को भी वही निर्देश जोड़ा, और दूसरी तालिका के स्क्रोल करने योग्य थैड को छिपाने के लिए ऊंचाई मान का उपयोग किया। इस तरह, मैं केवल पहले थैड को दिखाता हूं जो तय है।

स्क्रॉलबार को हल करने के लिए मुझे एक और चीज़ थी। स्क्रॉल बार स्थान लेता है और जो कॉलम को पहले और दूसरी तालिका के बीच गलत तरीके से गलत करता है। इसे ठीक करने के लिए, मैंने शीर्ष तालिका के मार्जिन-दाएं को जोड़ा जो स्क्रॉल बार की चौड़ाई के बराबर है (तालिका और तालिका वाले div के बीच चौड़ाई अंतर)। स्क्रॉलबार चौड़ाई ब्राउज़र के बीच बदलती है और अंतिम फ़ंक्शन किसी भी ब्राउज़र के लिए काम करता है।

app.directive('elSize', ['$parse', '$timeout', function ($parse, $timeout) { 
    return function(scope, elem, attrs) { 
     var fn = $parse(attrs.elSize); 

     scope.$watch(function() { 
      return { width: elem.innerWidth(), height: elem.innerHeight() }; 
     }, 
     function (size) { 
      fn.assign(scope, size); 
     }, true); 
    } 
}]) 

नियंत्रक के भीतर, आप नीचे दिए गए फ़ंक्शन का उपयोग करके scrollBarWidth सेट कर सकते हैं। एक बार टेबल प्रस्तुत किए जाने के बाद आप $ scope.setScrollBarWidth() को कॉल कर सकते हैं।

$scope.scrollBarWidth = "5px"; 
    $scope.setScrollBarWidth = function() { 
     $timeout(function() { 
      var divWidth = $(".fixedHeadBody").width(); 
      var tableWidth = $(".fixedHeadBody table").width(); 
      var diff = divWidth - tableWidth; 
      if (diff > 0) $scope.scrollBarWidth = diff + "px"; 
     }, 300); 
    } 

Answer 5

ठीक है, क्या यह $ घड़ी और jQuery का उपयोग करके गंदा तरीका है।

बस अपने टेबल हेडर को डुप्लिकेट करें और इसे चिपचिपा बनाएं। यह सही नहीं है लेकिन यह उद्देश्य को पूरा करता है। http://jsfiddle.net/jchnxu/w1n1fp97/7/

// watch the width of table headers 
     scope.$watch(function() { 
      return { 
      width: $(th).innerWidth(), 
      height: $(th).innerHeight() 
      }; 
     }, function(size) { 
      console.log(size); 
      $($stickyThs[i]).attr('width', size.width); 
     }, true); 

// also watch the table width 
     scope.$watch(function() { 
     return $bodyTable.innerWidth(); 
     }, function(width) { 
     $headerTable.css('width', width + 'px'); 
     }); 

Answer 6

आप उत्कृष्ट ag-Grid लाइब्रेरी का उपयोग कर सकते हैं:

यहाँ बेला है।

agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php 
angular.module('myApp', ['agGrid']) 

फिर अपने नियंत्रक में इस प्रकार के एक gridOptions (या अन्य चर नाम) को परिभाषित:

var nbCols = 10, 
    nbLines = 300, 
    list = [], 
    cols = [], 
    columnDefs = [], 
    i, j; 

for (i = 0 ; i < nbCols ; i++) { 
    var fieldName = 'col' + i; 
    cols.push(fieldName); 
    columnDefs.push({ 
     headerName: 'Col' + i, 
     field: fieldName, 
     editable: true 
    }); 
} 
for (i = 0 ; i < nbLines ; i++) { 
    var elem = {}; 
    for (j = 0 ; j < nbCols ; j++) { 
     elem[cols[j]] = 'content '+i+'-'+j; 
    } 
    list.push(elem); 
} 
$scope.list = list; 
$scope.cols = cols; 

$scope.gridOptions = { 
    columnDefs: columnDefs, 
    rowData: list, 
    singleClickEdit: true 
}; 

और अंत में अपने HTML में इस तरह अपनी मेज निर्धारित करें:

<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>