Question

在内联编辑模式下，日历图标未显示。我正在使用 jquery.ui.datepicker.js

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" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" 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="js/jquery.corner.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>
        <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>       
    </head>
    <body>
        <div id="content">
            <div class="userinfo">
                <table id="myjqgrid"></table>
                <div id="Pager"></div>                  
                <script src="js/myjqgrid.js" type="text/javascript"></script>                   
            </div>
        </div>
    </body>
</html>

JSON

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

JQGrid定义

$(document).ready(function () { 
    var serverData = [];
    var showCalImg = function(id){
        $("#" + id + "_date").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            dateFormat: 'mmddyy',
            buttonImage: 'images/calendar.gif'
        });
    }
    $.ajax({
        type: "GET",
        url: "myjqgrid.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: 21,
                rowList: [21],
                viewrecords: true,              
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                sortname: 'ID',
                sortorder: "desc",  
                sorttype: "text",   
                sortable: true,
                caption: "<h2>MY JQGRID</h2>",
                width: "1406",      
                height: "100%",
                scrolloffset: 0,    
                loadonce: true,     
                cache: true,
                onSelectRow: function(id) {
                    $("table#myjqgrid").editRow(id, true, showCalImg);
                },
                loadComplete: function(){
                    var rowCounter, cellCounter, cellProperty, itemRows;
                    for (rowCounter = 0; rowCounter < response.mypage.outerwrapper.innerwrapper.rows.length; rowCounter++) {
                        itemRows = response.mypage.outerwrapper.innerwrapper.rows[rowCounter];
                        serverData[itemRows.recordnbr] = itemRows.cells;                        
                        var cellCount = response.mypage.outerwrapper.innerwrapper.rows[rowCounter].cells.length;
                        for (cellCounter = 0; cellCounter < cellCount; cellCounter += 1) {
                            cellProperty = response.mypage.outerwrapper.innerwrapper.rows[rowCounter].cells[cellCounter];
                            var isEditable = cellProperty.editable;
                            var cellEditFormat = cellProperty.editformat;
                            if (isEditable === false) {
                                $("#myjqgrid").setColProp(cellProperty.label, {
                                    editable: false
                                });
                            }else{
                                if (isEditable === true) {
                                    $("#myjqgrid").setColProp(cellProperty.label, {
                                        editable: true,
                                        edittype: cellProperty.editformat,
                                        editoptions: {
                                            size: cellProperty.size,
                                            maxlength: cellProperty.maxlength
                                        }
                                    });
                                }
                            }

                        }
                    }
                }
            });
            $("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
        }
    });
});

Answer 1

代码中的主要问题是JSON数据不包含size和maxlength属性。如果不使用size的{{1}}属性，则editoptions上的width: 98%将通过<input>上的内联编辑进行设置，而且无法显示按钮。< / p>

下一个问题是您使用"name": "Date"作为日期列，但在代码中使用$("#" + id + "_date")代替$("#" + id + "_Date")。所以datepicker将不会被初始化。

其他问题：如果您添加jquery-ui-1.8.14.custom.min.js，则datepicker的代码已包含在内，您无需另外添加jquery.ui.datepicker.js。

最后一个问题是datepicker showOn: 'button'只有在datepicker JavaScript函数的单独线程中启动setTimeout时才有效。

修复上述问题后，代码将起作用（参见the demo），但图标的位置不会那么好：

enter image description here

要修复<img>的位置，您可以在datepicker初始化后直接使用以下代码：

$("#" + id + ' img.ui-datepicker-trigger').css({
    position: "relative",
    top: "4px"
});

结果您将得到以下结果（请参阅the demo）

enter image description here

我个人更喜欢不使用按钮中的任何图像，而是使用jQuery UI按钮。我创建了one more demo，它显示了让我看起来更好的方式。

具有我将定义为

的日期的列

{ name: 'invdate', index: 'invdate', width: 110, template: dateTemplate }

使用template。我将dateTemplate定义为

var dateTemplate = {align: 'center', sorttype: 'date', editable: true,
        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y',
        editoptions: { dataInit: initDateWithButton, size: 11 },
        searchoptions: {
            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
            dataInit: initDateWithButton,
            size: 11,          // for the advanced searching dialog
            attr: {size: 11}   // for the searching toolbar
        }};

（您可以选择任何符合您要求的日期格式）。函数initDateWithButton可以定义为

var initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            // remove % from the searching toolbar
            elem.style.width = '';
        }
        // to be able to use 'showOn' option of datepicker in advance searching dialog
        // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,
                showWeek: true,
                showButtonPanel: true,
                onClose: function (dateText, inst) {
                    inst.input.focus();
                }
            });
            $(elem).next('button.ui-datepicker-trigger').button({
                text: false,
                icons: {primary: 'ui-icon-calculator'}
            }).find('span.ui-button-text').css('padding', '0.1em');
        }, 100);
    };

结果你会得到类似于图片的日期选择器

enter image description here

jqgrid - 日历图标未显示为内联编辑模式

1 个答案: