Как создать гиперссылку для строки таблицы в таблицах угловых данных - PullRequest
0 голосов
/ 25 мая 2018

В моем сценарии я хочу применить гиперссылку для полной строки таблицы, сейчас она работает нормально для столбцов таблицы в строке, но я хочу применить ее ко всей строке, а не только к столбцам.В моем случае, когда в строке таблицы щелкают, нужно открыть страницу сведений о сущностях, например, A1, A2, например.

<table class="display" id="example">
    <thead>
    <tr>
        <th>Information</th>
        <th>Link</th>
    </tr>
 </thead>
</table>

var responseObj = [
 { "information": "A1", "weblink": "http://www.microsoft.com" },
    { "information": "A2", "weblink": "http://www.yahoo.com" },
    { "information": "A3", "weblink": "http://www.google.com" },
    { "information": "A4", "weblink": "http://www.duckduckgo.com" }
];

$('#example').dataTable({
 "data": responseObj,
"columns": [
      { "data": "information" }, 
      { 
     "data": "weblink",
     "render": function(data, type, row, meta){
        if(type === 'display'){
            data = '<a href="' + data + '">' + data + '</a>';
         }

            return data;
        }
     } 
 ]
});

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

// применить событие клика к этому, как показано ниже

$('#example').delegate('tbody > tr > td', 'click', function ()
{
    // 'this' refers to the current <td>, if you need information out of it
    window.open('http://example.com');
});
You'll probably want some hover event handling there as well, to give users visual feedback before they click a row.
0 голосов
/ 25 мая 2018

Вы можете использовать компонент ng-smart-table для вывода данных, если вы создаете приложение в версии angular2 или plus.Вы можете дать ссылку для редактирования в этом тоже легко.Также встроена сортировка и разбиение на страницы.

Подробную информацию о компонентах можно найти здесь.https://www.npmjs.com/package/ng2-smart-table

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...