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

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

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

Заранее благодарен!

источник

2010-01-28 bakerjr

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

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

источник

2010-01-28 15:38:43

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

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

Надеется, что это помогает.

источник

2014-09-01 07:27:52

Это сработало для меня, tqvm. –

Я изменил некоторые фрагменты кода, которые я нашел. Я хотел использовать JSON с локальными данными, а также поставить datepicker как часть кнопки add row, и это сработало.

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>

источник

2014-09-11 17:10:58

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

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

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

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

источник

2016-10-01 05:51:23

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

ответ

Смежные вопросы