Question

我有一个包含这样一列的表：

{
                 "render": function(d,t,r){
                     var $select = $("<select></select>", {
                         "id": r[0]+"start",
                         "value": d
                     });
                     $.each(statuslist, function (Value, Text) {
                         var opt = '<option value=' + Text.Value + '>' + Text.Text + '</option>';
                         if (Text.Text === r[3]){
                             $(opt).prop("selected", true);
                         }
                         $select.append(opt);
                     });
                     $select.attr("id", "opt" + r[0]);
                     $("#opt" + r[0]).on('change', function(){
                         SetStatus(r[0]);
                     });
                     return $select.prop("outerHTML");
                 }
             },

状态列表是四个文本值对的列表。第四列是行的状态文本，我正在尝试选择该行。此外，当select的值发生变化时，我试图捕获事件。这不起作用。有什么想法吗？

Answer 1

有几个问题

您将事件处理程序附加到错误的元素（idXXX vs XXXstart）。
您将事件处理程序附加到错误的位置，render可以多次调用回调。

我建议将事件处理程序移出表初始化代码。

例如：

$('#example').DataTable({
   // ... skipped ...
   columns: [
      // ... skipped ...
      {            
         "render": function(data, type, full, meta){
            var $select = $('<select/>', { 'class': 'ctrl-status' });
            $.each(statuslist, function (Value, Text) {
               var $opt = $('<option/>', { 'value': Text.Value, 'text': Text.Text });
               if (Text.Text === full[3]){
                  $opt.attr("selected", "selected");
               }
               $select.append($opt);
            });
            return $select.prop("outerHTML");
         }
      }
   ]
});

// Handle change event for status selection control
$('#example').on('change', '.ctrl-status', function(){
    var data = $('#example').DataTable().row($(this).closest('tr')).data();
    SetStatus(data[0]);
});

请参阅this example以获取代码和演示。

使用事件操作在DataTables中创建下拉列表

1 个答案: