date - jqGrid自动弹出日期选择器

Question

我使用的是具有基本功能的 PHP jqGrid，没有附加 JavaScript。第一次打开弹出框时，一切正常。

当我再次编辑时，每次都会自动弹出日期选择器。这是一个错误吗？

我的代码非常基础，我不知道它还能是什么。

这是我的代码:

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

$grid->SelectCommand = 'SELECT id, date, description, goal,
    type  FROM events';

$grid->table = 'events';
$grid->setPrimaryKeyId('id');
$grid->serialKey = false;
// Set output format to json
$grid->dataType = 'json';
// Let the grid create the model
$Model = array (
    array ("name" => "date"),
    array ("name" => "description"),
    array ("name" => "goal"),
    array ("name" => "type")

);
$grid->setColModel($Model);

// Set the url from where we obtain the data
$grid->setUrl('event-grid.php');
// Set some grid options
$grid->setGridOptions(array(
    "caption"=>"Events",
    "rowNum"=> 5,
    "rowList"=>array(5,10,20,30),
    "sortname"=>"date",
    "width" => 400,
    "height" => 113,
    "hoverrows" => true,
    "viewrecords" => false,
    "sortable"=>true
));

///*** Use this to define both server and user date params for date picker and field please remeber that the grid CRUD interactions are separate from jqueryui Datepicker you must integrate them together ***/
$grid->setUserTime("h:i:s");
$grid->setUserDate('Y M d');
$grid->setDbDate('Y-m-d');

$grid->setColProperty("date", array(
        "label"=>"Event Date",
        "width"=>80,
        "align"=>"center",
        "fixed"=>true,
        "formatter"=>"date",
        "formatoptions"=>array(
            "srcformat"=>"Y-m-d",
            "newformat"=>"Y M d")

//    CODE BLOCK BELOW TO USE JS DATE PICKER
//
//        "editoptions"=>array("dataInit"=>
//                "js:function($){setTimeout(function(){
//                    jQuery($).datepicker({dateFormat:'yy-mm-dd',
//                    changeMonth: true,
//                    showOn: 'both',
//                    buttonImage: 'img/83-calendar.png',
//                    buttonImageOnly: true,
//                    minDate: '-5Y',
//                    maxDate: '+5Y'});
//                    jQuery('.ui-datepicker').css({'zIndex':'1200','font-size':'75%'});},200);}")


    ));

// Set the datepicker on OrderDate field. Note that the script automatically
// converts the user date set in the jqGrid
$grid->setDatepicker('date', array("buttonIcon"=>true), true, false);
$grid->datearray = array('date');


// Enable navigator
$grid->navigator = true;
// Enable only deleting
$grid->setNavOptions('navigator', array(
    "excel"=>false,
    "add"=>true,
    "edit"=>true,
    "del"=>true,
    "view"=>false,
    "search"=>false,
    "csv" => true
    ));

$grid->setNavOptions('add', array(
    "closeAfterAdd"=>true,
    "reloadAfterSubmit"=>true
));

$grid->setNavOptions('edit', array(
    "closeAfterEdit"=>true,
    "reloadAfterSubmit"=>true
));

$grid->csvsep=",";

//$grid->debug = true;

//Enjoy
$grid->renderGrid('#event-grid','#event-pager',true, null, null, true,true);
$conn = null;



?>

代码非常简单，与演示中所见完全相同。

$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); 
// Write the SQL Query 
$grid->SelectCommand = 'SELECT EmployeeID, FirstName, LastName, BirthDate FROM employees'; 
// Set the table to where you add the data 
$grid->table = 'employees'; 
// Set output format to json 
$grid->dataType = 'json'; 
// Let the grid create the model 
$grid->setColModel(); 
// Set the url from where we obtain the data 
$grid->setUrl('grid.php'); 
$grid->setColProperty('EmployeeID', array("editable"=>false)); 
/* 
$grid->setColProperty('BirthDate',  
        array("formatter"=>"date", 
            "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s", "newformat"=>"Y-m-d"), 
            "editoptions"=>array("dataInit"=> 
                "js:function(elm){setTimeout(function(){ 
                    jQuery(elm).datepicker({dateFormat:'yy-mm-dd'}); 
                    jQuery('.ui-datepicker').css({'zIndex':'1200','font-size':'75%'});},100);}") 
            )); 
 *  
 */ 
$grid->setColProperty("BirthDate", array( 
    "formatter"=>"date", 
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"Y M d") 
    ) 
);  

// Date options to edit 
$grid->setUserDate("Y M d"); 
$grid->setUserTime("Y M d"); 

$grid->setDatepicker('BirthDate'); 

$grid->datearray = array("BirthDate"); 

// Set some grid options 
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "scrollrows"=>true, 
    "rowList"=>array(10,20,30), 
    "sortname"=>"EmployeeID" 
)); 
$grid->navigator= true; 
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>true,"edit"=>true,"del"=>false,"view"=>false, "search"=>false));
// Close the dialog after editing 
$grid->setNavOptions('edit',array("height"=>150,"dataheight"=>'auto', "closeAfterEdit"=>true)); 
$grid->setNavOptions('add',array("height"=>150,"dataheight"=>'auto',"closeAfterEdit"=>true)); 

// Enjoy 
$grid->renderGrid('#grid','#pager',true, null, null, true,true); 
$conn = null;

Answer 1

原因是一些因素综合作用的。您在编辑表单的第一个字段上设置日期选择器，使用日期选择器的选项在第一个上打开on focus和jqGrid set focus在编辑表单中进行控制。

有很多方法可以解决这个问题，但是如果第一次打开编辑表单时的行为对您来说没问题，那么您可以尝试仅使用 editGridRow 的 recreateForm: true 选项.