当前位置： 文江博客话题详情

IE 7-8 中的 jqGrid 在编辑/添加时在内容顶部而不是在其上方创建灰色区域

发布于 2025-01-02 17:46:36 字数 7117 浏览 0 评论 0原文

在 IE 7 和 8 中，每当我想要编辑或向网格添加一行时，都会显示表单。表单和灰色背景显示在网格的顶部而不是上方。我无法上传图片，但这里有一个图表：

灰色区域

[ jqGrid 表单]

如果向下滚动

我的网格，

则不是灰色且可访问如果需要，我可以发布我的 html/css/jq 代码。在 Firefox 中，功能很好，因为灰色区域位于网格上方，并且网格不可访问。 这是 IE 的错误吗？ 我正在使用 jquery 1.7.1、jqGrid 4.3.1 和 jQuery ui 1.8.17。

<?php
session_start();
$user = $_SESSION['username'];
$uID = $_SESSION['UserID'];
$perms = $_SESSION['Access'];?><html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></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="jquery-ui-1.8.17.custom.js" type="text/javascript"></script>
<script src="jquery.ui.datepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" />

<script>
    $(document).ready(function () {
    var lastsel3;
    var uID = <?php echo $uID; ?>;
    $grid = $("#tasks"),
        initDateEdit = function (elem) {
            setTimeout(function() {
                $(elem).datepicker({
                    dateFormat: 'dd-mm-yy',
                    showButtonPanel: true
                });
            }, 100);
            },
        initDateSearch = function (elem) {
            setTimeout(function() {
                $(elem).datepicker({
                    dateFormat: 'dd-mm-yy',
                    showButtonPanel: true
                });
            }, 100);
            },
        editSettings = {
                //recreateForm:true,
                jqModal:true,
                reloadAfterSubmit:true,
                closeOnEscape:true,
                savekey: [true,13],
                closeAfterEdit:true
            };
    $grid.jqGrid({
        datatype: "local",
        url: 'register.php',
        sortname: 'Job ID',
        sortOrder: 'asc',
        postData: {uID:uID},
        colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
        colModel: [ 
            {name: "track",  index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
            {name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
            {name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
            {name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
        ],

        onSelectRow: function(track){
                        if(track && track!==lastsel3)
                            {   
                                $('#tasks').jqGrid('restoreRow',lastsel3); 
                                $("#tasks").jqGrid('editGridRow',track,editSettings);
                                lastsel3=track; 
                            }
                        else{
                            $("#tasks").jqGrid('editGridRow',track,editSettings);
                        }
                        },
        editurl: 'editRow.php',
        rowNum: 10,
        shrinkToFit: true,
        rowList: [10,20,50],
        viewRecords: true,
        xmlReader: {
            root: "tasks",
            row: "task",
            repeatitems: false
        },
        pager: $('#navTasks'),
        onInitializeForm : function () {

        },
        caption: "Your Tasks"
    }).navGrid('#navTasks',{<?php
        if ($user==NULL){
            echo 'edit:false,add:false,del:false';
        }
        else{
            echo 'edit:false,add:false,del:false';
        }
    ?>},{},{},{},{multipleSearch: false, multipleGroup: false});
    $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
    setInterval(
        function(){
            $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
        },100000);
    $(window).bind('resize', function() {
        $("#tasks").setGridWidth($(window).width()-"142");
        $("#tasks").setGridHeight($(window).height()-"215");
    }).trigger('resize');


});
</script>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
    <tr >
        <td colspan="100%">
    <DIV id="header" class="header">
        <div class="title" align="center">Welcome to Research Division - Work Flow System<br /><span>Your Tasks</span></div>

        <?php 
            if($user == NULL){
                echo '<div align="center"><br/> Please Sign-in <a href="http://127.0.0.1">here</a></div>';
            }
            else {
                echo '<div align="center">Welcome '.$user.'!</div>';
            }
        ?>
    </DIV>
        </td>
    </tr>
    <tr >
        <td class="height">
    <div class="sidebar">
        <p><a href="assign.php">Assign Tasks</a></p>
        <p><a href="completed.php">Completed Tasks</a></p>
        <p><a id="logout" href="logout.php">Sign Out</a></p>
    </div>
        </td>
        <td>
    <DIV class="tables" align="center" >
        <table id="tasks"></table>
        <div id="navTasks"></div>
    </DIV>
        </td>
    </tr>
</table>
</body>

和CSS：

tr,td {
margin: 0;
padding: 0;
border: 0; 
outline: 0;
font-size: 100%;
background: transparent; }.tables{

min-width: 400px;}.header{
height: 100px;
width: 100%;
min-width: 500px;
background-color: #3E97D1;
border: solid 1px #681A38;
border-left: none;}.title{
font-size: 25px;}table{
border-collapse: collapse;
border: none;
padding: 0;
margin: 0px;
border-spacing: 0px;
width: 99%;
outline: 0;
height: 100%;}.height {
height: 99%;}.sidebar{
background-color: #009B95;
padding: 2px;
text-align: left;
border-right: solid 1px #681A38;
border-bottom: solid 1px #681A38;
width: 120px;
height: 99%;}
原文

In IE 7 and 8, whenever I want edit or add a row to the grid and the form shows up. The form and the grey background are shown ON TOP of the grid and not over it. I am not able to uplaod a pic but here is a diagram:

Grey area

[ jqGrid Form]

Not grey and accesible if I scroll down

My grid

If needed I can post my html/css/jq code. In firefox the functionality is fine, as in the grey area is OVER the grid and the grid is not accesible.
Is this is an IE bug?
I am using jquery 1.7.1, jqGrid 4.3.1 and jQuery ui 1.8.17.

<?php
session_start();
$user = $_SESSION['username'];
$uID = $_SESSION['UserID'];
$perms = $_SESSION['Access'];?><html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></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="jquery-ui-1.8.17.custom.js" type="text/javascript"></script>
<script src="jquery.ui.datepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" />

<script>
    $(document).ready(function () {
    var lastsel3;
    var uID = <?php echo $uID; ?>;
    $grid = $("#tasks"),
        initDateEdit = function (elem) {
            setTimeout(function() {
                $(elem).datepicker({
                    dateFormat: 'dd-mm-yy',
                    showButtonPanel: true
                });
            }, 100);
            },
        initDateSearch = function (elem) {
            setTimeout(function() {
                $(elem).datepicker({
                    dateFormat: 'dd-mm-yy',
                    showButtonPanel: true
                });
            }, 100);
            },
        editSettings = {
                //recreateForm:true,
                jqModal:true,
                reloadAfterSubmit:true,
                closeOnEscape:true,
                savekey: [true,13],
                closeAfterEdit:true
            };
    $grid.jqGrid({
        datatype: "local",
        url: 'register.php',
        sortname: 'Job ID',
        sortOrder: 'asc',
        postData: {uID:uID},
        colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
        colModel: [ 
            {name: "track",  index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
            {name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
            {name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
            {name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
            {name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
        ],

        onSelectRow: function(track){
                        if(track && track!==lastsel3)
                            {   
                                $('#tasks').jqGrid('restoreRow',lastsel3); 
                                $("#tasks").jqGrid('editGridRow',track,editSettings);
                                lastsel3=track; 
                            }
                        else{
                            $("#tasks").jqGrid('editGridRow',track,editSettings);
                        }
                        },
        editurl: 'editRow.php',
        rowNum: 10,
        shrinkToFit: true,
        rowList: [10,20,50],
        viewRecords: true,
        xmlReader: {
            root: "tasks",
            row: "task",
            repeatitems: false
        },
        pager: $('#navTasks'),
        onInitializeForm : function () {

        },
        caption: "Your Tasks"
    }).navGrid('#navTasks',{<?php
        if ($user==NULL){
            echo 'edit:false,add:false,del:false';
        }
        else{
            echo 'edit:false,add:false,del:false';
        }
    ?>},{},{},{},{multipleSearch: false, multipleGroup: false});
    $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
    setInterval(
        function(){
            $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
        },100000);
    $(window).bind('resize', function() {
        $("#tasks").setGridWidth($(window).width()-"142");
        $("#tasks").setGridHeight($(window).height()-"215");
    }).trigger('resize');


});
</script>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
    <tr >
        <td colspan="100%">
    <DIV id="header" class="header">
        <div class="title" align="center">Welcome to Research Division - Work Flow System<br /><span>Your Tasks</span></div>

        <?php 
            if($user == NULL){
                echo '<div align="center"><br/> Please Sign-in <a href="http://127.0.0.1">here</a></div>';
            }
            else {
                echo '<div align="center">Welcome '.$user.'!</div>';
            }
        ?>
    </DIV>
        </td>
    </tr>
    <tr >
        <td class="height">
    <div class="sidebar">
        <p><a href="assign.php">Assign Tasks</a></p>
        <p><a href="completed.php">Completed Tasks</a></p>
        <p><a id="logout" href="logout.php">Sign Out</a></p>
    </div>
        </td>
        <td>
    <DIV class="tables" align="center" >
        <table id="tasks"></table>
        <div id="navTasks"></div>
    </DIV>
        </td>
    </tr>
</table>
</body>

and the CSS:

tr,td {
margin: 0;
padding: 0;
border: 0; 
outline: 0;
font-size: 100%;
background: transparent; }.tables{

min-width: 400px;}.header{
height: 100px;
width: 100%;
min-width: 500px;
background-color: #3E97D1;
border: solid 1px #681A38;
border-left: none;}.title{
font-size: 25px;}table{
border-collapse: collapse;
border: none;
padding: 0;
margin: 0px;
border-spacing: 0px;
width: 99%;
outline: 0;
height: 100%;}.height {
height: 99%;}.sidebar{
background-color: #009B95;
padding: 2px;
text-align: left;
border-right: solid 1px #681A38;
border-bottom: solid 1px #681A38;
width: 120px;
height: 99%;}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

吹泡泡o 2025-01-09 17:46:36

我认为您描述的问题的原因是您在 之前没有使用 。如果没有线路，网络浏览器将在怪异模式下工作。您应该使用与您使用的 HTML/XHTML 方言相对应的文档类型。因为有人在您的代码中找到
我认为您应该

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在 之前包含它。查看 jqGrid 文档中的示例。

I suppose that the reason of the problem which you describe is that you don't use and <!DOCTYPE html ... before <html>. Without the line web browser work in quirks mode. You should use the doctype which corresponds to the dialect of HTML/XHTML which you use. Because one find <br /> in your code I suppose that you should include

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

before <html>. Look at the example from the jqGrid documentation.

回复 原文
~没有更多了~

关于作者

绝對不後悔。

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lee_heart

文章 0 评论 0

不喜欢何必死缠烂打

文章 0 评论 0

huangxaiorui

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

画离情绘悲伤

文章 0 评论 0

渚

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文