Как добавить datepicker в диалоговом окне добавления строки в jqGrid?

Привет, я использую jqGrid, и мне интересно, как добавить jQueryUI datepicker в некоторые поля ввода в диалоговом окне добавления строки?

Также как проверить правильность введенного ввода?

Спасибо заранее!

Ответы

Ответ 1

После того, как я проверил это самостоятельно некоторое время назад, это то, что я собрал вместе, основываясь на различных материалах от других. Я полагаю, что у вас уже есть файлы датпикера CSS и JS. Если нет, дайте мне знать, и я отслежу их за вас. В тегах <head> поместите следующую после строку <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, вы собираетесь добавить свой JS-код datepicker в поле, в котором будет использоваться datepicker. В моем случае у меня было поле "Last Modified Date". Поэтому в массиве 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. У вики есть документация для инструмента, и в блоге также есть форумы, на которых задаются вопросы ежедневно. На самом деле, я думаю, что у Тони, автора плагина, даже есть пример датпикера UI на его странице примера.

Надеюсь, это поможет.

Ответ 2

Вам нужно добавить эти строки в updateDialog или в addDialog:

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

Надеюсь, что это поможет.

Ответ 3

Чтобы получить datepicker во всплывающем окне create/edit, вам нужно добавить эти строки в updateDialog или в addDialog:

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

Если вы хотите отформатировать его, вы можете установить формат в datepicker().. например:

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

Ответ 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>