Jqgrid - Как отображать информацию в текстовом поле по строке, выбранной в сетке

Question

Я довольно новичок в php и jquery, поэтому любая помощь будет высоко ценится.У меня в основном есть сетка под названием «бронирование», которая отображает всю информацию о бронированиях, хранящихся в базе данных.

При двойном щелчке строки появляется диалоговое окно Jquery, котороеотображает всю информацию об их бронировании:

В данный момент, независимо от того, какое бронирование вы нажимаете на него, всегда отображается информация из первой строки базы данных.Я хочу, чтобы он отображал данные из базы данных, по которой выбирается строка.

Это код PHP:

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

Любая помощь будет отличной!

Answer 1

Я думаю, что было бы намного проще включить всю информацию о бронировании в сетку в виде скрытых столбцов и использовать метод viewGridRow для отображения подробной информации. Чтобы скрытые столбцы были видны в форме просмотра, необходимо добавить параметр editrules: { edithidden: true } в определение столбца.

Я сделал демо для вас, которое использует

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

В результате сетка с несколькими столбцами

будет отображать подробную информацию после двойного щелчка или после выбора строки и нажатия на кнопку навигатора «Вид»:

Я думаю, что это будет самый простой способ реализовать ваши требования.

Answer 2

Я думаю, что вам нужно реализовать метод 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 () все теги, чтобы получить формат, аналогичный картинке.