Question

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

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

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

enter image description here

这是我的代码：

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

原因是一些因素的结合。您可以在编辑表单的 first 字段中设置datepicker，使用datepicker选项在编辑表单中的第一个控件上打开on focus和jqGrid set focus。

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

jqGrid日期选择器自动弹出

1 个答案: