java - jqgridで日付ピッカーが機能しない

Question

jqGrid に DatePicker を追加できません。

以下は私のコードです。

<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>

datepicker上記のコードを実行すると、出力が表示されますが、sdate列には表示されません。コードのどこかが間違っている場合は教えてください。

私はばかげた間違いをしたと思いますが、それを見つけることができません!

更新以下は、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"/>
<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>

score 5 · Accepted Answer

コードを完全に書き直すことをお勧めします。最も重要な問題:

あなたが使用する必要があります<!DOCTYPE html ...>。<!DOCTYPE>ステートメントのない HTMLは、jQuery UI と jqGrid でサポートされていない互換モードに切り替わるため、非常に重要です。
ループ内でdata: mydata3グリッドを埋める代わりに使用する必要がありますaddRowData
datepicker 一度呼び出す必要があります（現在datepicker、両方dataInitと-oneditfuncのパラメーターで呼び出します）editRowpickdates
すべての 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"
usageの代わりに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>

score 1 · Accepted Answer

コードに jquery-ui.js スクリプトが含まれていません。例えば：

 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

そのスクリプトを含めないと、jQuery-UI がロードされておらず、datepicker ウィジェットを使用できません。

score 0 · Accepted Answer

多分これを試してみてください：

function pickdates(id){
    jQuery("#rowed6 .hasDatepicker").datepicker('destroy');
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}

または、click（）ハンドラーを自動トリガーして、最後にclick（）を追加します。

jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"}).click();

java - jqgridで日付ピッカーが機能しない

3 に答える 3

Related

Reference