jqgrid - 在内联编辑模式下不显示日历图标 [英] jqgrid - calendar icon not showing up in inline editing mode
本文介绍了jqgrid - 在内联编辑模式下不显示日历图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在内联编辑模式下不显示日历图标.我正在使用 jquery.ui.datepicker.js
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><头><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></头><身体><div id="内容"><div 类="用户信息"><table id="myjqgrid"></table><div id="寻呼机"></div><script src="js/myjqgrid.js" type="text/javascript"></script></div></div></身体></html>JSON
<代码>{colModel":[{姓名":身份证"，标签":ID"，宽度":60，对齐":左"，"jsonmap": "cells.0.value",可排序":真},{"名称": "名字",标签":名字"，宽度":100，对齐":左"，"jsonmap": "cells.1.value",可排序":假},{"name": "姓氏",标签":姓氏"，宽度":100，对齐":左"，"jsonmap": "cells.2.value",可排序":假},{名称日期"，标签":日期"，宽度":100，对齐":左"，"jsonmap": "cells.3.value",可排序":假}],colNames":[ID"，名"，姓"，日期"],我的页面": {外包装":{页":1"，总计":1"，记录":20"，内包装":{行":[{"id":"1",细胞":[{价值":12345"，标签":ID"，可编辑":假},{价值":大卫"，标签":名字"，可编辑":假},{价值":史密斯"，标签":姓氏"，可编辑":假},{价值":2012 年 1 月 2 日"，标签":日期"，可编辑":是的，编辑格式":文本"}]},{"id":"2",细胞":[{价值":37546"，标签":ID"，可编辑":假},{价值":威利"，标签":名字"，可编辑":假},{"值":"孔雀",标签":姓氏"，可编辑":假},{价值":2012 年 1 月 2 日"，标签":日期"，可编辑":是的，编辑格式":文本"}]}]}}}}JQGrid 定义
$(document).ready(function () {var serverData = [];var showCalImg = 函数(id){$("#" + id + "_date").datepicker({showOn: '按钮',buttonImageOnly:真，日期格式:'mmddyy'，buttonImage: '图片/日历.gif'});}$.ajax({类型:获取"，网址:myjqgrid.json"，数据: ""，数据类型:json"，成功:函数(响应){var columnData = response.mypage.outerwrapper,columnNames = response.colNames,columnModel = response.colModel;$("#myjqgrid").jqGrid({数据类型:'jsonstring'，datastr:列数据，colNames:列名，colModel:列模型，jsonReader:{根:innerwrapper.rows"，重复项:假},网格视图:是的，寻呼机:#寻呼机"，行号:21，行列表:[21]，观看记录:真实，记录位置:'左'，multiboxonly:真，多选:真，排序名称:'ID'，排序顺序:desc"，排序类型:文本"，可排序:真，标题:<h2>我的 JQGRID</h2>"，宽度:1406"，高度:100%"，滚动偏移量:0，加载一次:真，缓存:真，onSelectRow:函数(id){$("table#myjqgrid").editRow(id, true, showCalImg);},加载完成:函数(){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, {可假});}别的{if (isEditable === true) {$("#myjqgrid").setColProp(cellProperty.label, {可真，编辑类型:cellProperty.editformat，编辑选项:{尺寸:cellProperty.size，最大长度:cellProperty.maxlength}});}}}}}});$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});}});}); 解决方案
您的代码中的主要问题是 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
这篇关于jqgrid - 在内联编辑模式下不显示日历图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
