jqgrid-内联编辑模式下未显示日历图标 [英] jqgrid - calendar icon not showing up in inline editing mode
问题描述
在嵌入式编辑模式下,日历图标未显示.我正在使用 jquery.ui.datepicker.js
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定义
$(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'});
}
});
});
推荐答案
代码中的主要问题是JSON数据不包含size
和maxlength
属性.如果不使用editoptions
的size
属性,则会通过在<input>
上进行内联编辑来设置width: 98%
,并且没有位置显示按钮.
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.
下一个问题是您在日期列中使用了"name": "Date"
,但是在代码中使用了$("#" + id + "_date")
而不是$("#" + id + "_Date")
.因此,日期选择器将不会初始化.
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.
其他问题:如果包含jquery-ui-1.8.14.custom.min.js
,则datepicker
的代码将已经包含在内,而无需另外包含jquery.ui.datepicker.js
.
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.
最后一个问题是,仅当在setTimeout
JavaScript函数方面在单独的线程中启动datepicker
时,带datepicker
的datepicker
才有效.
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:
要固定<img>
的位置,可以在datepicker
初始化后直接使用以下代码:
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)
我个人更希望不要在按钮中使用任何图像,而应使用jQuery UI Buttons.我创建了另一个演示,它展示了让我看起来更好的方式.
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.
我将日期定义为的列
{ 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
可以定义为
(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
这篇关于jqgrid-内联编辑模式下未显示日历图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!