Question

在我的数据表自定义指令中，我在单元格中有三个操作图标。

$(document).ready(function () {
  var oTable = $("#elem").dataTable({
    'bJQueryUI': false,
    'sScrollY': '300px',
    'bScrollInfinite': true,
    'bSearchable': true,
    'bScrollCollapse': true,
    'sDom': 'tSi',
    "bDeferRender": true,
    'bPaginate': true,
    'aaSorting': [
      [1, 'asc']
    ],
    'aaData': scope.datasource,
    "fnRowCallback": processRow,
    "aoColumnDefs": [{
      "bSortable": true,
      "bSearchable": true,
      "sWidth": "20%",
      "sTitle": "Name",
      "sName": "name",
      "aTargets": [0],
      "mData": "name",
      "mRender": function (data, type, full) {
        return '<a href="#/Attachments/' + full.id + '">' + data + ' </a>';
      }
    }, {
      "bSortable": true,
      "bSearchable": true,
      "sWidth": "18%",
      "sTitle": "Types",
      "sName": "types",
      "aTargets": [1],
      "mData": "types"
    }, {
      "bSortable": true,
      "bSearchable": true,
      "sWidth": "10%",
      "sTitle": "File Type",
      "sName": "fileType",
      "aTargets": [2],
      "mData": "fileType"
    }, {
      "bSortable": true,
      "bSearchable": true,
      "sWidth": "18%",
      "sTitle": "Modified Time",
      "sName": "modifiedTime",
      "aTargets": [3],
      "mData": "modifiedTime"
    }, {
      "bSortable": false,
      "bSearchable": true,
      "sWidth": "25%",
      "sTitle": "Action Buttons",
      "aTargets": [4],
      "mData": "",
      "mRender": function () {
        return '<div class = "center">
        <span>
          <i class = "glyphicon-info-sign glyphicon" 
          id="info" style="color:#32a5e8" 
          onmouseover="this.style.color=\'crimson\'" 
          onmouseout="this.style.color=\'#32a5e8\'">
            </i>
          </span>      
          <i class = "glyphicon-edit glyphicon" style="color:#32a5e8"
          onmouseover="this.style.color=\'crimson\'"  
          onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
            </i>      
          <span>
            <i class = "glyphicon-remove glyphicon" style="color:#32a5e8"
            onmouseover="this.style.color=\'crimson\'" 
            onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
              </i>
            </span>
            </div>';
      }
    }]
  });

  $("#elem tbody tr td:eq(4)").on('click', function () {
    var data = oTable.fnGetData(this);
    console.log("clicked inside table -- data: ", oTable.fnGetData());

    var position = oTable.fnGetPosition(this);
    console.log("clicked position inside table -- position: ", position);

  });
});

点击“信息”图标后，我需要在弹出框中显示一条消息现在，我尝试使用fnGetPosition()方法为单元格内的所有图标返回相同的位置。如果我可以区分他们的位置值，我将很容易在“信息”图标上单击显示对话框我现在该如何使用它？还是有另一种方法可以做到这一点吗？

Answer 1

$(document).ready(function() {
         var oTable = $("#elem").dataTable({
         'bJQueryUI':false,
         'sScrollY': '300px',
         'bScrollInfinite':true,
           ..........
           ..........
});
$("#elem tbody").delegate("tr i", "click", function (e) {
        e.preventDefault();
        var self = $(this);
        var pos = self.closest('tr').index();// <-- this will give you row index.

        if (self.hasClass('glyphicon-edit')) {
                    // Do something
        }else if (self.hasClass('glyphicon-info-sign')){
                    // Do something
        }else if(self.hasClass('glyphicon-remove'){
                     // Do something 
        }
});

如何在Datatable中的单元格内显示图标单击事件的对话框？

1 个答案: