分享程序员开发的那些事...
更新时间：2023-10-19 13:35:04
您的代码中的主要问题是 JSON 数据不包含 size 和 maxlength 属性.如果不使用 editoptions 的 size 属性，则 width: 98% 将通过 的内联编辑来设置.输入> 并且没有地方显示按钮.
下一个问题是您使用 "name": "Date" 作为 Date 列，但使用 $("#" + id + "_date")而不是代码中的 $("#" + id + "_Date") .所以不会初始化日期选择器.
其他问题:如果您包含 jquery-ui-1.8.14.custom.min.js，则 datepicker 的代码将已包含，而您没有需要另外包含 jquery.ui.datepicker.js.
最后一个问题是 datepicker 与 showOn: 'button' 仅当您在单独的线程中启动 datepicker 时才有效code>setTimeout JavaScript 函数.
修复上述问题后，代码将可以工作(参见 )
我个人宁愿不要在按钮中使用任何图像，而是使用 jQuery UI 按钮.我创建了 另一个演示，它展示了看起来更好的方式.
我将定义为日期的列
{ name: 'invdate', index: 'invdate', width: 110, template: dateTemplate }使用 模板.dateTemplate 我将定义为
var dateTemplate = {align: 'center', sorttype: 'date', editable: true,格式化程序:日期"，格式选项:{ newformat:d-M-Y"}，datefmt:d-M-Y"，编辑选项:{ dataInit:initDateWithButton，大小:11 }，搜索选项:{sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],数据初始化:initDateWithButton，size: 11,//高级搜索对话框attr: {size: 11}//用于搜索工具栏}};(您可以选择任何符合您要求的日期格式).函数initDateWithButton可以定义为
var initDateWithButton = function (elem) {if (/^d+%$/.test(elem.style.width)) {//从搜索工具栏中删除 %elem.style.width = '';}//能够在提前搜索对话框中使用日期选择器的showOn"选项//或者在编辑中我们必须使用 setTimeout设置超时(函数(){$(elem).datepicker({dateFormat: 'dd-M-yy',showOn: '按钮',更改年份:是的，更改月份:真，节目周刊:是的，显示按钮面板:真，onClose: 函数 (dateText, inst) {inst.input.focus();}});$(elem).next('button.ui-datepicker-trigger').button({文字:假的，图标:{主要:'ui-icon-calculator'}}).find('span.ui-button-text').css('padding', '0.1em');}, 100);};结果你会得到如图所示的日期选择器
The calendar icon is not showing up when in inline editing mode. I'm using 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 Definition
$(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'});
}
});
});
The main problem in your code that the JSON data don't includes size and maxlength properties. If one don't use size property of the editoptions the width: 98% will be set by inline editing on the <input> and one will have no place to display the button.
The next problem is that you use "name": "Date" for the Date column, but uses $("#" + id + "_date") instead of $("#" + id + "_Date") in your code. So the datepicker will be not initialized.
Additional problem: if you include jquery-ui-1.8.14.custom.min.js the code of the datepicker will be already included and you don't need to include jquery.ui.datepicker.js additionally.
The last problem is that datepicker with showOn: 'button' works only if you start datepicker in the separate thread with respect of setTimeout JavaScript function.
After fixing the described above problem the code will work (see the demo), but the position of the icon will be not so nice:
To fix the position of the <img> you can use the following code directly after the datepicker initialization:
$("#" + id + ' img.ui-datepicker-trigger').css({
position: "relative",
top: "4px"
});
As the result you will have the following results (see the demo)
I personally would prefer don't use any images in the buttons and use jQuery UI Buttons instead. I created one more demo which shows the way which looks me better.
The column with the date I would defines as
{ name: 'invdate', index: 'invdate', width: 110, template: dateTemplate }
using template. The dateTemplate I would define as
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
}};
(the format of the date you can choose any which corresponds your requirements). The function initDateWithButton can be defined as
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);
};
As the result you would have the datepicker which looks like on the picture