0

mySQLデータベースのデータを表示するためにdatatablesを使用しています。私がやりたいのは、現在の行の値をキャプチャして、編集用のモーダルで表示することです。

これが私がデータをDatatableに取り込む方法です。

$(document).ready(function() {
                $('#loading-span7').fadeOut();
                $('#loading-span5').fadeOut();
                $('#add-company').hide();

                $.fn.dataTableExt.sErrMode = 'throw';

                $('#company').dataTable({
                    "bProcessing" : true,
                    "bServerSide" : true,
                    "sAjaxSource" : "/index.php/company/profile_data",
                    "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
                    "sPaginationType" : "bootstrap",
                    "aoColumns" : [{
                        "mData" : "id"
                    }, {
                        "mData" : "name"
                    }, {
                        "mData" : "package_id"
                    }, {
                        "mData" : function(oObj) {
                            return "<a href=\"#\" data-id=\"" + oObj.id + "\" data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn edit-company\">Edit</a></td>";

                        }
                    }, {
                        "mData" : function(oObj) {
                            return "<a href=\"#\" data-id=\"" + oObj.id + "\"  data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn view-users\" >Users</a></td>";
                        }
                    }]
                });

                $.extend($.fn.dataTableExt.oStdClasses, {
                    "sWrapper" : "dataTables_wrapper form-inline"
                });

そしてここにモーダルがあります、

<div id="edit_company" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×
            </button>
            <h3 id="myModalLabel"><span id="company-label"></span>Company</h3>
        </div>
        <div class="modal-body">
            <form id="company-form">
                <fieldset>
                    <label>Name</label>
                    <input type="text" placeholder="Type something…" name="company-name">
                    <label>Package</label>
                    <select name="package" name="package-id" id="package-id">

                    </select>

                </fieldset>
            </form>

        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">
                Close
            </button>
            <button class="btn btn-primary">
                Save changes
            </button>
        </div>
    </div>

そして、これが私が目標を達成しようとしたスクリプトですが、問題はデータテーブルの最初の行だけがモーダルにキャプチャされることです

$('#company .edit-company').live('click', function() {
                    var id = $(this).attr('id');
                    $('#company-label').html('Edit ');
                    $('#company-form')[0].reset();
                    $.ajax({
                        url : '/index.php/company/profile_data',
                        type : 'POST',
                        data : 'companies[]=' + id,
                        beforeSend : function() {
                            $('#loading-span7').show();

                        },
                        success : function(data, textStatus, xhr) {

                            var details = JSON.parse(data);
                            console.log(details);
                            //console.log(details.aaData[0].homepage_url);
                            $('input[name=company-name]').val(details.aaData[0].name);
                            //$('input[name=package-id]').html(details.aaData[0].package_id);

                            /**oTable.$('.edit-company').click(function() {
                                var data1 = oTable.fnRowSelected(this);
                                $('input[name=company-name]').val(details.aaData[0].name);

                            });**/
                            var option1 = $('<option />', {
                                text : details.aaData[0].package_id
                            }), option2 = $('<option />', {
                                text : details.aaData[1].package_id
                            });

                            $('select#package-id').append(option1, option2);
                            //$('select#package-id option').text(details.aaData[0].package_id);

                            //$('#package-id').val(details.aaData[0].package_id);
                            $('#edit_company').modal('show');
                            $('#loading-span7').fadeOut();
                        },
                        error : function(xhr, textStatus, errorThrown) {
                            //alert('error');
                        }
                    });

                });

目標を達成するために何ができますか？

4

3 に答える 3

1

fnGetDataメソッドを使用してみてください。

テーブルがoTableに設定されていると仮定します

var oTable = $('#company').dataTable({
                "bProcessing" : true,
                "bServerSide" : true,
                "sAjaxSource" : "/index.php/company/profile_data",
                "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
                "sPaginationType" : "bootstrap",
                "aoColumns" : [{
                    "mData" : "id"
                }, {
                    "mData" : "name"
                }, {
                    "mData" : "package_id"
                }, {
                    "mData" : function(oObj) {
                        return "<a href=\"#\" data-id=\"" + oObj.id + "\" data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn edit-company\">Edit</a></td>";

                    }
                }, {
                    "mData" : function(oObj) {
                        return "<a href=\"#\" data-id=\"" + oObj.id + "\"  data-name=\"" + oObj.name + "\" role=\"button\" class=\"btn view-users\" >Users</a></td>";
                    }
                }]
});
var selected_data='';
$("td").live("click", function(){
    selected_data = oTable.fnGetData(this);
});

ここに例

于 2012-12-10T02:35:11.470 に答える
1

を使用しているのでbServerSide、を使用してfnRowCallback、列のフォーマットを少し変えてください。

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    var row = $(nRow),
        a = $('<a />').addClass('btn').attr({
            'href': '#',
            "role": "button"
        }).data('rowData', { //store the data in the button
        "id": aData[0],
        "name": aData[1],
        "package_id": aData[2]
    });
    // or store the raw data in the tr element
    //row.data('rowData', aData);
    // or store a formtted object containing the raw data in the tr element
    //row.data('rowData', );
    // Add the Edit button when the datatable draws the row.
    row.find('td:eq(3)').append(a.clone().addClass('edit-company').text('Edit').click(function (e) {
        var self = $(this),
            rowData = self.data('rowData'),
            id = rowData.id,
            name = rowData.name,
            package_id = rowData.package_id;
        //code to init your dialog
        e.preventDefault();
        return false;
    }));
    // Add the Users button when the datatable draws the row.
    row.find('td:eq(4)').append(a.clone().addClass('view-users').text('Users').click(function (e) {
        var self = $(this),
            rowData = self.data('rowData'),
            id = rowData.id,
            name = rowData.name,
            package_id = rowData.package_id;
        //code to handle your users
        e.preventDefault();
        return false;
    }));
},
"aoColumns" : [{
    "mData" : "id"
}, {
    "mData" : "name"
}, {
    "mData" : "package_id"
}, {
    "mData" : "Edit"
}
}, {
    "mData" : "Users"
}]
于 2012-12-10T02:50:53.013 に答える
0

私がこれを行った方法は、モーダルを作成する関数を持っていることです。少し単純化しました。

  function fnModalDetails ( nTr ) {
      var aData = oTable.fnGetData( nTr );
      var sOut = '<div id="myModal2" class="reveal-modal large">;
      sOut += aData[1];
      sOut += '</div>';
      return sOut;
  }

どういうわけか、クリックハンドラーをセルにアタッチする必要があります。以下では、ZurbRevealモーダルを使用しています。以前に作成された可能性のあるモーダルを削除する必要があります。

  $('.more').live('click', function() {
      event.preventDefault();
      var nTr = $(this).parents('tr')[0];
      $('#myModal2').remove();
      $('body').append(fnModalDetails(nTr));
      $("#myModal2").reveal({animation: 'fade'});
  });

お役に立てれば。

于 2012-12-11T01:12:12.140 に答える