[英]How to create Hyperlink for the table row in angular data tables
In my Scenario, I wants to apply the hyperlink for the full table row, right now its working fine for table columns in a row but I wants to apply it to the whole row not only to columns. 在我的方案中,我想将超链接应用于整个表行,现在,它对于一行中的表列都可以正常工作,但是我希望将其不仅应用于列,还应用于整个行。 In my case where ever in the table row clicked it needs to open the details page of the entities for example, A1, A2 such as.
就我而言,在表行中单击过的它需要打开实体的详细信息页面,例如,诸如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;
}
}
]
});
You can use ng-smart-table component for listing data if you are building application in angular2 or plus version. 如果要在angular2或plus版本中构建应用程序,则可以使用ng-smart-table组件列出数据。 You can give link for edit in that in easy way too.
您也可以通过简单的方式提供编辑链接。 Also sorting and pagination is in-build.
排序和分页也是内置的。
You can find the component detail here. 您可以在此处找到组件详细信息。 https://www.npmjs.com/package/ng2-smart-table
https://www.npmjs.com/package/ng2-smart-table
//apply click event on that like below //像下面这样对它应用click事件
$('#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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.