Jqgrid：viewGridRow属性不起作用

您好我在Concrete5 CMS工作，我使用jquery jqGrid 4.5.4版本。 在视图窗体中使用jqgrid时遇到问题。

（一世）。 首先标签和数据崩溃

（ⅱ）。 描述是显示长行我希望根据宽度分成多行（我想要这样的演示http://www.ok-soft-gmbh.com/jqGrid/WrappingInViewForm_.htm ）

（iii）.how如何设置viewGridRow的宽度

一些属性在jqGrid中不起作用，它们是closeOnEscape，checkOnSubmit，checkOnUpdate

这是我的屏幕截图：

我的代码：

var grid = $("#projectGrid"); var pages = ; var emptyMsgDiv = $('
No Records.
'); 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: 'dmY' }, datefmt: 'dm-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: 'dmY' }, datefmt: 'dm-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:'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

文档中描述了View的选项。 它没有checkOnSubmit ， checkOnUpdate选项。 选项存在于“添加和编辑”表单中，但不存在于“查看”表单中。 closeOnEscape的默认值为false。 您应该指定closeOnEscape: true如果需要， closeOnEscape: true 。

在我看来，要解决您的主要问题，您只需设置View的width和labelswidth width选项即可。 您需要再添加一个navGrid参数（在“搜索”对话框的选项之后）。

更新 ：

 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 ：选项closeOnEscape: true仅在焦点在“视图”对话框中设置时才起作用。 要使代码与当前版本的jQuery兼容（对于jQuery.focus()的当前实现），需要在“视图”对话框的标题中的“关闭”按钮上设置tabindex属性。 可以使用View选项，如下所示

 { beforeShowForm: function ($form) { $form.find("td.DataTD").each(function () { var html = $(this).html().trim(); //    if (html.substr(0, 6) === " " && 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 } 

该演示演示了上述代码。

更新3：顺便说一下，我将错误报告发布到trirand，Tony已经从github修复了jqGrid的代码（见这里 ）。 所以jqGrid的下一个版本将没有closeOnEscape: true的问题closeOnEscape: true 。