Question

我正在使用jQuery DataTables并添加没有Ajax的子行。问题是我在父行中显示一些信息，当点击触发器时，会显示一些可以填充的表单元素来更新帖子。

我有两个问题：

-DataTables从子数据中删除我的所有HTML。它只保留我放入格式函数的html：

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

- 子行包括父行中最后3个元素的内容（用逗号分隔）。子内容被剥夺了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 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的建议：

如果链接与行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数据。 - 我将click事件附加到元素上 - 从我的循环添加rel = row_id，以便我以后可以得到它 - 使用ajax发布row_id并将内容添加到隐藏行并显示

$('#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发布 - 然后将警报图标更改为成功图标。这很有趣： - ）

Answer 1

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

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

分叉小提琴 - ＆gt;的 http://jsfiddle.net/zyLfuk65/

然而，我无法弄清楚你为什么要这样做。没有任何合理的原因，这是多余的冗余（对不起，如果我误解！:)看起来你真的不想要一个format()方法，只是一个返回你想要显示的表单的函数。更简单，代码更少：

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);。

演示 - ＆gt;的 http://jsfiddle.net/9m3vjy8r/

包含表单字段的jQuery DataTables子行

1 个答案: