कोणीय यूई-ग्रिड के कॉलम दृश्यता

Question

बदलें ग्रिड के बाद कॉलम दिखाना/छुपाएं। इससे पहले कि मैं नए यूई-ग्रिड में स्थानांतरित हो गया, मैंने toggleVisible() पर कॉल किया लेकिन अब यह काम नहीं कर रहा है। मैं की तरह

columnDefs[9].visible = false; 

जब मैं स्तंभ परिभाषा पर दृश्यता सेट bellow (से पहले प्रस्तुत करना) स्तंभ डीईएफ़ दृश्यता (या किसी अन्य संपत्ति) को बदलने के लिए यह काम करता है की कोशिश की है, लेकिन वार्ड के बाद मैं इसे बदल नहीं सकते।

Answer 1

बस angular-ui-grid के साथ काम करना शुरू किया ताकि यह सबसे अच्छा समाधान न हो। uiGrid एपीआई वस्तु सहित और फिर एक grid वस्तु

... 
$scope.gridOptions.onRegisterApi = function(gridApi){ 
    $scope.gridApi = gridApi; 
}; 
.... 
columnDefs[9].visible = false; 
$scope.gridApi.grid.refresh(); 

Answer 2

पुराना सवाल पर refersh विधि लागू है, लेकिन इस 3.0.0-rc.20 में मेरे लिए काम करता

प्रयास करें। मैं अनुमान लगा रहा हूं कि कॉलम डिफ को दायरे में होना चाहिए।

$scope.columnDefs = [ 
    { name: 'one' }, 
    { name: 'two', visible: false } 
]; 

$scope.grid = { 
    data: 'data', 
    columnDefs: $scope.columnDefs 
}; 

$scope.grid.onRegisterApi = function(gridApi){ 
    $scope.gridApi = gridApi; 
};  

$scope.showColumnTwo = function() { 
    $scope.columnDefs[1].visible = true; 
    $scope.gridApi.grid.refresh(); 
}; 

Answer 3

यदि कोई ऐसा समाधान ढूंढ रहा था जिस पर आपको columndDef बनाने की आवश्यकता नहीं है।

s.gridOptions = { 
    data: 'myData', 
    onRegisterApi: function(gridApi) { 
     gridApi.core.registerColumnsProcessor(hideIdColumn); 
     s.gridApi = gridApi; 

     function hideIdColumn(columns){ 
      columns.forEach(function(column){ 
      if(column.field==='_id'){ 
       column.visible=false; 
      } 
      }); 
      return columns; 
     } 

    } 

बस अपनी स्थिति के साथ कॉलम.फील्ड === '_ आईडी' भाग को प्रतिस्थापित करें। कॉलम वापस करने के लिए भी मत भूलना या आपको कोई कॉलम नहीं मिलेगा।

Answer 4

user3310980 से जवाब पसंद किया जाता था जब मैंने उसे देखा था, लेकिन वहाँ registerColumnsProcessor विधि पर बहुत कम प्रलेखन है। मुझे स्तंभ परिभाषाओं के बिना इसका उपयोग करने के बारे में उनकी टिप्पणी का संदर्भ मिला, इसलिए मैं यह स्पष्ट करना चाहता था कि आप निश्चित रूप से कॉलम डीफ़ के साथ इस विधि का उपयोग कर सकते हैं। यह कुछ रोचक लचीलापन प्रदान करता है।

इस उदाहरण में, चार स्तंभ हैं जो टॉगल बटन द्वारा निर्धारित चार अन्य स्तंभों के साथ स्वैप करते हैं। $ctrl.showDetailstrue है जब बिक्री कॉलम प्रदर्शित होना चाहिए और भुगतान आइटम प्रदर्शित होने पर false।

स्तंभ परिभाषाओं में, onRefresh संपत्ति ग्रिड ताज़ा करने पर स्तंभ और setVisibleColumns विधि के लिए कॉल करने के लिए एक विधि के रूप में परिभाषित किया गया registerColumnsProcessor() लिए आपूर्ति की है। जब ग्रिड ताजा है, प्रत्येक स्तंभ के लिए, यह स्तंभ परिभाषा colDef संपत्ति में this स्तंभ वस्तु के लिए सेट के साथ की जाँच करें और प्रत्येक स्तंभ में उसके द्वारा निर्धारित के लिए onRefresh विधि कॉल करेंगे।

/*--------------------------------------------*/ 
/* showPayments - Make payment items visible. */ 
/* showDetails - Make sales items visible. */ 
/*--------------------------------------------*/ 
var showPayments = function() { this.visible = !$ctrl.showDetails; }; 
var showDetails = function() { this.visible = $ctrl.showDetails; }; 

var columnDefs = 
    [ 
    { field: 'receiptDate', displayName: 'Date',  width: 120, type: 'date', cellFilter: "date:'MM/dd/yyyy'", filterCellFiltered: true }, 
    { field: 'receiptNumber', displayName: 'Rcpt No', width: 60, type: 'number' }, 
    { field: 'receiptFrom', displayName: 'From',  width: 185, type: 'string' }, 
    { field: 'paymentMethod', displayName: 'Method', width: 60, type: 'string', onRefresh: showPayments }, 
    { field: 'checkNumber', displayName: 'No',  width: 60, type: 'string', onRefresh: showPayments }, 
    { field: 'checkName',  displayName: 'Name',  width: 185, type: 'string', onRefresh: showPayments }, 
    { field: 'paymentAmount', displayName: 'Amount', width: 70, type: 'string', onRefresh: showPayments }, 
    { field: 'description', displayName: 'Desc',  width: 100, type: 'string', onRefresh: showDetails }, 
    { field: 'accountNumber', displayName: 'Acct No', width: 80, type: 'string', onRefresh: showDetails }, 
    { field: 'accountName', displayName: 'Acct Name', width: 160, type: 'string', onRefresh: showDetails }, 
    { field: 'salesTotal',  displayName: 'Amount', width: 70, type: 'string', onRefresh: showDetails } 
    ]; 

/*----------------------------------------------------*/ 
/* Columns processor method called on grid refresh to */ 
/* call onRefresh' method for each column if defined. */ 
/*----------------------------------------------------*/ 
var setVisibleColumns = function(cols) 
    { 
    for (var i=0; i < cols.length; i++) 
    if (cols[i].colDef.onRefresh) 
     cols[i].colDef.onRefresh.call(cols[i]); 
    return cols; 
    }; 

/*----------------------------------*/ 
/* Callback to set grid API in  */ 
/* scope and add columns processor. */ 
/*----------------------------------*/ 
var onRegisterApi = function(api) 
    { 
    $ctrl.itemList.api = api; 
    api.core.registerColumnsProcessor(setVisibleColumns); 
    }; 

/*------------------------------*/ 
/* Configure receipt item grid. */ 
/*------------------------------*/ 
$ctrl.showDetails = false; 
$ctrl.itemList = 
    { 
    columnDefs:    columnDefs, 
    enableCellEdit:   false, 
    enableColumnMenus:   false, 
    enableFiltering:   false, 
    enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
    enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
    data:      [], 
    onRegisterApi:    onRegisterApi 
    }; 

जब $ctrl.showDetails बदल गया है, एक साधारण ताज़ा कॉलम स्वैप जाएगा।

$ctrl.showDetails = !$ctrl.showDetails; 
$ctrl.itemList.api.grid.refresh(); 

मुझे आशा है कि यह किसी के लिए सहायक होगा।