Как сделать данные столбца как кликабельные в primeui datatable

Question

Я использую данные Primeui в моем проекте, где мне нужна опция для кликабельной колонки (я имею в виду, что данные внутри колонки должны быть кликабельной), если у кого-то есть идея, как это сделать, пожалуйста, помогите мне.

заранее спасибо

Answer 1

Вам нужно использовать опцию содержимого столбца и вернуть кликабельный элемент.

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

Разметка будет;

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

Альтернатива веб-компонента в предстоящем 3.0 будет;

<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>