prime-ui - 如何在primeui数据表中使列的数据成为可点击的

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 中的 Web 组件替代方案将是；

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