Jqgrid:viewGridRow属性不起作用 [英] Jqgrid: viewGridRow property is not working
问题描述
我在Concrete5 CMS中工作，我使用的是jquery jqGrid 4.5.4版本.在视图表单中使用jqgrid时遇到问题.
Hi I am working in the Concrete5 CMS and I use the jquery jqGrid 4.5.4 version. I have problem while using the jqgrid in view form.
(i).首先标签和数据崩溃了
(i). first the label and data are collapse
(ii).描述是显示长行，我想根据宽度分割成多行(我想像这个演示
(ii). description is show long line i want split in multiple line based on the width (i want like this demo http://www.ok-soft-gmbh.com/jqGrid/WrappingInViewForm_.htm)
(iii).如何设置viewGridRow的宽度
(iii).how to set the width of the viewGridRow
某些属性在jqGrid中不起作用，它们是closeOnEscape，checkOnSubmit，checkOnUpdate
some properties are not work in the jqGrid, they are 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");
还有一个要求是，如果有任何错误或错误，请查看我的代码.建议我如何做得更好.谢谢您的帮助.
And one more request is Please review my code if any bad or wrong. suggest me how to do better than this. thank you for who help this.
推荐答案
closeOnEscape的默认值为false.如果需要，您应该指定closeOnEscape: true.
The options of the View are described in the documentation. It has no checkOnSubmit, checkOnUpdate options. The options exist in Add and Edit form, but not in View form. The default value of closeOnEscape is false. You should specify closeOnEscape: true if required.
在我看来，要解决您的主要问题，只需设置View的width和labelswidth选项.您需要再添加一个参数 navGrid (在搜索对话框中的选项).
It seems to me that to solve your main problem you need just set width and labelswidth options of View. You need add one more parameter of navGrid (after the options of Searching dialog).
已更新:
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属性.可以按以下方式使用查看"选项
UPDATED 2: The option closeOnEscape: true works only if the focus is set inside of View dialog. To make the code compatible with the current version of jQuery (to the current implementation of jQuery.focus()) one need set tabindex attribute on the "Close" button from the title of the View dialog. The View option could be used like below
{
beforeShowForm: function ($form) {
$form.find("td.DataTD").each(function () {
var html = $(this).html().trim(); // <span> </span>
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:顺便说一句，我发布了此处).因此，下一版本的jqGrid将不会出现closeOnEscape: true的问题.
UPDATED 3: By the way I posted the bug report to trirand and Tony already fixed the code of jqGrid from github (see here). So the next version of jqGrid will don't have the problem with closeOnEscape: true.
这篇关于Jqgrid:viewGridRow属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
