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数据不包含
下一个问题是您在日期列中使用了
其他问题:如果包含
最后一个问题是,仅当您针对
解决上述问题后,代码将可以工作(请参见演示),但是图标的位置不太好:
要固定
1 2 3 4 | $("#" + id + ' img.ui-datepicker-trigger').css({ position:"relative", top:"4px" }); |
作为结果,您将获得以下结果(请参见演示)
我个人更希望不要在按钮中使用任何图像,而应使用jQuery UI Buttons。我又创建了一个演示,展示了让我看起来更好的方式。
我将日期定义为
的列
1 | { name: 'invdate', index: 'invdate', width: 110, 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 }}; |
(您可以选择与您的要求相对应的日期格式)。函数
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); }; |
结果,您将获得与图片类似的日期选择器