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 }设置。

我为你使用了the demo

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

结果网格上有几列

双击后或选择一行并单击“查看”导航按钮后，

将显示详细信息：

我认为这是实现您的要求的最简单方法。

Answer 2

我认为你需要在dblClickRow上使用实现方法来获取不同的行：

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（）中以获得与图片类似的格式。