Jqgrid - グリッド上で選択された行ごとにテキストボックスに情報を表示する方法

Question

私はphpとjqueryには新しく、どんな助けでも大歓迎です。私は基本的にデータベースに保存されている予約に関するすべての情報を表示する '予約'というグリッドを持っています。

あなたはそれが彼らの予約に関するすべての情報を表示するjQueryのダイアログボックスが表示されます行をダブルクリックすると：現時点では

、予約どんなにあなたがクリック常にデータベースの最初の行からの情報を表示します。私が望むのは、行が選択されたデータベースのデータを表示することです。

 $pdo = new SQL(); 
     $dbh = $pdo->connect(Database::$serverIP, Database::$serverPort, Database::$dbName, Database::$user, Database::$pass); 

     try { 

      $query = "SELECT * FROM tblbookings"; 


      $stmt = $dbh->prepare($query); 

      $stmt->execute(); 

      $row = $stmt->fetch(PDO::FETCH_BOTH); 

/*   Company::set_id($row['Id']); 
      Company::set_name($row['CompName']); */ 
      BookingDocket::set_id($row['id']); 
      BookingDocket::set_bookref($row['bookref']); 
      BookingDocket::set_returndate($row['returndate']); 


      $stmt->closeCursor(); 

     } 

     catch (PDOException $pe) { 
      die("Error: " .$pe->getMessage(). " Query: ".$stmt->queryString); 
     } 

     $dbh = null; 

    } 

JQGridコード：

$("#bookings").jqGrid({ 
    url:'scripts/php/bootstrp/cp.request.php?ft=gg&table=bookings&showindex=0', 
    datatype: 'xml', 
    mtype: 'GET', 
    colNames:['id', 'Booking Reference','Date of Booking','Time of Booking','Fare'], 
    colModel :[{name:'id', index:'id', hidden:'true', align:'center', search:false, width:'210px'}, 
    {name:'bookref', index:'bookref', align:'center', search:true, width:'210px'}, 
     {name:'recordeddate', index:'recordeddate', align:'center', search:false, width:'210px'}, 
     {name:'recordedtime', index:'recordedtime', align:'center', search:false, width:'210px'}, 
     {name:'fare', index:'fare', align:'center', search:false, width:'210px'}], 
    pager: $('#bookingsPager'), rowNum:500, rowList:[500,2000,5000,10000], 
    sortname: 'recordeddate', 
    sortorder: "desc", 
    viewrecords: true, 
hidegrid: false, 
rowNum: 500, 
    imgpath: 'lib/themes/steel/images', 
    height: '300px', 
    forceFit: true, 
    caption: 'Bookings History', 
    loadtext: 'Loading', 
    loadui:'enable', 
    ondblClickRow: function(rowid) 
    { 
     var rowData = new Array(); 
     rowData = $("#bookings").getRowData(rowid); 
    $("#cp-bookings-dialog").dialog({ hide: 'slide', height: 625, width: 733, title: 'Booking Reference: - '+ rowData['bookref'] }); 
    }, 
    editurl: 'scripts/php/bootstrp/cp.request.php?ft=ug&table=bookings' 
}).navGrid("#bookingsPager",{refresh:true,search:true,add:false,edit:false,del:false}); 

$("#bookings").setGridWidth('710px',false); 

すべてのヘルプは素晴らしいことだ

これは、PHPのコードです！

Answer 1

私はそれが隠されたカラムとして、グリッド内のすべての予約情報を含むようにして詳細情報を表示するviewGridRowメソッドを使用するためにはるかに簡単だろうと思います。ビュー形式で非表示の列を表示するには、列定義にeditrules: { edithidden: true }設定を追加する必要があります。

私はいくつかの列

とグリッドをダブルクリックした後、または選択A後の詳細な情報が表示されますその結果

ondblClickRow: function (id) { 
    $(this).jqGrid('viewGridRow', id, { caption: "Booking Reference" }); 
} 

を使用しているあなたのためのthe demoを作りました「表示」のナビゲーターボタン上の行とクリック：

あなたの要件を実装するのが最も簡単な方法だと思います。

Answer 2

私はあなたがdiferent行を取得する方法のondblClickRowを実装する必要があると思う：

ondblClickRow: function(rowid) 
    { 
     var rowData = new Array(); 
     rowData = $("#bookings").getRowData(rowid); 
    // Here put the rowid values into the dialog div: 
    $("#cp-bookings-dialog").html("Booking date: " + rowData['bookingDate'] + " ... "); 
    $("#cp-bookings-dialog").dialog({ hide: 'slide', height: 625, width: 733, title: 'Booking Reference: - '+ rowData['bookref'] }); 
    } 

注：画像と同様のフォーマットを取得するためのHTML（）すべてのタグに入れてください。