jqGrid列日期時間格式化

Question

我有一個jqGrid（最新版本4.6.0）綁定到JSON數據從一個Web服務。我試圖日期格式成m/d/Y H:i A 源數據的日期時間是

'2012-08-20T18:27:25.05' 

應格式化爲

'08/20/2012 06:27 PM' 

但格式到

'08/21/2012 03:25 AM' 

我看看有什麼發生在解析器繞過18並直接進入27的時間翻轉到21日而不是20日，並設置時間到03:25 AM。 這是我的gridCol的格式化程序語句。

formatter: "date", 
formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y H:i A" }, 

我甚至嘗試...

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y g:i A" }, 

和...

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y H:i:s A" }, 

沒有運氣。有什麼想法嗎？

感謝

UPDATE： 這裏是全列的格式設置爲我所討論的列和結果的截圖來實現。

{ name: 'APTDATE', 
    index: 'APTDATE', 
    align: "right", 
    editable: true, 
    editrules: { required: true }, 
    formoptions: { rowpos: 3, colpos: 1 }, 
    formatter: "date", 
    formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" }, 
}, 

包含格式

，不進行格式化

Answer 1

對不起，但我不能重現絕不formatoptions您包括顯示'2012-08-20T18:27:25.05'爲'08/21/2012 03:25 AM'。要帶前導零顯示小時，你應該使用formatter: "date"與h:i，而不是H:i（見jqGrid的使用here PHP日期格式）

formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" } 

The demo顯示正確的格式的日期：

修訂 ：我調試了你發佈的演示。 所述問題的原因是您使用的grid.locale-en.min.js錯誤。將其更換爲原來的grid.locale-en.js可解決該問題。

jqGrid不提供jqGrid文件的完全最小化版本。我親自使用Microsoft Ajax Minifier來生成最小化版本的grid.locale-en.js和ui.jqgrid.css。我經常使用修改版本jquery.jqGrid.src.js，其中包含一些錯誤修復。所以我也從jquery.jqGrid.src.js的修改版本生成新的jquery.jqGrid.min.js。我在jqGrid的標準重新分配中錯過的另一個重要功能是映射文件，它允許在調試器中看到在使用最小化版本（jquery.jqGrid.min.js）期間原始的jquery.jqGrid.src.js。 Microsoft Ajax Minifier允許通過使用–map:v3開關生成Source Map文件。

所以我儘量少原有jquery.jqGrid.src.js，grid.locale-en.js和ui.jqgrid.css文件（所有文件都在下面的例子中，當前目錄）在使用Microsoft Ajax Minifier以下電話：

SET AjaxMinExe=%ProgramFiles(x86)%\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe 
"%AjaxMinExe%" -enc:in utf-8 -clobber:true jquery.jqGrid.src.js -o jquery.jqGrid.min.js -map:v3 jquery.jqGrid.min.map 
"%AjaxMinExe%" -enc:in utf-8 -enc:out utf-8 -clobber:true grid.locale-en.js -o grid.locale-en.min.js -map:v3 grid.locale-en.min.map 
"%AjaxMinExe%" -clobber:true ui.jqgrid.css -o ui.jqgrid.min.css -map:v3 ui.jqgrid.min.map 

我測試使用您的演示原始和最小化的jqGrid文件，兩者都產生相同的正確日期格式。

---

其他一些常見的言論，您的演示代碼：

• 我嚴格推薦使用在所有網格gridview: true選項（參見the answer），這將提高網格性能沒有任何缺點。
• 我建議在您的項目中包含原始ui.jqgrid.css。目前，您在自定義production.min.css中設置了許多CSS規則。它會對您的項目進行復雜的調試，並且將來很難轉移到下一個版本的jqGrid。
• 在您指定的許多規則中使用!important屬性。我不建議你這樣做。僅當需要覆蓋已使用!important的其他CSS設置時，才必須使用!important。在其他情況下，指定更具體的 CSS規則就足夠了。例如，您可以使用jqGrid的height: 300選項而不是.ui-jqgrid .ui-jqgrid-bdiv { height: 300px !important; }，或指定.ui-jqgrid .ui-jqgrid-bdiv { height: 300px; }。
• 據我所知，必須添加一些CSS規則，如果使用bootstrap.css。我發表了一些關於這個問題的建議。你可以嘗試<link>包括bootstrap.min.css和ui.jqgrid.css後添加下列角色：

<style type="text/css"> 
    .ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox { 
     height: auto; 
     width: auto; 
     line-height: inherit; 
    } 
    .ui-jqgrid .ui-pg-table .ui-pg-selbox { 
     padding: 1px; 
    } 
    .ui-jqgrid { line-height: normal; } 
    .ui-jqgrid table { 
     border-collapse: separate; 
     border-style: none; 
     border-top-style: none; 
    } 
    .ui-jqgrid table.ui-jqgrid-btable { 
    } 
    .ui-paging-info { display: inline; } 
    .ui-jqgrid .ui-pg-table { border-collapse: separate; } 
    div.ui-jqgrid-view table.ui-jqgrid-btable td { 
     border-left-style: none 
    } 
    div.ui-jqgrid-view table.ui-jqgrid-htable { 
     border-style: none; 
     border-top-style: none; 
     border-collapse: separate; 
    } 
    div.ui-jqgrid-view table.ui-jqgrid-btable th { 
     border-left-style: none 
    } 
    .ui-jqgrid .ui-jqgrid-htable th div { 
     height: auto; 
    } 
    .ui-jqgrid .ui-jqgrid-resize { 
     height: 18px !important; 
    } 
    .ui-jqgrid .ui-pg-table { 
     padding-bottom: 0; 
    } 
    .ui-jqgrid>.ui-jqgrid-pager { 
     border-right-color: inherit !important; 
     border-right-style: solid !important; 
     border-right-width: 1px !important; 
    } 
    .ui-jqgrid tr.jqgrow td { 
     vertical-align: middle; 
    } 
    .ui-jqgrid tr.jqgrow { 
     height: auto; 
    } 
    .ui-jqgrid .ui-jqgrid-pager { 
     height: auto; 
    } 
</style> 

我得到的規則，從使用bootstrap.css過我的老演示。在你的情況下，你可能需要額外添加

.ui-jqgrid .ui-jqgrid-bdiv { 
    height: auto !important; 
} 
.ui-jqgrid tr.jqgrow td button.btn { 
    margin: 2px 0; 
} 

我認爲上面的CSS會改善你的頁面的外觀。