关于jqgrid：第一次打开编辑表单时不标记组合框中的选定值


Selected values in comboboxes are not marked in the first open of edit form

我正在使用 jqgrid 4，我从 stackoverflow 中得到了很多帮助，尤其是 Oleg。

问题是当我第一次打开我的编辑表单时，组合框不显示选定的值。
这只发生在第一次打开编辑表单时。
第一次后，组合框在编辑表单中设置为正确的值。
我已使用此页面中的内容：jqgrid 不正确选择编辑框中的下拉选项值，但问题仍然存在。

我改变了奥列格提出的所有建议。

我提到的第一个问题仍然存在。此外，在我先按下另一个字段之前，表单第一个字段中的日期选择器不会出现。

我的更新代码是

html 是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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">
    Grid
    <?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 type='Text/JavaScript' src='scw.js'> -->
    <script src="Scripts/jquery.js" type="text/javascript">
    <script src="Scripts/jquery.blockUI.js" type="text/javascript">
    <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript">
    <script src="js/jquery.layout.js" type="text/javascript">
    <script src="js/i18n/grid.locale-en.js" type="text/javascript">
    <script src="js/jquery.jqGrid.min.js" type="text/javascript">
    <script src="js/jquery-ui-timepicker-addon.js" type="text/javascript">
    <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);
        }
    }
   
</head>
<body>
   
    <table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>
   
   
</body>

和数据形式是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$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\
";
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 是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<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');
    });
}

我想要在数据库中的网格中的表是这样的：

1
2
3
id      Day       CustomerName

1    2011-09-09      John

请帮忙！

相关讨论

您的代码有太多错误。我建议您将您的代码与 jqGrid 文档的 My First Grid 部分中的代码进行比较。我只指出那里的一些错误，因为所有错误的列表太长：

  • 您必须包含 <!DOCUMENT ...> 行作为生成 PHP 文件的 HTML 文件的第一行。最简单的形式是 HTML5：<!DOCUMENT html>。目前您使用 jQuery UI 和 jqGrid 不支持的 quirks 模式。此外，您在 <html> 之前包含当前的 showprogram.php 事件。
  • 您在不同版本(最小化和未最小化)、完整代码和相同代码的一部分等中多次包含一些 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(document).ready(function () {...}); 内部调用诸如 jQuery(list).setGridParam 之类的方法(旧样式 jQuery().ready(function (){...}); 或块外的用法是错误的)。
  • 在创建网格之前(在 jQuery(list).jqGrid({...}); 之前)设置 jqGrid 参数并调用 jQuery(list).trigger("reloadGrid") 是错误的。
  • 代码 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 代码的相应部分应该生成

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

而不是 value:"John:John;Bob:Bob".

更新 2：选项

1
ajaxEditOptions: {cache: false}

如果我正确理解您当前的问题，应该可以解决您的问题。

相关讨论