数据表;添加图标以选择行 [英] DataTable; adding icon to select rows

问题描述

我在行中有特定的列，我想在文本的左侧添加图像.此人( jQuery DataTables在每列中添加了国家图标)具有确切的同样的问题.他想在一个单元格中的文本左侧添加标志图标.我想做基本上相同的事情(但没有标志图标).如果每列都将有一个图像，我将在表中创建另一行，但是某些列不应包含图标，因此在这种情况下，这实际上不是一个选择.

I have specific columns in rows where I want to add images to the left of the text. This person (jQuery DataTables add country icons each column) had the exact same problem. He wanted to add flags icon to the left of the text within a cell; I want to do basically the same thing (but no flag icons). If every column was going to have an image I would just create another row within the table, but some columns should not have icons so that isn't really an option in this case.

到目前为止，在数据表选项中，我正在执行以下操作:

So far in my datatable options I'm doing the following:

  options = {
    "createdRow": function(row, data, index){
      var sharedArray = scope.$eval(attrs.sharedData);
      var rowValue = data[1] + "_" + data[0];
      if ($.inArray(rowValue, sharedArray) != -1){
        $('td', row).eq(0).addClass('shared');
      }
    }

在这一点上，我最初考虑使用css向.shared元素添加背景图片，但是遇到两个问题，最重要的是，如果背景图片是设置图标.

At this point I initially thought to use css to add a background image to the .shared element but I ran into two problems, the most important of which it was impossible to add an event on hover if the background image was what was setting the icon.

然后我尝试在行之前创建跨度

I then tried to create a span before the row

$(row).prepend('<span class="shared-icon"></span>');

希望随后将背景图像和悬停事件添加到跨度，但是将其添加到TR中会导致行及其各自的标题出现巨大的间距问题.

hoping to then add a background image and hover event to the span, but adding this within the TR caused huge spacing issues with the rows and their respective headers.

我认为我缺少一些相对简单的东西，但是由于使用了不同的数据表功能，已经停留了几个小时.有想法吗?

I figure I'm missing something relatively simple but have been stuck for a few hours now playing with different datatable functionalities. Thoughts?

推荐答案

我不知道为什么以前我的头脑没有工作；为什么?我今天解决了这个问题，十分钟之内就完成了这项工作.

I have no idea why my mind wasn't working before; I worked on this problem today and within ten minutes I had this working.

    "createdRow": function(row, data, index){
      var sharedArray = scope.$eval(attrs.sharedData);
      var rowValue = data[1] + "_" + data[0];
      if ($.inArray(rowValue, sharedArray) != -1){
        var data = $('td', row).eq(0).html();
        $('td', row).eq(0).html("<span class='glyphicon glyphicon-asterisk'></span>" + data);
      + data }

这篇关于数据表;添加图标以选择行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！