Fatal编程技术网
  • javascript/
  • Javascript 如何从另一个jqgrid的选定行创建新的jqgrid

Javascript 如何从另一个jqgrid的选定行创建新的jqgrid

javascript php mysql jqgrid

Javascript 如何从另一个jqgrid的选定行创建新的jqgrid,javascript,php,mysql,jqgrid,Javascript,Php,Mysql,Jqgrid,我有一个jqgrid，它显示了tabletest的两个字段；ID字段和图片字段。在图片字段中，我从数据库中检索图像地址，并在该字段中显示它们。此jqgrid具有multiselect属性。 1-我想从这个jqgrid中选择一些行，然后单击一个按钮从这个选中的行创建新的jqgrid。但是当我单击按钮而不是显示行时，会显示。 2-当我想将此网格保存为pdf格式时，仅保存图像地址，而不保存图像。 3-当我选择一些行时，selr变量包含该网格中的行的秩，而我需要selr包含所选行的ID。我的代码是： /

我有一个jqgrid，它显示了tabletest的两个字段；ID字段和图片字段。在图片字段中，我从数据库中检索图像地址，并在该字段中显示它们。此jqgrid具有multiselect属性。 1-我想从这个jqgrid中选择一些行，然后单击一个按钮从这个选中的行创建新的jqgrid。但是当我单击按钮而不是显示行时，会显示。 2-当我想将此网格保存为pdf格式时，仅保存图像地址，而不保存图像。 3-当我选择一些行时，selr变量包含该网格中的行的秩，而我需要selr包含所选行的ID。我的代码是：

//index.php
<!DOCTYPE html>
<html>
<head>
    <title>Insert selected row from grid1 to grid2</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/trirand/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css" />
    <style type="text">
        html, body {
            margin: 0;            /* Remove body margin/padding */
            padding: 0;
            overflow: hidden;    /* Remove scroll bars on browser window */
            font-size: 75%;
        }

    </style>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
        $.jgrid.defaults.width = "700";
    </script>

    <script src="js/jquery-ui.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery("#addtolist").click(function () {
                var selr = jQuery('#grid').jqGrid('getGridParam', 'selarrrow');
                var se = JSON.stringify(selr);
                $.ajax({
                    type: 'post', // the method (could be GET btw)
                    url: 'selectedgrid.php', // The file where my php code is
                    data: {
                        'sel': se // all variables i want to pass. In this case, only one.
                    },
                    success: function (data) { // in case of success get the output, i named data
                        $("#divid").html(data);
                    }
                });
            });
        });
    </script>

</head>
<body>

<?php
include("imagegrid.php");
?>
<button id="addtolist">Selected List</button>
<div id="divid"></div>
</body>
</html>
imagegrid.php

    //imagegrid.php
<?php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/PHPSuito/jqGrid.php";
// include the driver class
require_once "php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
$Model = array(
    array("name"=>"ID","width"=>20),
    array("name"=>"picture","width"=>300,"formatter"=>"js:formatImage", "unformat"=>"js:unformatImage"),
);
$grid->SelectCommand = 'SELECT ID, picture FROM test';
// set the ouput format to xml since json have problems
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel($Model);
// Set the url from where we obtain the data
$grid->setUrl('imagegrid.php');
// Set some grid options

//get the height passed as parameter
// Set grid option datatype to be local
$grid->setGridOptions(array(
    "caption"=>"grid1",
    "rowNum"=>20,
    "sortname"=>"ID",
    "hoverrows"=>true,
    "rowList"=>array(20,30,40,50),
    "autowidth"=>true,
    "shrinkToFit"=>true,
    "direction"=>"rtl",
    "height"=>'auto',
    "multiselect"=>true,
));

$custom = <<<CUSTOM
function formatImage(cellValue, options, rowObject) {
    var imageHtml = "<img src="+ cellValue+" />";
return imageHtml;
}
function unformatImage(cellValue, options, cellObject) {
    return $(cellObject.html()).attr("originalValue");
}
CUSTOM;

$grid->navigator = true;
// Enable excel export
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false,"cloneToTop"=>true));
// add a custom button via the build in callGridMethod
// note the js: before the function
$buttonoptions = array("#pager",
    array("caption"=>"Pdf", "title"=>"Extract to pdf", "onClickButton"=>"js: function(){
        jQuery('#grid').jqGrid('excelExport',{tag:'pdf', url:'imagegrid.php'});}"
    )
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);

// Set it to toppager
$buttonoptions[0] = "#grid_toppager";
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$grid->setJSCode($custom);
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
selectedgrid.php代码：

//selectedgrid.php
<?php
$IDlist=json_decode($_POST['sel']);
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/PHPSuito/jqGrid.php";
// include the driver class
require_once "php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid1 = new jqGridRender($conn);
$Model = array(
    array("name"=>"ID","width"=>20),
    array("name"=>"picture","width"=>300,"formatter"=>"js:formatImage", "unformat"=>"js:unformatImage"),
);
$grid1->SelectCommand = 'SELECT ID, picture FROM test WHERE ID IN'."(".implode(',',$IDlist).")";
// set the ouput format to xml since json have problems
$grid1->dataType = 'json';
// Let the grid create the model
// Set the url from where we obtain the data
$grid1->setUrl('selectedgrid.php');
// Set some grid options

//get the height passed as parameter
$grid1->setColModel($Model);
// Set grid option datatype to be local
$grid1->setGridOptions(array(
    "caption"=>"grid2",
    "rowNum"=>20,
    "sortname"=>"ID",
    "hoverrows"=>true,
    "rowList"=>array(20,30,40,50),
    "autowidth"=>true,
    "shrinkToFit"=>true,
    "direction"=>"rtl",
    "height"=>'auto',
));
$custom = <<<CUSTOM
function formatImage(cellValue, options, rowObject) {
    var imageHtml = "<img src="+ cellValue+" />";
return imageHtml;
}
function unformatImage(cellValue, options, cellObject) {
    return $(cellObject.html()).attr("originalValue");
}
CUSTOM;

// Enable toolbar searching
$grid1->toolbarfilter = true;
$grid1->setFilterOptions(array("stringResult"=>true));
// Enjoy
$grid1->setJSCode($custom);
$grid1->renderGrid('#grid2','#pager2',true, null, null, true,true);
错误是：

<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: sel in C:\wamp64\www\ltms\selectedgrid.php on line <i>2</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0010</td><td bgcolor='#eeeeec' align='right'>250312</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp64\www\ltms\selectedgrid.php' bgcolor='#eeeeec'>...\selectedgrid.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: implode(): Invalid arguments passed in C:\wamp64\www\ltms\selectedgrid.php on line <i>18</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0010</td><td bgcolor='#eeeeec' align='right'>250312</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp64\www\ltms\selectedgrid.php' bgcolor='#eeeeec'>...\selectedgrid.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.5280</td><td bgcolor='#eeeeec' align='right'>2216760</td><td bgcolor='#eeeeec'><a href='http://www.php.net/function.implode' target='_new'>implode</a>
(  )</td><td title='C:\wamp64\www\ltms\selectedgrid.php' bgcolor='#eeeeec'>...\selectedgrid.php<b>:</b>18</td></tr>
</table></font>
SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1Could not execute query!!!
请将您的图像内联放置。更好的是，只需复制并通过错误中的文本即可。您尝试过什么，还是希望SO调试器能帮您找到bug？@jdv:谢谢您的回答。我将错误添加到我的帖子中。在selectedgrid.php文件中，当第3行$IDlist=json\u decode$\u POST['sel']注释并使用$grid->SelectCommand='SELECT ID，picture FROM test'；查询，然后单击按钮addtolist new grid show selected content。但当我想使用从POST接收到的数组，并在$grid1->SelectCommand='SELECT ID，picture from testID，其中ID在“…introde'，”，$IDlist中使用该数组的内容时。；查询出现错误。请将图像内联放置。更好的是，只需复制并通过错误中的文本即可。您尝试过什么，还是希望SO调试器能帮您找到bug？@jdv:谢谢您的回答。我将错误添加到我的帖子中。在selectedgrid.php文件中，当第3行$IDlist=json\u decode$\u POST['sel']注释并使用$grid->SelectCommand='SELECT ID，picture FROM test'；查询，然后单击按钮addtolist new grid show selected content。但当我想使用从POST接收到的数组，并在$grid1->SelectCommand='SELECT ID，picture from testID，其中ID在“…introde'，”，$IDlist中使用该数组的内容时。；如果出现错误，请进行查询。