那些遇到过的问题

datepicker不适用于jqgrid

1 java jquery datepicker jqgrid

我无法将DatePicker添加到jqGrid,

以下是我的代码.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js"  type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js"  type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
</head>
<script>

var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{        dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:    
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",   
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
    if(id && id!==lastsel3){
        jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
        jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
        lastsel3=id;
    }
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},                                                 
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
        {id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
        ];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
    <table id="rowed6"></table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

当上面的代码执行时,它显示输出,但它不会显示datepicker在sdate列中.如果我在代码中的某个地方错了,请告诉我!

我想我犯了一个愚蠢的错误,但无法找到它!

更新 以下是使用jqGrid的datepicker的工作示例,

以下是datepicker使用jqGrid的工作示例..

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js"  type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js"  type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head>
<script>

var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{        dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:    
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",   
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
    if(id && id!==lastsel3){
        jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
        jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
        lastsel3=id;
    }
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},                                                 
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
        {id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
    ];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
    <table id="rowed6"></table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Ole*_*leg 5

我建议你完全重写你的代码.最重要的问题:

  • 你需要使用<!DOCTYPE html ...>.这非常重要,因为没有<!DOCTYPE>语句的HTML会在quirks模式下切换,jQuery UI和jqGrid不支持.
  • 你应该使用data: mydata3而不是addRowData在循环中填充网格
  • 你需要打电话datepicker 一次(目前你打电话给datepicker两个dataInit和oneditfunc参数editRow- pickdates)
  • 您需要包含每个CSS和JavaScript文件一次.例如"js/jquery-ui-1.9.2.custom.css"应该足够了.它应该包含jQuery UI的所有CSS(包括ui.datepicker.css).所以,你应该删除与线条"css/ui.datepicker.css","css/jquery-ui.css",css/jquery.ui.theme.css和"css/jquery.ui.datepicker.css"
  • 你应该使用jQuery.ready而不是用法onload.
  • 你应该定义一些函数内部的所有变量(比如里面$(function () {/*here*/})).在这种方式中你将没有全局变量.
  • <在HTML页面中使用内联代码时,您应该注意特殊字符(如)的编码.例如,尝试验证http://validator.w3.org/上的页面,您会发现我所说的错误.
  • 我会严格建议您使用gridview: true以提高性能和使用autoencode: true,以确保jqGrid可以显示网格中的任何文本.

更新:该演示展示了如何修改代码的示例.下面是完整的HTML代码.我使用了所有JavaScript文件的非最小化版本来进行更好的调试.生产代码应使用相应文件的最小化版本:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/14318014/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        $(function () {
            "use strict";
            var mydata = [
                    {id: "12345", name: "Desktop Computer", note: "note",      stock: "Yes", ship: "FE", sdate: "2007-12-03"},
                    {id: "23456", name: "Laptop",           note: "Long text", stock: "Yes", ship: "IN", sdate: "2007-12-03"},
                    {id: "34567", name: "LCD Monitor",      note: "note3",     stock: "Yes", ship: "TN", sdate: "2007-12-03"},
                    {id: "45678", name: "Speakers",         note: "note",      stock: "No",  ship: "AR", sdate: "2007-12-03"},
                    {id: "56789", name: "Laser Printer",    note: "note2",     stock: "Yes", ship: "FE", sdate: "2007-12-03"},
                    {id: "67890", name: "Play Station",     note: "note3",     stock: "No",  ship: "FE", sdate: "2007-12-03"},
                    {id: "76543", name: "MobileTelephone",  note: "note",      stock: "Yes", ship: "AR", sdate: "2007-12-03"},
                    {id: "87654", name: "Server",           note: "note2",     stock: "Yes", ship: "TN", sdate: "2007-12-03"},
                    {id: "98765", name: "Matrix Printer",   note: "note3",     stock: "No",  ship: "FE", sdate: "2007-12-03"}
                ],
                $grid = $("#rowed6"),
                initDate = function (elem) {
                    $(elem).datepicker({
                        dateFormat: "yy-mm-dd",
                        //autoSize: true,
                        defaultDate: new Date(2007, 11, 3),
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true,
                        onSelect: function () {
                            var $grid, grid;
                            if (typeof (elem.id) === "string" && elem.id.substr(0, 3) === "gs_") {
                                $grid = $(elem).closest("div.ui-jqgrid-hdiv")
                                            .next("div.ui-jqgrid-bdiv")
                                            .find("table.ui-jqgrid-btable:first");
                                if ($grid.length > 0) {
                                    grid = $grid[0];
                                    if ($.isFunction(grid.triggerToolbar)) {
                                        grid.triggerToolbar();
                                    }
                                }
                            } else {
                                // to refresh the filter
                                $(elem).trigger("change");
                            }
                        }
                    });
                },
                dateTemplate = {align: "center", sorttype: "date", width: 94,
                    editrules: { date: true }, editoptions: { dataInit: initDate },
                    searchoptions: {
                        sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
                        attr: { maxlength: 10, size: 11 }, // for searching toolbar
                        maxlength: 10, size: 11, // for searching dialog
                        dataInit: initDate
                    },
                    formatter: "date", formatoptions: { srcformat: "ISO8601Short", newformat: "Y-m-d" }},
                lastsel3;

            $grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ["Last Sales", "Name", "Stock", "Ship via", "Notes"],
                colModel: [
                    { name: "sdate", template: dateTemplate },
                    { name: "name", width: 115, editoptions: {maxlength: "30"} },
                    { name: "stock", width: 70, align: "center", editable: true, formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
                    { name: "ship", width: 105, align: "center", editable: true, formatter: "select",
                        edittype: "select", editoptions: { value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX", defaultValue: "AR" },
                        stype: "select", searchoptions: { sopt: ["eq", "ne"],
                        value: ":Any;FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX" } },
                    { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" }
                ],
                cmTemplate: {editable: true},
                rowNum: 10,
                rowList: [5, 10, 100],
                pager: "#pager",
                gridview: true,
                rownumbers: true,
                autoencode: true,
                ignoreCase: false,
                viewrecords: true,
                sortname: "sdate",
                sortorder: "desc",
                height: "100%",
                onSelectRow: function (id) {
                    if (id && id !== lastsel3) {
                        $(this).jqGrid("restoreRow", lastsel3);
                        $(this).jqGrid("editRow", id, true);
                        lastsel3 = id;
                    }
                },
                editurl: "/MyServletNameHere",
                caption: "Date Picker Integration"
            });
            $.extend($.jgrid.search, {
                recreateFilter: true,
                multipleSearch: true,
                multipleGroup: true,
                closeOnEscape: true,
                closeAfterSearch: true,
                overlay: 0,
                searchOnEnter: true
            });

            $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
            $grid.jqGrid("filterToolbar", {defaultSearch: "cn", stringResult: true});
        });
    //]]>
    </script>
</head>
<body>
    <table id="rowed6"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

5423 次

最近记录：

12 年，2 月 前
相关归档
在Java中将'ArrayList <String>转换为'String []' 962
android上的非活动InputConnection警告的getExtractedText 120
JavaScript相当于jQuery的extend方法 85
通过注释使用Hibernate UUIDGenerator 69
HttpClient 4 - 如何捕获上次重定向URL 50
我如何使ANT冗长？ 44
用Java导入自定义类 42
如何在Ember中使用jsTree插件 40
Google Plus一键回拨 - 任何"订阅"+1操作的方式？ 17
我可以从datepicker获得毫秒日期值吗？(自1970年以来的毫秒数值) 0
难疑归档
如何制作一个很好的R可重复的例子 2474
使用jQuery禁用/启用输入？ 2216
SQL Server中的LEFT JOIN与LEFT OUTER JOIN 1514
如何在JavaScript中合并两个数组并重复删除项目 1256
"this"关键字如何运作？ 1243
如何撤消"git commit --amend"而不是"git commit" 1198
Android SDK安装找不到JDK 1185
Vim最有效的捷径是什么？ 1127
让Chrome接受自签名的localhost证书 1080
参考 - 这个错误在PHP中意味着什么？ 1071