2

サーバー側の処理と非表示の詳細行を使用して、jquery-datatables-editable とともに DataTables を使用しています。

非表示の詳細行を表示するクリック可能な画像に等しい「id」が各行に与えられていることを除いて、うまく機能しています。たとえば、テーブルの各行 (firebug または chrome 要素インスペクターから表示) は次のようになります。

<tr id="&lt;img src=&quot;images/details_open.png&quot;&gt;" class="odd">
<td class="center"><img src="images/details_open.png"></td>
<td class=" sorting_1">Carpet By Joe</td>
<td class="">Joe</td><td class="">123-456-7890</td>
<td class="">ad@here.com</td>
</tr>

これがJavaScriptです:

$(document).ready(function() {
    var what = "customer";
    /* Init DataTables */
    var oTable = $('#example').dataTable({
        "bJQueryUI" : true,
        //"bProcessing" : true,
        "bServerSide" : true,
        "sPaginationType" : "full_numbers",
        "sAjaxSource" : "lib/gen.php?what=" + what,

        "aoColumns" : [{
            "sClass" : "center",
            "bSortable" : false,
        }, {
            "sName" : "name",
            "mData" : "2"
        }, {
            "sName" : "contact",
            "mData" : "3"
        }, {
            "sName" : "phone",
            "mData" : "4"
        }, {
            "sName" : "email",
            "mData" : "5"
        }],
        "aaSorting" : [[1, 'desc']]
    }).makeEditable({

        sUpdateURL : "lib/edit.php?what=" + what + "&action=edit",
        sAddURL : "lib/edit.php?what=" + what + "&action=add",
        sDeleteURL : "DeleteData.php",
        sAddDeleteToolbarSelector : ".dataTables_length",
        "oAddNewRowFormOptions" : {
            "title" : "Add A New Customer",
            "width" : 400,
            "height" : 450
        },
        "aoColumns" : [null, {
            cssclass : 'required'
        }, {
            indicator : "<img src='images/indicator.gif'>",
            tooltip : "Doubleclick to edit...",
            event : "dblclick",
            style : "inherit",

        }]
    });

    /* Formating function for row details */
    function fnFormatDetails(nTr) {
        var aData = oTable.fnGetData(nTr);
        //var id = aData[1];
        var sOut = '<div>';
        var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
        sOut += '<tr><th width="75" align="left">&nbsp;</th><th width="300" align="left">Address Information</th><th align="left">Notes</th></tr>';
        sOut += '<tr><td><strong>Address: </strong></td><td class="5"><div class="edittable">' + aData[6] + '</div></td><td  style="vertical-align: top;" class="9" rowspan="4"><div class="edittextarea">' + aData[10] + '</div></td></tr>';
        sOut += '<tr><td><strong>City: </strong></td><td class="6"><div class="edittable">' + aData[7] + '</div></td></tr>';
        sOut += '<tr><td><strong>State: </strong></td><td class="7"><div class="edittable">' + aData[8] + '</div></td></tr>';
        sOut += '<tr><td><strong>Zip: </strong></td><td class="8"><div class="edittable">' + aData[9] + '</div></td></tr>';
        sOut += '</table>';
        return sOut;
    }


    $('#example tbody td img').live('click', function() {
        var nTr = this.parentNode.parentNode;
        if (this.src.match('details_close')) {
            /* This row is already open - close it */
            this.src = "images/details_open.png";
            oTable.fnClose(nTr);
        } else {
            /* Open this row */
            this.src = "images/details_close.png";
            oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
            //make_jeditable(nTr);
        }
    });

});

これが私のサーバー側処理からの出力です(jsonは一番下にあり、これはデータテーブルに渡されるものです。配列は読みやすくするためのものです):

Array
(
    [sEcho] => 0
    [iTotalRecords] => 3
    [iTotalDisplayRecords] => 3
    [aaData] => Array
        (
            [0] => Array
                (
                    [0] => <img src="images/details_open.png">
                    [1] => 1
                    [2] => Company 1
                    [3] => Joe Bob
                    [4] => 123-456-7890
                    [5] => admin@here.com
                    [6] => 123 My Way
                    [7] => Fayetteville
                    [8] => AR
                    [9] => 12345
                    [10] => This is a note for this customer, 1
                    [extra] => hrmll
                    [DT_RowId] => 1
                )

            [1] => Array
                (
                    [0] => <img src="images/details_open.png">
                    [1] => 2
                    [2] => Aaron's Floor Cleaning
                    [3] => Aaron Man
                    [4] => (133) 456-7890
                    [5] => email@there.com
                    [6] => 321. There Way
                    [7] => Scottsdale
                    [8] => AR
                    [9] => 54327
                    [10] => This is another note, but about another customer, 36

                    [extra] => hrmll
                    [DT_RowId] => 2
                )

            [2] => Array
                (
                    [0] => <img src="images/details_open.png">
                    [1] => 4
                    [2] => Carpet By Joe
                    [3] => Joe
                    [4] => 123-456-7890
                    [5] => ad@here.com
                    [6] => 123 SW Way Over St.
                    [7] => Springfield
                    [8] => AL
                    [9] => 87654
                    [10] => This is a note here.
                    [extra] => hrmll
                    [DT_RowId] => 4
                )

        )

)

{"sEcho":0,"iTotalRecords":"3","iTotalDisplayRecords":"3","aaData":[{"0":"<img src=\"images\/details_open.png\">","1":"1","2":"Company 1","3":"Joe Bob","4":"123-456-7890","5":"admin@here.com","6":"123 My Way","7":"Fayetteville","8":"AR","9":"12345","10":"This is a note for this customer, 1","extra":"hrmll","DT_RowId":"1"},{"0":"<img src=\"images\/details_open.png\">","1":"2","2":"Aaron's Floor Cleaning","3":"Aaron Man","4":"(133) 456-7890","5":"email@there.com","6":"321. There Way","7":"Scottsdale","8":"AR","9":"54327","10":"This is another note, but about another customer, 36\n","extra":"hrmll","DT_RowId":"2"},{"0":"<img src=\"images\/details_open.png\">","1":"4","2":"Carpet By Joe","3":"Joe","4":"123-456-7890","5":"ad@here.com","6":"123 SW Way Over St.","7":"Springfield","8":"AL","9":"87654","10":"This is a note here.","extra":"hrmll","DT_RowId":"4"}]}

テーブルの HTML は次のとおりです。

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th width="4%"></th>
        <th width="25%">Customer Name</th>
        <th width="20%">Contact</th>
        <th width="20%">Phone</th>
        <th width="25%">Email</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td colspan="8" class="dataTables_empty">Loading data from server</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th></th>
        <th>Customer Name</th>
        <th>Contact</th>
        <th>Phone</th>
        <th>Email</th>
    </tr>
</tfoot>
</table>

返された情報には 'DT_RowId' 項目がありますが、行の ID に解析されません。さらに情報を提供できる場合はお知らせください。

編集:

Aktee、あなたは天才です。

私はこれを削除しました:

[0] => <img src="images/details_open.png">

サーバー側の処理から完全に、そしてあなたの提案により、私のjavascriptの上部は次のようになります。

"aoColumns" : [{
    "sClass" : "center",
    "mData": function () {
        return '<img src="images/details_open.png">';
 },
    "bSortable" : false
},

「mData」は「mDataProp」の新しいバージョンであることがドキュメントに記載されていることに気付いたので、代わりにそれを使用しました。あなたの他の提案により、他のコードのいくつかを再考するようになりました。どうもありがとうございました。

4

1 に答える 1

1

dataTable が [0] を ID 名として使用しているようです。これは悪いです。最後に押してみてください..

または、次のヒントを使用してください。

  • mData の代わりに mDataProp を使用します。コードを読むときに、より多くの制御が可能になり、より論理的になるでしょう。また、何かを追加するときに、正しいインデックスがあることを確認する必要はありません。

    aoColumns: [
       { mDataProp: "customername", bSortable: true },
       { mDataProp: "contact", bSortable: true },
    ]
    

    そして、JSON出力は次のようになります

    [aaData] => Array
      (
        [0] => Array
            (
                [company] => Company 1
                [customername] => Joe Bob
    
  • いつも src="images/details_open.png" が [0] になっていることに気付きました。これは帯域幅の無駄です。代わりに、これを試してください

    aoColumns: [
    
        [...]
    
       { mDataProp: function(x) {
          return '<img src="images/details_open.png">';
       }, bSortable: true },
    
    ]
    

    このようなことができるので、これは非常に便利です。

    aoColumns: [
    
        [...]
    
       { mDataProp: function(x) {
          return '<img src="images/details_open.png" data-id="' + x.id + '">';
       }, bSortable: true },
    
    ]
    
    • 各行を編集する場合は、fnDrawCallBack... を使用します。

       fnDrawCallback: function ( oSettings ) {
               if ( oSettings.aiDisplay.length == 0 ) {
                   return;
               }
      
               var TRs = $('#lst_production tbody tr');
               var iColspan = TRs[0].getElementsByTagName('td').length;
      
               for ( var i=0 ; i<TRs.length ; i++ ) {
      
                   var iDisplayIndex = oSettings._iDisplayStart + i;
                   data = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData;
      
                   // add the ID to the row
                   $(TRs[i]).attr("id", data.id);
      
                   // add class red-background if customer is from AR
                   if (data.state == 'AR') {
                       $(TRs[i]).addClass("red-background");
                   }
      
               }
           },
      
于 2012-12-13T22:01:32.397 に答える