Пример загрузки таблиц в диалоговом окне через AJAX.
Дважды кликните на любом ряде таблицы.

По просьбе с phpclub.ru.
higrid.net嗨网提供电子表格、在线图形等互联网开发及运营技术，提供相关资料及软件下载，分享奇趣网络时事评论！欢迎访问。


部分内容为俄文，higrid计划翻译一下。敬请期待！

php代码和js代码请点击tab查看。 
<?php

class jqMiscAjaxDialog extends jqGrid
{
    protected function init()
    {
        $this->query = "
			SELECT {fields}
			FROM tbl_customer c
				JOIN tbl_order o ON (c.id=o.customer_id)
			WHERE {where}
			GROUP BY c.id
		";

        #Set columns
        $this->cols = array(
            'id' => array('label' => 'ID',
                'db' => 'c.id',
                'width' => 10,
                'align' => 'center',
            ),

            'c_name' => array('label' => 'Customer name',
                'db' => "CONCAT(c.first_name, ' ', c.last_name)",
                'width' => 35,
            ),

            'order_cnt' => array('label' => 'Order count',
                'db' => 'count(o.id)',
                'width' => 15,
            ),

            'order_latest' => array('label' => 'Latest order',
                'db' => 'max(o.date_create)',
                'width' => 15,
            ),
        );
    }

    protected function opDialog()
    {
        $rendered_grid = $this->Loader->render('jqMiscAjaxDialogDetails', array('customer_id' => $this->input('id')));
        $this->response['html'] = "<script> $rendered_grid </script>";
    }
}
<?php

class jqMiscAjaxDialogDetails extends jqGrid
{
    protected function init()
    {
        $this->options = array(
            'width' => 496,
            'height' => 185,
            'rowNum' => -1,
        );

        $this->query = "
			SELECT {fields}
			FROM tbl_order o
				JOIN tbl_order_item i ON (o.id=i.order_id)
			WHERE {where}
			GROUP BY o.id
		";

        $this->cols_default = array('align' => 'center');

        #Set columns
        $this->cols = array(
            'id' => array('label' => 'ID',
                'db' => 'o.id',
                'width' => 10,
            ),

            'customer_id' => array('hidden' => true), //to make auto-search work

            'quantity' => array('label' => 'Total quantity',
                'db' => 'count(i.quantity)',
                'width' => 15,
            ),

            'price' => array('label' => 'Total price',
                'db' => 'sum(i.price * i.quantity)',
                'width' => 15,
            ),

            'date_create' => array('label' => 'Date',
                'db' => 'o.date_create',
                'width' => 18,
            ),
        );

        $this->render_suffix_col = 'customer_id';
    }
}
<script>
    var opts = {
        'ondblClickRow':function (id) {
            $jqMiscAjaxDialog.jqGrid('extLoading', true);

            $.get($(this).jqGrid('getGridParam', 'url'),
                {
                    'oper':'dialog',
                    'id':id
                }, function (ret) {
                    var $cont = $('<DIV>');

                    $cont.dialog({
                        'modal':true,
                        'width':520,
                        'height':280,
                        'title':'Customer details: ' + id,
                        'resizable':false,
                        'close':function (event, ui) {
                            $('.ui-dialog-content').dialog('destroy');
                            $cont.remove();
                        }
                    });

                    $cont.html(ret.html);

                    $jqMiscAjaxDialog.jqGrid('extLoading', false);
                });
        }
    };

    <?= $rendered_grid ?>
</script>