Jqgrid：viewGridRow屬性不起作用

Question

嗨我正在Concrete5 CMS中工作，我使用jQuery jqGrid 4.5.4版本。我在查看窗體中使用jqgrid時遇到了問題。 （i）。首先標籤和數據崩潰

（ii）。描述是顯示長行，我想在分割基於寬度的多個線（我想是這樣的演示http://www.ok-soft-gmbh.com/jqGrid/WrappingInViewForm_.htm）

（ⅲ）。如何設置的viewGridRow

寬度某些屬性沒有在工作jqGrid的，他們是closeOnEscape，checkOnSubmit，checkOnUpdate

這是我的屏幕截圖：

我的代碼：

var grid = $("#projectGrid"); 
    var pages = <?php echo json_encode($pl) ?>; 
    var emptyMsgDiv = $('<div>No Records.</div>'); 
    grid.jqGrid({ 
     caption:'Project List', 
     datatype:'local', 
     data:pages, 
     mtype:'POST', 
     colNames:['ID','Project Name','Assignment Name','Client','Start Dt.','Submission Dt.','Description'], 
     colModel:[ 
      {name:'proj_id', key:true, hidden:true}, 
      {name:'proj_name', width:200, sorttype:'text'}, 
      {name:'emp_name', width:200, edittype:'custom', editoptions:{custom_element:function(value, options) { return combobox_element(value, options,'emp_name') }, custom_value:combobox_value }}, 
      //{name:'c_company_name',width: 100}, 
      {name:'c_company_name', width: 100, align: "center", formatter: "select", editable: true, 
         edittype: "select", editoptions: {value: dataCli}}, 
      {name:'proj_start_dt', width:150, sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, 
       datefmt: 'd-m-Y', editoptions: { dataInit: initDateStart }, oneditfunc: function() {alert ("edited");}, 
       searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDateSearch } }, 
      {name:'proj_end_dt',width:150, sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, 
       datefmt: 'd-m-Y', editoptions: { dataInit: initDateEnd }, 
       searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDateSearch } }, 
      {name:'proj_description', hidden:true, editrules:{edithidden:true}, edittype:'textarea', search: false }], 
     cmTemplate:{editable:true, editrules: {required:true}}, 
     emptyrecords: 'No records.', 
     beforeRequest: function() {if (pages.length === 0) {grid[0].p.page = 0;}}, // fix the page number from 1 to 0 in case of no data 
     loadComplete: function() { var count = grid.getGridParam(); var ts = grid[0]; if (ts.p.reccount === 0) { grid.hide(); emptyMsgDiv.show(); } else { grid.show(); emptyMsgDiv.hide(); } }, 
     width:777,  
     height:'auto', 
     pager:'#projectPager', 
     sortname: 'proj_id', 
     sortorder:'asc', 
     rowNum:10, 
     rowList:[10,20,30], 
     rownumbers:true, 
     viewrecords:true, 
     gridview:true, 
     autoencode:true, 
     loadonce:true, 
     editurl:'<?php echo $this->action('deleteProject'); ?>', 
     reloadAfterSubmit: true 

    }); 

    grid.jqGrid('navGrid','#projectPager', { 
      add:false, edit:true, view: true, del:true, search:true, refresh:true, 
      editfunc: function(id){ window.location = 'editProject?pID=' + id;$("#div").html(id);}},  
      {jqModal: true, reloadAfterSubmit:false, closeOnEscape:true, closeAfterEdit: true}, 
      {jqModal: true, closeOnEscape: true, labelswidth: '100%', width: '600' }, 
      {jqModal: true, reloadAfterSubmit:false, closeOnEscape: true}, 
      {jqModal: true, closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, overlay: true, recreateFilter: true } 
     ); 
    emptyMsgDiv.insertAfter(grid.parent()); 
    //$("#projectGrid")[0].refreshIndex(); 
    $("#projectGrid").trigger("reloadGrid"); 

還有一個請求是請檢查我的代碼，如果有任何不妥或錯誤。建議我如何做得比這更好。感謝你爲誰提供幫助。

Answer 1

查看的選項在the documentation中描述。它沒有checkOnSubmit,checkOnUpdate選項。該選項存在於「添加」和「編輯」窗體中，但不在「查看」窗體中。 closeOnEscape的默認值爲false。如果需要，您應該指定closeOnEscape: true。

在我看來，要解決您的主要問題，您只需設置查看的width和labelswidth選項。您需要再添加一個參數navGrid（在搜索對話框的選項之後）。如果焦點設置視圖對話框內只有closeOnEscape: true作品中的選項：

修訂：

grid.jqGrid('navGrid', '#projectPager', { 
    add:false, edit:true, view: true, del:true, search:true, refresh:true, 
    editfunc: function(id){ window.location = 'editProject?pID=' + id;$("#div").html(id);}}, 
    // below are Edit options (prmEdit in the documentation) 
    {jqModal: true, reloadAfterSubmit:false, closeOnEscape:true, closeAfterEdit: true}, 
    // below are Add options (prmAdd in the documentation) 
    {jqModal: true, closeOnEscape: true}, 
    // below are Delete options (prmDel in the documentation) 
    {jqModal: true, reloadAfterSubmit:false, closeOnEscape: true}, 
    // below are Search options (prmSearch in the documentation) 
    {jqModal: true, closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, overlay: true, recreateFilter: true}, 
    // below are View options (prmView in the documentation) 
    {jqModal: true, closeOnEscape: true, labelswidth: '35%', width: 600} 
); 

更新2。爲了使代碼與當前版本的jQuery兼容（到當前實現的jQuery.focus()），需要在「查看」對話框的標題的「關閉」按鈕上設置tabindex屬性。視圖選項可以像下面一樣使用

{ 
    beforeShowForm: function ($form) { 
     $form.find("td.DataTD").each(function() { 
      var html = $(this).html().trim(); // &nbsp;<span>&nbsp;</span> 
      if (html.substr(0, 6) === "&nbsp;" && html.trim().length > 6) { 
       $(this).html(html.substr(6)); 
      } 
     }); 
     $form.closest(".ui-jqdialog").find(".ui-jqdialog-titlebar-close").attr("tabindex", "-1"); 
    }, 
    recreateForm: true, 
    closeOnEscape: true, 
    labelswidth: '35%', 
    width: 600 
} 

The demo演示上述代碼。

更新1：通過我張貼the bug report到trirand和託尼已經固定的jqGrid的從GitHub代碼的方式（見here）。所以下一個版本的jqGrid將不會遇到closeOnEscape: true的問題。