如何在 jqGrid 的添加行对话框中添加日期选择器？答案

【问题标题】：How do I add datepicker in the add row dialog in jqGrid?如何在 jqGrid 的添加行对话框中添加日期选择器？
【发布时间】：2010-01-28 06:39:20
【问题描述】：

您好，我正在使用 jqGrid，我想知道，如何在添加行对话框中将 jQueryUI 的日期选择器添加到某些输入字段？

另外我如何检查输入的输入是否有效？

提前致谢！

【问题讨论】：

标签： jquery jquery-ui jqgrid

【解决方案1】：

在不久前我自己对此进行了研究之后，这是我根据其他人的各种输入将其混合在一起的。我假设您已经拥有 CSS 和 JS datepicker 文件。如果没有，请告诉我，我会为您追踪它们。在 <head> 标记内，将以下 after 您的 <link rel="stylesheet"... href="css/ui.jqgrid.css" /> 行放置：

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />

然后，仍然在<head> 标签内，请在您的<script src="js/jquery-ui-1.7.2.custom.min.js" ...></script> 之后插入以下

<script type="text/javascript" src="js/ui.datepicker.js"></script>

现在，在 colmodel 数组中，您要将 datepicker JS 代码添加到将使用 datepicker 的字段中。就我而言，我有一个“上次修改日期”字段。所以在 colmodel 数组中，你的代码应该是这样的：

{name:'last_modified_date', index:'last_modified_date', width:90, editable:true, editoptions:{size:20, 
                  dataInit:function(el){ 
                        $(el).datepicker({dateFormat:'yy-mm-dd'}); 
                  }, 
                  defaultValue: function(){ 
                    var currentTime = new Date(); 
                    var month = parseInt(currentTime.getMonth() + 1); 
                    month = month <= 9 ? "0"+month : month; 
                    var day = currentTime.getDate(); 
                    day = day <= 9 ? "0"+day : day; 
                    var year = currentTime.getFullYear(); 
                    return year+"-"+month + "-"+day; 
                  } 
                } 
              },

另外，我确定您已经检查过了，但请务必访问jqGrid wiki。 wiki 有该工具的文档，博客也有论坛，每天都会提出问题。事实上，我认为插件的作者 Tony 在他的示例页面上甚至有一个 UI 日期选择器示例。

希望对您有所帮助。

【讨论】：

【解决方案2】：

您需要将此行添加到updateDialog 或addDialog：

afterShowForm: function (formId) {
            $("#CreationDate").datepicker();
        }

希望这会有所帮助。

【讨论】：

【解决方案3】：

要在创建/编辑弹出窗口中获取日期选择器，您需要将此行添加到 updateDialog 或 addDialog：

afterShowForm: function (formId) {
    $("#CreationDate").datepicker();
}

如果要格式化，可以在 datepicker()..like 中设置 format 选项：

afterShowForm: function (formId) { $("#CreationDate").datepicker({
           dateFormat: "dd/M/yy"});}

【讨论】：

【解决方案4】：

我修改了一些我找到的代码sn-ps。我想将 JSON 与本地数据一起使用，并将日期选择器作为我的添加行按钮的一部分，这很有效。

Javascript:
...
<script type="text/javascript">
    // Here we set the altRows option globally
    jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
<script>
    $(function() {
        $("#datepicker").datepicker();
    });
</script>
<script type="text/javascript">
    $(function () {
        $("#list").jqGrid({
            datatype: "jsonstring",
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; }
            },
            colNames: ['Date', 'Customer ID', 'Customer Name', 'Action'],
            colModel: [
                { name: 'date' , index: 'date', width: 70, align: "center" },
                { name: 'custID' , index: 'custID', width: 70, align: "center" },
                { name: 'custName', index: 'custName', width: 150, align: "center", sortable: false },
                { name: 'custID', index: 'custID', width: 50, align: "center", sortable: false, formatter: editLink },
            ],
            width: "650",
            pager: "#pager",
            rowNum: 10,
            rowList: [10, 20, 30],
            viewrecords: true,
            gridview: true,
            autoencode: true 
            //,
            //caption: "jqGrid Example"
        }); 
    }); 

</script>
<script type="text/javascript">
function editLink(cellValue, options, rowdata, action) {
    return '<button onclick=editcall("' + rowdata.date + '","' + rowdata.custID + '","' + rowdata.custName + '")>edit</button>';
}

function editcall(date, custID, custName) {
    $("#datepicker").val(date)
    $("#Text1").val(custID)
    $("#Text2").val(custName)
}

function addnewRow() {
    var grid = jQuery("#list");
    var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() };
    var recnum = grid.getGridParam('records');
    grid.jqGrid('addRowData', recnum, myData);
    $("#datepicker").val("");
    $("#Text1").val("");
    $("#Text2").val("")
}

function updateRow() {
    var grid = jQuery("#list");
    var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() };
    var recnum = grid.jqGrid('getGridParam', 'selrow');
    grid.jqGrid('setRowData', recnum, myData);
    $("#datepicker").val("");
    $("#Text1").val("");
    $("#Text2").val("")
}

HTML:
...
<div>
        <input type="text" id="datepicker" size="15">&nbsp;&nbsp;
        <input id="Text1" type="text" size="15"/>&nbsp;&nbsp;
        <input id="Text2" type="text" size="20"/>&nbsp;&nbsp;
        <button onclick="addnewRow()">Submit</button>&nbsp;&nbsp;
        <button onclick="updateRow()">Update</button>&nbsp;&nbsp;
        <input id="Button1" type="button" value="Add Row" onclick="return addnewRow();" />

        <table id="list">
            <tr>
                <td></td>
            </tr>
        </table>
        <div id="pager"></div>
    </div>

【讨论】：