Как добавить указатель даты в диалоге добавления строки в jqGrid? - PullRequest
Новая
       11

Как добавить указатель даты в диалоге добавления строки в jqGrid?

13 голосов
/ 28 января 2010

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

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

Заранее спасибо!

Ответы [ 4 ]

17 голосов
/ 28 января 2010

После того, как я некоторое время назад исследовал это сам, это то, что я собрал вместе, основываясь на различном мнении других. Я предполагаю, что у вас уже есть файлы 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>, вставьте следующее после вашего <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. В моем случае у меня было поле «Дата последнего изменения». Таким образом, в массиве 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 . В вики есть документация по этому инструменту, а в блоге также есть форумы, на которых ежедневно задаются вопросы. На самом деле, я думаю, что Тони, автор плагина, даже имеет пример DatePicker с пользовательским интерфейсом на своей странице примера.

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

2 голосов
/ 01 сентября 2014

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

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

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

1 голос
/ 01 октября 2016

Чтобы получить указатель даты во всплывающем окне создания / редактирования, необходимо добавить следующие строки в updateDialog или addDialog: 

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

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

afterShowForm: function (formId) { $("#CreationDate").datepicker({
           dateFormat: "dd/M/yy"});}
0 голосов
/ 11 сентября 2014

Я изменил некоторые фрагменты кода, которые я нашел. Я хотел использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...