comment rendre les données de la colonne cliquables dans primeui datable

Question

J'utilise une primeui datatable dans mon projet, où j'ai besoin d'une option pour la colonne cliquable (je veux dire les données à l'intérieur de la colonne doit être cliquable) si quelqu'un a une idée comment le faire, pls m'aider.

Merci à l'avance

Answer 1

Vous devez utiliser l'option contenu d'une colonne et retourner l'élément cliquable.

var localData = [ 
      {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'}, 
      {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'}, 
      {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'}, 
      {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'}, 
      {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'}, 
      {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'}, 
      {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'}, 
      {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'}, 
      {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'}, 
      {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'} 
     ]; 

     $('#tbllocal').puidatatable({ 
      caption: 'Local Datasource', 
      columns: [ 
       {field: 'vin', headerText: 'Vin'}, 
       {field: 'brand', headerText: 'Brand', content: function(car) {return $('<a href="#">' + car.brand +'<a>')}}, 
       {field: 'year', headerText: 'Year'}, 
       {field: 'color', headerText: 'Color'} 
      ], 
      datasource: localData 
     }); 

Le balisage serait;

<div id="tbllocal"></div> 

L'alternative de composant Web dans 3.0 à venir serait;

<p-datatable datasource="DataDemo.loadAllCars" paginator rows="10" selectionmode="single" onrowselect="handleRowSelect"> 
     <p-column field="vin" headertext="Vin" sortable filter></p-column> 
     <p-column field="year" headertext="Year" sortable filter></p-column> 
     <p-column field="brand" headertext="Brand" sortable filter></p-column> 
     <p-column field="color" headertext="Color" sortable filter> 
      <script type="x-tmpl-mustache"> 
       <a href="#">{{color}}</a> 
      </script> 
     </p-column> 
    </p-datatable>