2

基本的な機能を備えたPHPjqGridを使用しており、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;
4

1 に答える 1

2

その理由は、いくつかの要因の組み合わせです。編集フォームの最初のフィールドにdatepickerを設定し、datepickerのオプションを使用して開き、編集フォームの最初のコントロールにon focusjqGridを設定します。set focus

この問題を解決する方法はたくさんありますが、編集フォームを最初に開いたときの動作に問題がない場合は、editGridRowrecreateForm: trueのオプションを使用してみてください。

于 2013-01-03T00:09:13.480 に答える