数据表可激活oncl​​ick的单单元格编辑（第2部分）

Question

继续我以前在这里发现的问题：

Datatable activate single cell editing onclick

我终于只能得到一个单元格来激活oncl​​ick输入字段。

我的新问题是，尽管我可以单击单个单元格并激活它，但是当我使用数据表过滤器搜索或转到数据表的另一页时，单元格激活不再起作用。

$.ajax({
  url: 'api/searchVoyageInfo.php',
  type: 'POST',
  data: '',
  dataType: 'html',
  success: function(data, textStatus, jqXHR){
    var jsonObject = JSON.parse(data); 
    var table = $('#example1').DataTable({
      "data": jsonObject,
      "columns": [{ 
        { "data": "COLUMN1" },  
        { 
          "data": "COLUMN2",
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
          {
            $(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound' 
                         data-uid='"+oData.VOYID+"'>"+oData.COLUMN2+"</a>
                         <input type='text' class='editbound"+oData.VOYID+"' 
                         id='editbound' data-uid='"+oData.VOYID+"' 
                         value='"+oData.BOUND+" display: none;' />");
          }
        },
        { "data": "COLUMN3" },
        // few more columns
      }],
      "iDisplayLength": 50,
      "paging": true,
      "bDestroy": true,
      "autoWidth": true,
      "dom": 'Bfrtip',
       "buttons": [
        // some extend buttons
      ]
    });
  },
  error: function(// some stuff){
    // do some other stuff
    // this part is not important
  }
});

如果您要注意上面的COLUMN2部分，我将VOYID值添加到href的checkBound类中。我还将VOYID添加到输入的editbound类中。这样做可以防止每个checkBound类使用下面的onclick事件激活输入：

$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  var voyid = rowData.VOYID;

  console.log(voyid);

  $('.checkBound'+voyid).hide();
  $('.editbound'+voyid).show();
});

使用上述所有内容，我可以在数据表的第一页上成功激活来自单个单元格onclick的输入。但这仅适用于首页。我无法在其他任何页面上激活输入。

我尝试将onclick事件从使用类切换为ID，以实现相同的结果。

我该如何解决这个问题？

Answer 1

您可以在点击事件处理程序中隐藏链接并使用以下代码显示字段

   [Control("CommandButton")]
    class AreaActionPaneNew
    {
        void clicked()
        {
            PMCParameters   contractParameters = PMCParameters::find();
            PMETmpRentalObjectArea  groupedAreaList; // Group by area_type and cost_type
            PMERentalObjectPrice    priceList;
            date workingDate = currWorkingDate.dateValue();
            ;
            super();

            // Get grouped area values. Values are summed up by area_type and ancost_type
            groupedAreaList = PMERentalObjectAreaCl::getRentalAreaPrCostType(pmeRentalobject.RentalObjectId, userSetting.validFrom(), userSetting.validTo() , workingDate);

            ttsbegin;
            while select groupedAreaList
            {
                select forupdate firstonly priceList
                    where priceList.RentalObjectId == pmeRentalObject.RentalObjectId &&
                          priceList.RentalCostType == groupedAreaList.RentalCostTypeId &&
                          priceList.AreaType == groupedAreaList.Areatype && priceList.ValidFrom == pmeRentalObject.ValidFrom;

                if (!priceList)
                    priceList.initValue();

                priceList.RentalObjectId = pmeRentalObject.RentalObjectId;
                priceList.RentalCostType = groupedAreaList.RentalCostTypeId;
                priceList.ValidFrom      = pmeRentalobject.ValidFrom;

                priceList.AreaType       = groupedAreaList.Areatype;


   priceList.Amount         = groupedAreaList.Price;
            priceList.Area           = groupedAreaList.AreaValue;
            priceList.Quantity       = groupedAreaList.RentalQty;

            if (!priceList)
                priceList.Period  = contractParameters.ReportPeriod;

            if (priceList)
                priceList.update();
            else
                priceList.insert();
        }
        ttscommit;

        pmeRentalObjectPrice_ds.research();
    }

}