1

我无法将 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>

当上面的代码执行时，它会显示输出，但不会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>
4

3 回答 3

5

我建议你完全重写你的代码。最重要的问题：

  • 你需要使用<!DOCTYPE html ...>。这非常重要，因为没有<!DOCTYPE>语句的 HTML 会打开jQuery UI 和 jqGrid 不支持的quirks 模式。
  • 您应该在循环中使用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"
  • 你应该使用jQuery.ready而不是 usage 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>
于 2013-01-14T13:15:35.930 回答
1

我没有看到您的代码中包含任何 jquery-ui.js 脚本。例如：

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

如果您不包含该脚本，则您没有加载 jQuery-UI，并且您不能使用 datepicker 小部件。

于 2013-01-14T13:24:05.397 回答
0

也许试试这个：

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();
于 2013-01-14T12:11:17.300 回答