jQuery DataTables child 包含表单字段的行

Question

我正在使用 jQuery 数据表并添加 child 行但没有 Ajax。问题是我在 parent 行中显示了一些信息，当单击触发器时会显示一些可以填充以更新 post.

的表单元素

我有两个问题：

-DataTables 从 child data.It 中删除了我所有的 HTML 只保留 html 我在函数中输入的格式：

function format(value) {
    return '<div><form action="#" method="post">' + value + '<input type="submit" value="send"></form></div>';
}

-child 行包含 parent 行最后 3 个元素的内容（以逗号分隔）。 child 内容被删除 html。

<tr>
<td colspan="8">
<div>
<form method="post" action="#">
999-15-03-02,2015-03-01,92854408,RSG09LECA-ROG09LEC,
<i class=" vis_info fi-alert size-16" title="Det mangler info. Klikk for å fylle ut!" style="color: red;"></i>
,
<i class="fi-print size-16" title="Skriv ut serviceskjema" style="color:#836F6F"></i>
,
<input class="service_dato dato" type="text" rel="2" value="08-03-15" name="service_dato">
<input class="alt_dato" type="hidden" name="alt_dato">
<i class="fi-check size-14" style="display:inline"></i>
,
<input class="fakt_mont dato" type="text" rel="2" value="10-03-15" name="fakt_mont">
<input class="alt_dato" type="hidden" name="alt_dato">
<i class="fi-check size-14" style="display:inline"></i>
 <input type="submit" value="send">
</form>
</div>
</td>
</tr>

这是我的 table:

<table class="datatable display compact cell-border" id="servicetable">
    <thead>
       <th>Servicenr.</th>
       <th>Dato</th>
       <th>Mobil</th>
       <th>Pumpe</th>
       <th></th>
       <th></th>
       <th>Utført</th>
       <th>Fakturert</th>
</thead>
<tbody>
    <tr data-child-name="row0" data-child-value='<label for="service_avtalt">Avtalt dato</label><input type="text" name="service_avtalt" value=""><label for="snr_innedel">Serienr. innedel</label><input type="text" name="snr_innedel" value=""><label for="snr_utedel">Avtalt dato</label><input type="text" name="snr_utedel" value=""><label for="reg_nr">Reg.nr.</label><input type="text" name="reg_nr" value=""><label for="sist_service">Tidl.service</label><input type="text" name="sist_service" value=""><label for="sist_feil">Tidlilgere feil</label><input type="text" name="sist_feil" value=""><label for="at_innerdel">Måling av Δt over innerdel i varmedrift</label><input type="text" name="at_innerdel" value=""><label for="trykk_vdrift">Trykk varmedrift</label><input type="text" name="trykk_vdrift" value=""><label for="kommentar">Kommentar</label><input type="text" name="kommentar" value="Toshiba pumpe!!">'>
        <td>999-15-03-02</td>
        <td>2015-03-01</td>
        <td>92854408</td>
        <td>RSG09LECA-ROG09LEC</td>
        <td> <i class=" vis_info fi-alert size-16" style="color: red;" title="Det mangler info. Klikk for å fylle ut!"></i> 
        </td>
        <td class="senter"><i class="fi-print size-16" style="color:#836F6F" title="Skriv ut serviceskjema"></i>
        </td>
        <td>
            <input type="text" name="service_dato" class="service_dato dato" value="08-03-15" rel="2" />
            <input type="hidden" name="alt_dato" class="alt_dato" /> <i class="fi-check size-14" style="display:inline"></i></td>
        <td>
            <input type="text" name="fakt_mont" class="fakt_mont dato" value="10-03-15" rel="2" />
            <input type="hidden" name="alt_dato" class="alt_dato" /> <i class="fi-check size-14" style="display:inline"></i>

        </td>
    </tr>

这是我的例子： http://jsfiddle.net/asle/a2p4kmh9/14/

根据@davidkonrads 建议编辑：

如果 link 的行 ID 是这样的，我在点击功能中选择它怎么办？

<i class=" vis_info fi-alert" rel="34"></i>

$('#servicetable tbody').on('click', 'i.vis_info', function () {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    var rid = $(this).attr('rel');

$.post("code/get_child_data.php", {
        id: rid }, 
      function(data) {
        var form = (data);
    });

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    } else {
        // Open this row and use the data from get_child_data.php
        row.child(form).show();
        tr.addClass('shown');
    }
});

我忘了说隐藏行中的某些字段可能已经有数据，所以我必须为每一行获取现有（如果有）数据，还要编辑当前值。这就是为什么我需要插入这个动态。

再次编辑并开始工作 - 感谢@davidkonrads

这是现在有效的方法。我不得不四处移动函数，这样我才能获得 ajax 数据。 - 我将点击事件附加到元素 - 从我的循环中添加 rel=row_id 以便我以后可以得到它 - Post row_id 和 ajax 并将内容添加到隐藏行并显示它

$('#servicetable tbody').on('click', 'i.vis_info', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var rid = $(this).attr('rel');

$.post("code/get_service_child.lasso", {
    id: rid }, 
    function(data) {
    var form = (data); 

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row with data from $post call
        row.child(form).show();
        tr.addClass('shown');
    };
});   
} );

我还将验证表单并使用 $.post 对其进行 posting - 然后将警告图标更改为成功图标。这在工作时很有趣:-)

Answer 1

我猜你混淆了 row.data() 和 tr.attr('data-child-value')...子内容不会被删除，它永远不会被插入 - 你实际插入的是行本身的列值！ row.data() returns 一个包含列值的数组。改为这样做：

...
} else {
    // Open this row
    row.child(format(tr.attr('data-child-value'))).show();
    tr.addClass('shown');
}

分叉 fiddle -> http://jsfiddle.net/zyLfuk65/

但是，我不明白你为什么要那样做。这是一种没有任何合理原因的冗余方式（如果我误解了，请见谅！:)您似乎并不真的想要一个 format() 方法，只是一个 returns 您想要显示的形式的函数。更简单，代码更少：

var form = '<div><form action="#" method="post">' + 
'<label for="service_avtalt">Avtalt dato</label><input type="text" name="service_avtalt" value=""><br>'+
...
...
} else {
     // Open this row
     row.child(form).show();
     tr.addClass('shown');
}

这也使得使用值预填充表单变得更加容易，例如。 $(form).find('input[name="snr_utedel"]').val(someValue); 在将其插入详细信息行之前。

演示 -> http://jsfiddle.net/9m3vjy8r/

jQuery DataTables child 包含表单字段的行

jQuery DataTables child row containing form fields

jquery

datatables

jquery-datatables