关于json:jqgrid-日历图标未在内联编辑模式下显示

 2021-04-26 

jqgrid - calendar icon not showing up in inline editing mode

在嵌入式编辑模式下,日历图标未显示。我正在使用jquery.ui.datepicker.js

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
<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" />
        Jquery Grid
        <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 src="js/jquery-ui-1.8.14.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.corner.js" type="text/javascript">      
        <script src="plugins/ui.multiselect.js" type="text/javascript">
        <script src="plugins/jquery.tablednd.js" type="text/javascript">
        <script src="plugins/jquery.contextmenu.js" type="text/javascript">
        <script src="js/jquery.ui.datepicker.js" type="text/javascript">      
    </head>
    <body>
       
           
                <table id="myjqgrid"></table>
                                 
                <script src="js/myjqgrid.js" type="text/javascript">                  
           
       
    </body>
</html>

JSON

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
{
   "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定义

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
82
83
84
85
$(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:"MY JQGRID",
                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'});
        }
    });
});

代码中的主要问题是JSON数据不包含sizemaxlength属性。如果不使用editoptionssize属性,则将通过在<input>上进行内联编辑来设置width: 98%,并且没有位置显示按钮。

下一个问题是您在日期列中使用了"name":"Date",但是在代码中使用了$("#" + id +"_date")而不是$("#" + id +"_date")。因此,日期选择器将不会初始化。

其他问题:如果包含jquery-ui-1.8.14.custom.min.js,则datepicker的代码将已经包含在内,而无需另外包含jquery.ui.datepicker.js

最后一个问题是,仅当您针对setTimeout JavaScript函数在单独的线程中启动datepicker时,带datepickerdatepicker才起作用。

解决上述问题后,代码将可以工作(请参见演示),但是图标的位置不太好:

enter

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

作为结果,您将获得以下结果(请参见演示)

enter

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

使用template。我将dateTemplate定义为

1
2
3
4
5
6
7
8
9
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可以定义为

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
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