Question

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

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

提前致谢！

Answer 1

在我自己研究了这一段时间之后，这是我根据其他人的各种意见捣碎在一起的东西。我假设您已经拥有CSS和JS datepicker文件。如果没有，请告诉我，我会为您追踪它们。在<head>代码中，将以下放在后的<link rel="stylesheet"... href="css/ui.jqgrid.css" />行：

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

然后，仍然在<head>标记内，请在<{1}} 之后插入以下

<script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>

现在，在colmodel数组中，您将把datepicker JS代码添加到将使用datepicker的字段中。就我而言，我有一个“上次修改日期”字段。因此，在colmodel数组中，您的代码应如下所示：

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

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

希望这有帮助。

Answer 2

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

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

希望这有帮助。

Answer 3

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

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

如果要格式化，可以在datepicker（）中设置格式选项..比如：

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

Answer 4

我修改了一些我发现的代码片段。我想使用JSON和本地数据，以及将datepicker作为我的添加行按钮的一部分，这很有效。

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>

如何在jqGrid的添加行对话框中添加datepicker？

4 个答案: