jqgrid-在内联编辑模式下显示覆盖 | 在内联编辑模式下显示覆盖

本文介绍了jqgrid-在内联编辑模式下显示覆盖的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

列FirstName是可编辑的.当网格加载时，我在每行中添加div作为FirstName <td>的子代.

我想做什么

在嵌入式编辑模式下，如果我在FirstName列的文本字段中输入了任何内容，则div叠加层应出现在文本字段的正下方.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery Grid</title>
        <link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
        <link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" href="themes/ui.multiselect.css" />
        <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.14.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="plugins/ui.multiselect.js" type="text/javascript"></script>
        <script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
        <script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
    </head>
    <body>
         <table id="myjqgrid"></table>
         <div id="pager"></div>
         <script src="js/test.js" type="text/javascript"></script>
    </body>
</html>

JSON

{
    "colModel": [
        {
            "name": "ID",
            "label": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value",
            "sortable": true,
            "editable": false
        },
        {
            "name": "FirstName",
            "label": "FirstName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.1.value",
            "sortable": false,
            "editable": true,
            "edittype": "text"
        },
        {
            "name": "LastName",
            "label": "LastName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.2.value",
            "sortable": false,
            "editable": false
        }
    ],
    "colNames": [
        "ID",
        "FirstName",
        "LastName"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"20",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [
                            {
                                "value":"12345",
                                "label": "ID"
                            },
                            {
                                "value":"David",
                                "label": "FirstName"
                            },
                            {
                                "value":"Smith",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"2",
                        "cells":
                        [
                            {
                                "value":"37546",
                                "label": "ID"
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"
                            },
                            {
                                "value":"Peacock",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"3",
                        "cells":
                        [
                            {
                                "value":"62345",
                                "label": "ID"
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"
                            },
                            {
                                "value":"Holmes",
                                "label": "LastName"
                            }
                        ]
                    }
                ]
            }
        }
    }
}

JQGrid

$(document).ready(function () {
    var serverData = [];
    $.ajax({
        type: "GET",
        url: "test.json",
        data: "",
        dataType: "json",
        success: function(response){
            var columnData = response.mypage.outerwrapper,
                columnNames = response.colNames,
                columnModel = response.colModel;

            $("#myjqgrid").jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: "innerwrapper.rows",
                    repeatitems: false
                },
                gridview: true,
                pager: "#pager",
                rowNum: 15,
                rowList: [15, 30, 45, 60],
                viewrecords: true,
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                sortname: 'ID',
                sortorder: "desc",
                sorttype: "text",
                sortable: true,
                width: "1406",
                height: "auto",
                scrolloffset: 0,
                loadonce: true,
                caption: "My JQGrid",
                onSelectRow: function(id){
                    $("table#myjqgrid").editRow(id, true);
                    $("input.editable").live("keyup", function(e){
                        $("div#overlay").show();
                    });
                },
                loadComplete: function(){
                    var x, y, cellProperty, itemRows;
                    for (x = 0; x < response.mypage.outerwrapper.innerwrapper.rows.length; x++) {
                        itemRows = response.mypage.outerwrapper.innerwrapper.rows[x];
                        itemRowsID = response.mypage.outerwrapper.innerwrapper.rows[x].id;
                        serverData[itemRows.id] = itemRows.cells;
                        var cellCount = response.mypage.outerwrapper.innerwrapper.rows[x].cells.length;
                        for (y = 0; y < cellCount; y += 1) {
                            cellProperty = response.mypage.outerwrapper.innerwrapper.rows[x].cells[y];
                            var cellLabel = cellProperty.label;
                            if (cellLabel === "FirstName") {
                                $("tr#" + itemRowsID + "td[aria-describedby='myjqgrid_" + cellLabel + "']").append("<div style='display:none;position:absolute;z-index:1000' id='overlay'>"+cellProperty.value+"</div>");
                            }
                        }
                    }
                }
            });
        }
    });
});

有人可以帮忙吗?

解决方案

您当前的代码有一些问题:

您在网格的每一行中都创建了覆盖" div，但是所有潜水都获得了相同的ID :覆盖". HTML不允许在一页上使用ID重复项.
您将隐藏的div 放在内部上.方法editRow 用元素覆盖单元格的全部内容.因此，覆盖
将被删除，并且在调用editRow之后将无法显示.因此，您必须将叠加层div移动到单元格之外的某个位置，或者将叠加层内容中的文本保存在其他位置，并在靠近该行的编辑位置附近动态创建它.

要将叠加层放置在<input>元素下，我建议您使用 jQuery UI位置

The column FirstName is editable. When the grid loads, I'm adding a div as a child of the FirstName <td> in every row.

What I want to do

In inline editing mode, if I enter anything in the textfield of FirstName column - the div overlay should appear right below the textfield.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Jquery Grid</title>
        <link rel="stylesheet" type="text/css" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
        <link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" href="themes/ui.multiselect.css" />
        <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.14.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="plugins/ui.multiselect.js" type="text/javascript"></script>
        <script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
        <script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
    </head>
    <body>
         <table id="myjqgrid"></table>
         <div id="pager"></div>
         <script src="js/test.js" type="text/javascript"></script>
    </body>
</html>

JSON

{
    "colModel": [
        {
            "name": "ID",
            "label": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value",
            "sortable": true,
            "editable": false
        },
        {
            "name": "FirstName",
            "label": "FirstName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.1.value",
            "sortable": false,
            "editable": true,
            "edittype": "text"
        },
        {
            "name": "LastName",
            "label": "LastName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.2.value",
            "sortable": false,
            "editable": false
        }
    ],
    "colNames": [
        "ID",
        "FirstName",
        "LastName"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"20",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [
                            {
                                "value":"12345",
                                "label": "ID"
                            },
                            {
                                "value":"David",
                                "label": "FirstName"
                            },
                            {
                                "value":"Smith",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"2",
                        "cells":
                        [
                            {
                                "value":"37546",
                                "label": "ID"
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"
                            },
                            {
                                "value":"Peacock",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"3",
                        "cells":
                        [
                            {
                                "value":"62345",
                                "label": "ID"
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"
                            },
                            {
                                "value":"Holmes",
                                "label": "LastName"
                            }
                        ]
                    }
                ]
            }
        }
    }
}

JQGrid

$(document).ready(function () {
    var serverData = [];
    $.ajax({
        type: "GET",
        url: "test.json",
        data: "",
        dataType: "json",
        success: function(response){
            var columnData = response.mypage.outerwrapper,
                columnNames = response.colNames,
                columnModel = response.colModel;

            $("#myjqgrid").jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: "innerwrapper.rows",
                    repeatitems: false
                },
                gridview: true,
                pager: "#pager",
                rowNum: 15,
                rowList: [15, 30, 45, 60],
                viewrecords: true,
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                sortname: 'ID',
                sortorder: "desc",
                sorttype: "text",
                sortable: true,
                width: "1406",
                height: "auto",
                scrolloffset: 0,
                loadonce: true,
                caption: "My JQGrid",
                onSelectRow: function(id){
                    $("table#myjqgrid").editRow(id, true);
                    $("input.editable").live("keyup", function(e){
                        $("div#overlay").show();
                    });
                },
                loadComplete: function(){
                    var x, y, cellProperty, itemRows;
                    for (x = 0; x < response.mypage.outerwrapper.innerwrapper.rows.length; x++) {
                        itemRows = response.mypage.outerwrapper.innerwrapper.rows[x];
                        itemRowsID = response.mypage.outerwrapper.innerwrapper.rows[x].id;
                        serverData[itemRows.id] = itemRows.cells;
                        var cellCount = response.mypage.outerwrapper.innerwrapper.rows[x].cells.length;
                        for (y = 0; y < cellCount; y += 1) {
                            cellProperty = response.mypage.outerwrapper.innerwrapper.rows[x].cells[y];
                            var cellLabel = cellProperty.label;
                            if (cellLabel === "FirstName") {
                                $("tr#" + itemRowsID + "td[aria-describedby='myjqgrid_" + cellLabel + "']").append("<div style='display:none;position:absolute;z-index:1000' id='overlay'>"+cellProperty.value+"</div>");
                            }
                        }
                    }
                }
            });
        }
    });
});

Can someone please help?

解决方案

Your current code have some problems:

You create "overlay" divs in every row of the grid, but all the dives receive the same id: "overlay". HTML don't permit use id duplicates on one page.
You place the hidden div inside on the editable cell. The method editRow overwite the full content of the cell with <input> element. So the overlay div will be removed and can't be shown after the call of editRow. So you have to either move the overlay div to somewhere outside of the cell or save the text from the overlay's content somewhere else and create it dynamically somewhere near to editing of the row.

To place the overlay under the <input> element I recommend you to use jQuery UI Position.

这篇关于jqgrid-在内联编辑模式下显示覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！