Question

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

（i）中。首先标签和数据崩溃

（ii）中。 description是显示长行我希望根据宽度分成多行（我想要这个演示http://www.ok-soft-gmbh.com/jqGrid/WrappingInViewForm_.htm）

（iii）。如何设置viewGridRow的宽度

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

这是我的屏幕截图：

enter image description here

我的代码：

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中描述了View的选项。它没有checkOnSubmit，checkOnUpdate个选项。选项存在于“添加和编辑”表单中，但不存在于“查看”表单中。默认值closeOnEscape为false。如果需要，您应指定closeOnEscape: true。

在我看来，要解决您的主要问题，您只需设置View的width和labelswidth选项即可。您需要再添加一个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();  // &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演示了上述代码。

更新3：顺便说一句，我将the bug report发布到trirand并且Tony已经从github修复了jqGrid的代码（请参阅here）。因此，下一版本的jqGrid将不会出现closeOnEscape: true的问题。

Jqgrid：viewGridRow属性不起作用

1 个答案: