Выбранные значения в выпадающих списках не отмечены при первом открытии формы редактирования. - PullRequest
0 голосов
/ 06 октября 2011

Я использую jqgrid 4, и мне очень помогла стековеропоток, особенно Олег.

Проблема в том, что при первом открытии формы редактирования в выпадающих списках не отображаются выбранные значения.,И это происходит только при первом открытии формы редактирования.После первого раза, выпадающие списки устанавливаются на правильное значение в форме редактирования.Я использовал вещи с этой страницы: jqgrid Неправильный выбор значений выпадающего списка в окне редактирования , но проблема все еще существует.

Я изменил все, что предложил Олег.

Первыйпроблема, которую я упомянул, все еще существует.Более того, указатель даты в первом поле формы не появляется, пока я не нажму сначала в другом поле.

Мой код обновления -

, html -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
    <title>Grid</title>
    <?php 
        session_start(); 
        include("showprogram.php"); 
    ?>
    <link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery-ui-1.8.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />
    <script type='text/JavaScript' src='Scripts/calendar.js'></script>
    <!-- <script type='Text/JavaScript' src='scw.js'></script> -->
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.layout.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
    <style type="text/css">
    #list1 {
        font-size : 12px 
    }   

    body {z-index: 1000}
    </style>        
    <script type='text/JavaScript'>
    function showprogram () {
        document.all.Calculation.style.visibility = "visible";  
        try {
            ShowSchedule('#list1', '#pager1');

        } catch (e) {
            alert("An exception occurred while fetching the schedule. Error name: " + e.name + ". Error message: " + e.message);
        }
    }
    </script>
</head>
<body>
    <div id="grid" style="display:inline;">
    <table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table> 
    <div id="pager1" class="scroll" style="text-align:center;"></div>
    </div>
</body>

и форма данных:

$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
include ('../library/opendb.php');
$result = mysql_query("SELECT COUNT(*) AS count FROM customers ");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;

$start = $limit*$page - $limit; // do not put $limit*($page - 1) 

$SQL = "SELECT ID as id,Day AS Day, CustomerName AS name
       FROM customers";

$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());

if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) 
{
header("Content-type: application/xhtml+xml;charset=utf-8");
}
else
{
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>" . $total_pages . "</total>";
echo "<records>".$count."</records>"; // be sure to put text data in CDATA

while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo "<row id='". $row[id]."'>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[Day]."</cell>";
echo "<cell>". iconv("ISO-8859-7", "UTF-8", $row[name])."</cell>";

echo "<cell> Is this a button?<input type='button' value='E' onload=\"alert('ok');\"/>        </cell>";
echo "</row>";
} 
echo "</rows>"; 

include ('../library/closedb.php'); 

, а add.php -

$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
$oper = $_POST['oper'];
if(!$sidx) $sidx =1;
$Day = $_POST['Day'];
$name = $_POST['name'];

include ('../library/opendb.php');      
//Set at the right position 
        $name=$name+1;

if($oper == 'add') 

{   

$sql="INSERT INTO Customers (
              Day, 
              CustomerName VALUES ( 
      '".$Day."',
      '".$name."')";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}

elseif($oper == 'del') 

{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);

$sql="DELETE FROM customers 
    WHERE ID=
      '".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}

elseif($oper == 'edit') 
{
        $id = $_POST['id'];
        $id=mysql_real_escape_string($id);      
        $sql="UPDATE customers SET 
                        Day = '".$Hmera."', 
                        CustomerName = '".$name."'
                        WHERE ID = '".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}

и showprogram.php:

function getDatacustomer()
{
include ('../library/opendb.php');
$SQL = "SELECT CustomerName FROM customers ORDER BY CustomerID ;";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$count = mysql_num_rows($result);
include ('../library/closedb.php');
$value="";
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
if ($i!=($count-1)){
$value=$value.''.$i.':'. $row[CustomerName].';';}
else
{$value=$value.''.$i.':'. $row[CustomerName].'';}
$i=$i+1;
}
$value='value:"'.$value.'"';
return $value;
}
?>
<script type='text/JavaScript'>
function ShowSchedule(list, pager) {

jQuery().ready(function (){ 
jQuery(list).jqGrid({
    url:Url, 
    datatype: "xml",
    height: "auto",
    colNames:['id','Day','name'],
    colModel:[
    {name:'id',index:'id', width:40, align:'right', editable:false, editoptions:{readonly:true,size:10}},
    {name:'Day',index:'Day', width:70, align:'right', editable:true, sorttype: 'date', editrules:{date:true},
    editoptions:{dataInit:function(elem){setTimeout(function()
                {$(elem).datepicker({dateFormat:"yy-mm-dd"});},100);}}},
    {name:'name',index:'name', width:120, align:'right', editable:true, edittype:'select',editoptions:{<?php echo getDatacustomer() ?>}},
    ],
    rowNum:30,
    rowList:[10,20,30],
    pager: pager,
    sortname: 'Day',
    viewrecords: true,
    sortorder: "asc",
    loadonce: true,
    shrink: true,
    //toppager: true, for toppage pager 
    editurl:'add.php',
    caption:"Grid",     
    forceFit : true
    });

    jQuery(list).jqGrid('navGrid',pager,{edit:true,add:true,del:true,search:false,view:true, reload:true},
    {width:600,height:"auto",
    reloadAfterSubmit:true,
    closeAfterEdit: true,
    recreateForm: true, 
    onClose: function() {jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},
    beforeShowForm: function(form) {
              var dlgDiv =  $("#editmod" + jQuery(list)[0].id);
              var parentDiv = dlgDiv.parent(); // div#gbox_list
              var dlgWidth = dlgDiv.width();
              var parentWidth = parentDiv.width();
              var dlgHeight = dlgDiv.height();
              var parentHeight = parentDiv.height();
              // TODO: change parentWidth and parentHeight in case of the grid
                   // is larger as the browser window
              dlgDiv[0].style.top = "260 px";
              dlgDiv[0].style.left = "600 px";
            }
    },
    {width:600,height:"auto",reloadAfterSubmit:true,closeAfterAdd: true,recreateForm: true, onClose: function() {
        jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},beforeShowForm: function(form) {
              var dlgDiv =  $("#editmod" + jQuery(list)[0].id);
              var parentDiv = dlgDiv.parent(); // div#gbox_list
              var dlgWidth = dlgDiv.width();
              var parentWidth = parentDiv.width();
              var dlgHeight = dlgDiv.height();
              var parentHeight = parentDiv.height();
              // TODO: change parentWidth and parentHeight in case of the grid
                   // is larger as the browser window
              dlgDiv[0].style.top = "260 px";
              dlgDiv[0].style.left = "600 px";
            }
    },
    {width:600,height:"auto",reloadAfterSubmit:true,recreateForm: true}, 
    {height:280,reloadAfterSubmit:true}, 
    {width:650,height:"auto",reloadAfterSubmit:true,recreateForm: true, beforeShowForm: function(form) {
              var dlgDiv =  $("#viewmod" + jQuery(list)[0].id);
              var parentDiv = dlgDiv.parent(); // div#gbox_list
              var dlgWidth = dlgDiv.width();
              var parentWidth = parentDiv.width();
              var dlgHeight = dlgDiv.height();
              var parentHeight = parentDiv.height();
              // TODO: change parentWidth and parentHeight in case of the grid
                   // is larger as the browser window
              dlgDiv[0].style.top = "100 px";
              dlgDiv[0].style.left = "600 px";
            }},
    {});
    jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');
    });
}

Таблица, которую я хочу в сетке из базы данных, выглядит следующим образом:

id      Day       CustomerName

1    2011-09-09      John

Пожалуйста, помогите!

1 Ответ

0 голосов
/ 07 октября 2011

В вашем коде слишком много ошибок. Я рекомендую вам сравнить ваш код с кодом из My First Grid части документации jqGrid. Я указываю только на некоторые из них, потому что список всех ошибок будет слишком длинным:

  • Вы должны включить строку <!DOCUMENT ...> в качестве первой строки вашего HTML-файла, который генерирует ваш PHP-файл. Самая простая форма имеет HTML5: <!DOCUMENT html>. В настоящее время вы используете режим quirks , который не поддерживается пользовательским интерфейсом jQuery и jqGrid. Более того, вы включаете showprogram.php событие до <html>.
  • Вы включаете несколько файлов JavaScript или CSS много раз в разные версии (свернутые и не свернутые), полный код и часть одного и того же кода и так далее. Если вы включаете, например, jquery-ui-1.8.1.custom.css, вам не нужно включать ui.datepicker.css. Если вы включаете ui.jqgrid.css, вам не нужно включать jqModal.css. Включение jquery.js и jquery-1.3.2.min.js является следующей ошибкой. Включение ui.datepicker.js, jquery-ui-1.8.1.custom.min.js и jquery.ui.datetimepicker.min.js вместо одного jquery-ui-1.8.1.custom.min.js является следующей ошибкой. Если вы включите jquery.jqGrid.min.js, было бы неправильно включать не минимизированные части одного и того же кода grid.common.js, ... jqDnR.js. Я могу продолжить ...
  • Вы должны вызывать методы типа jQuery(list).setGridParam и т. Д. Только внутри jQuery(document).ready(function () {...}); (использование старого стиля jQuery().ready(function (){...}); или вне блока неверно).
  • Установка параметра jqGrid и вызов jQuery(list).trigger("reloadGrid") до , сетка будет создана (до jQuery(list).jqGrid({...});) неверно.
  • код jQuery(list).jqGrid({...}); создать сетку. Он создает много внутренних структур и создает множество HTML-элементов сетки, таких как заголовок, заголовки столбцов, пейджер и так далее. Сетка должна быть создана только один раз . Если вы хотите перезагрузить данные в сетке, вы должны использовать jQuery(list).trigger('reloadGrid'). В вашем текущем коде, например, в обработчике событий onClose вы просто вызываете ShowSchedule, который попытается создать сетку еще раз, что неправильно.

Итак, вы должны изучить свой код заполнения и изменить способ разделения кода на порты. Я могу повторить что приведенный выше список ошибок не является полным. Вы должны внимательно изучить свой код и переписать многие его части.

ОБНОВЛЕНО : ваш измененный код все еще представляет собой смесь из кода PHP и кода JavaScript. Я сам не использую PHP, но полагаю, что ваша проблема с выбором элементов в выпадающих списках существует только из-за смешения.

Единственная синтаксическая ошибка в вашем коде - использование запятых в конце определения colModel (,] недопустимо). Если я просто использую ваш код с каким-то простым вводом XML и каким-то простым результатом <?php echo getDatacustomer() ?> (я использую value:'John:John;Bob:Bob'), код работает, см. демоверсию .

Лучше было бы четко отделить код JavaScript от кода PHP. Я бы порекомендовал вам использовать dataUrl свойство editoptions . В случае, если соответствующая часть кода PHP должна генерировать

<select><option value='John'>John</option><option value='Bob'>Bob</option></select>

вместо value:"John:John;Bob:Bob".

ОБНОВЛЕНО 2 : опция

ajaxEditOptions: {cache: false}

должно решить вашу проблему, если я правильно понимаю вашу текущую проблему.

...