Как избежать прерывания даты, нажав кнопку сохранения в свободном jqgrid inline edit

Исходный html выбор даты с использованием кода от How to use input type='date' for date column in jqGrid используется для редактирования поля даты в бесплатном jqgrid. Сохранение строки с помощью кнопок даты панели инструментов искажает значение даты.Как избежать прерывания даты, нажав кнопку сохранения в свободном jqgrid inline edit

Шаги для воспроизведения:

Открыть страницу ниже в Chrome
Нажмите в первом ряду, чтобы изменить его
Нажмите кнопку Сохранить на панели инструментов

Наблюдаемые: появляется дата 29.03.2037 ,

Ожидаемое: Дата должна сохранить свое значение, 31.10.2007

Как это исправить?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>https://stackoverflow.com/q/26040738/315935</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <meta name="author" content="Oleg Kiriljuk"/> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/> 
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <style type="text/css"> 
     html, body { font-size: 75%; } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script> 
    <script type="text/javascript"> 
     $.jgrid = $.jgrid || {}; 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 
    </script> 
    <script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
     /*global $,Modernizr */ 
     /*jslint browser: true, unparam: true */ 
     $(function() { 
      "use strict"; 
      var mydata = [ 
        { id: "10", invdate: "", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, 
        { id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }, 
        { id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" }, 
        { id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" }, 
        { id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" } 
       ], 
       $grid = $("#list"), 
       initDateEdit = function (elem, options) { 
        // we need get the value before changing the type 
        var orgValue = $(elem).val(), newformat, 
         cm = $(this).jqGrid("getColProp", options.name); 

        $(elem).attr("type", "date"); 
        if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") { 
         // if type="date" is not supported call jQuery UI datepicker 
         $(elem).css({ width: "8em" }).datepicker({ 
          dateFormat: "d.m.Y", 
          autoSize: true, 
          changeYear: true, 
          changeMonth: true, 
          showButtonPanel: true, 
          showWeek: true 
         }); 
        } else { 
         // convert date to ISO 
         if (orgValue !== "") { 
          //newformat = cm.formatoptions != null && cm.formatoptions.newformat ? 
          // cm.formatoptions.newformat : 
          // $(this).jqGrid("getGridRes", "formatter.date.newformat"); 
newformat="d.m.Y"; 
          $(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d")); 
         } 
         // "10em" is better for Chrome and "11em" for Opera 24 
         $(elem).css("width", /OPR/.test(navigator.userAgent) ? "11em" : "10em"); 
        } 
       }, 
       myBeforeSaveRow = function (options, rowid) { 
        var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]"); 
        $dates.each(function() { 
         var $this = $(this), newformat, str, 
          id = $this.attr("id"), 
          colName = id.substr(rowid.length + 1), 
          cm = $self.jqGrid("getColProp", colName); 
         if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") { 
          // convert from iso to newformat 
          str = $this.val(); 
          if (str !== "") { 
           //newformat = cm.formatoptions != null && cm.formatoptions.newformat ? 
           // cm.formatoptions.newformat : 
           // $self.jqGrid("getGridRes", "formatter.date.newformat"); 
newformat="d.m.Y"; 

           str = $.jgrid.parseDate.call($self[0], "Y-m-d", str, newformat); 
          } 
          $this.attr("type", "text"); 
          $this.val(str); 
         } 
        }); 
       }, 
       initDateSearch = function (elem) { 
        setTimeout(function() { 
         $(elem).datepicker({ 
          dateFormat: "mm/dd/yy", 
          autoSize: true, 
          changeYear: true, 
          changeMonth: true, 
          showWeek: true, 
          showButtonPanel: true 
         }); 
        }, 50); 
       }, 
       numberTemplate = {formatter: "number", align: "right", sorttype: "number", 
        editrules: {number: true, required: true}, 
        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }}; 

      $grid.jqGrid({ 
       datatype: "local", 
//loadComplete: function() { 
// $grid.jqGrid('setGridParam', { datatype: 'json' }); 
//}, 
       data: mydata, 
       colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"], 
       colModel: [ 
        { name: "name", align: "center", editable: true, width: 65, editrules: {required: true} }, 
        { name: "invdate", width: 125, align: "center", sorttype: "date", 
         formatter: "date", formatoptions: { newformat: "d.m.Y"}, editable: true, 
         editoptions: { dataInit: initDateEdit }, 
         searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } }, 
        { name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox", 
         edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, 
         stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } }, 
        { name: "ship_via", width: 105, align: "center", editable: true, formatter: "select", 
         edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" }, 
         stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } }, 
        { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" }, 
        { name: "tax", width: 52, editable: true, template: numberTemplate }, 
        { name: "amount", width: 75, editable: true, template: numberTemplate }, 
        { name: "total", width: 60, template: numberTemplate } 
       ], 
       rowNum: 10, 
       rowList: [5, 10, 20], 
       iconSet: "fontAwesome", 
       pager: "#pager", 
       gridview: true, 
       autoencode: true, 
       ignoreCase: true, 
       sortname: "invdate", 
       viewrecords: true, 
       sortorder: "desc", 
       height: "auto", 
       rownumbers: true, 
       editurl: "clientArray", 
//editurl: "http://cdn.jsdelivr.net/test", 
     toppager: true, 

       onSelectRow: function (rowid) { 
        var $self = $(this), 
         savedRow = $self.jqGrid("getGridParam", "savedRow"); 
        if (savedRow.length > 0) { 
         $self.jqGrid("restoreRow", savedRow[0].id); 
        } 
        $self.jqGrid("editRow", rowid, { 
         keys: true, 
         beforeSaveRow: myBeforeSaveRow 
        }); 
       } 
      }); 

    $.extend(true,$.jgrid.edit, { 
     closeAfterAdd: true, 
     navkeys: [true,33,34], 
     savekey: [true, 13], 
     recreateForm: true, 
     reloadAfterSubmit: false, 
     left: 10, 
     top: 15, 
     dataheight: '100%', 
     width: window.innerWidth - 18 
    }); 



     $grid.jqGrid("navGrid", "#list_toppager", { 
edit: true 
}); 

     $grid.jqGrid('inlineNav', '#list_toppager', { 
edit: true 
}); 


     }); 
    //]]> 
    </script> 
</head> 
<body> 
    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
</body> 
</html>

источник

2015-03-22 Andrus

код, который вы в курсе, есть две небольшие проблемы:

вы используете неправильный вариант JQuery UI Datepicker. dateFormat: "d.m.Y" следует установить на dateFormat: "dd.mm.yy".
вы должны использовать beforeSaveRow: myBeforeSaveRowво всех встроенных редакциях. В текущем коде используется только случай начала редактирования путем прямого вызова editRow внутри onSelectRow.

Я предлагаю вам использовать inlineEditing возможность свободного jqGrid:

onSelectRow: function (rowid) { 
    var $self = $(this), 
     savedRow = $self.jqGrid("getGridParam", "savedRow"); 
    if (savedRow.length > 0 && savedRow[0].id !== rowid) { 
     $self.jqGrid("restoreRow", savedRow[0].id); 
    } 
    $self.jqGrid("editRow", rowid); 
}, 
inlineEditing: { 
    // if defines COMMON inline editing options 
    keys: true, 
    beforeSaveRow: myBeforeSaveRow 
}

см the demo.

источник

2015-03-22 14:26:12 Oleg

спасибо. Я использовал '$ .extend ($. Jgrid.inlineEdit, { ключей: true, beforeSaveRow: myBeforeSaveRow, ...}) '. Это нормально ? Может '$ .extend ($. Jgrid.inlineEdit' использовать как одно место для передачи параметров 3 всем методам (кнопка действия, кнопка панели инструментов, вызов editRow при щелчке по строке), который может использоваться для начала встроенного редактирования? Будет ли он передавать myBeforeSaveRow для формирования редактирование также или редактирование по-прежнему требует отдельного метода? – Andrus

@ Andrus: Я сделал больше изменений в коде ** бесплатного jqGrid **. Теперь вам не нужно больше использовать 'beforeSaveRow: myBeforeSaveRow'. Free jqGrid сделать все работайте внутри него '' have 'type =" date "'. См. [ответ] (http://stackoverflow.com/a/29197989/315935). В общем случае можно использовать '$ .extend ($. jgrid .inlineEdit, {...}) 'для установки параметров по умолчанию ** для всех сеток **. Опция' inlineEditing: {...} 'имеет практическое значение для установки встроенного параметра редактирования * на одну сетку *. – Oleg

Как избежать прерывания даты, нажав кнопку сохранения в свободном jqgrid inline edit

ответ

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