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

原因是一些因素的組合。您在編輯表單的第一個字段上設置了日期選擇器，您可以使用datepicker的選項在編輯表單的第一個控件上打開on focus和jqGrid set focus。

有很多方法來解決問題，但如果編輯表格的第一開口的行爲是你OK，那麼你可以嘗試只是爲了使用editGridRowrecreateForm: true選項。