Question

我们正致力于将Web应用程序转换为移动应用程序的应用程序。我需要使用jqgrid在视图页面中显示数据。它显示了列宽大小的一些问题。我们尝试在css中调整大小，但列大小和列标题大小不匹配。有没有人知道如何在移动设备中使用jqgrid或移动设备的任何其他好的替代品。这是我们尝试过的代码：

 jQuery(document).ready(function (){ 
        jQuery("#customerList").jqGrid({ 
            url:"${customerListUrl}", 
            datatype: "json", 
            colNames:['<fmt:message key="active"/>','<fmt:message key="group"/>','<fmt:message key="name"/>', '<fmt:message key="customer.code"/>','<fmt:message 

key="email"/>','<fmt:message key="organisation"/>','<fmt:message key="distribution.channel"/>','<fmt:message key="salesoffice"/>','<fmt:message key="unit"/>'], 
            colModel:[  
                    {name:'active',index:'active', width:0,formatter:'checkbox',stype:'select', sortable:false,searchoptions:{sopt:['eq']},editoptions:

{value:"true:Yes;false:No"}},
                    {name:'group',index:'group', width:0, align:"left", sortable:false,stype:'select',searchoptions:{sopt:['eq']},editoptions:{value:":All;DE:Channel 

sales;DC:Direct consumer"}},
                   {name:'name',index:'name', width:0, align:"left", sortable:false,searchoptions:{sopt:['cn']}}, 
                   {name:'code',index:'code', width:0, align:"left", sortable:false,searchoptions:{sopt:['cn']}},
                   {name:'email',index:'email', width:0, align:"left", sortable:false,search:false,editable:true,editoptions:{size:60},formoptions:{ rowpos:1, label: "Email", 

elmprefix:"(*)"},editrules:{required:true,email:true}},
                   {name:'org',index:'org', width:0, align:"left", sortable:false,searchoptions:{searchhidden:true,sopt:['eq']}},
                   {name:'channel',index:'channel', width:0, align:"left", sortable:false,searchoptions:{searchhidden:true,sopt:['eq']}},
                   {name:'salesOffice',index:'salesOffice', width:0, align:"left", sortable:false,searchoptions:{searchhidden:true,sopt:['eq']}},
                   {name:'unit',index:'unit', width:0, align:"left", sortable:false,searchoptions:{searchhidden:true,sopt:['eq']}}
                   ],
            rowNum:15, 
            autowidth: true, 
            rowList:[15,30],
            pager: jQuery('#customerpager'), 
            sortname: 'name', 
            viewrecords: true, 
            sortorder: "asc",
            height: 300,
            caption:'<fmt:message key="customer"/>',
            loadError : function(xhr, st, str){
                    $('#griderrdialog').dialog('open');
                }
        }); 

        jQuery("#customerList").jqGrid('hideCol',["org","channel","salesOffice","unit","active","group"]); 

        jQuery("#customerList").jqGrid('navGrid','#customerpager',
                {
                    edit:false,add:false,del:false,search:true,refresh:true
                },
                {}, // edit options
                {}, // add options
                {}, //del options
                {multipleSearch:true,closeAfterSearch:true} // search options
            ).navButtonAdd("#customerpager",{ caption:"", buttonicon:"ui-icon-document",
                            onClickButton: function(row_id){ 

                                      var id = jQuery("#customerList").jqGrid('getGridParam','selrow'); 
                                       if (id) { 
                                        var ret = jQuery("#customerList").jqGrid('getRowData',id); 

                                         formObject = document.f1;

                                         jQuery("#detail").val(id);
                                         formObject.submit();
                                       } else { 
                                           $('#rownotseldialog').dialog('open');
                                       }
                            }, 
                            position:"first", title:'${actionheader}'
             });
        jQuery("#customerList").jqGrid('navButtonAdd','#customerpager',{ 
                        caption: "", 
                        title: "Reorder Columns", 
                        onClickButton : function (){ 
                                        jQuery("#customerList").jqGrid('columnChooser'); 
                                        } 
        }); 
    });

Answer 1

jqGrid目前只支持jQuery Mobile。您将如何看待jQuery Mobile的the thread支持将很快在jqGrid中实现。请参阅trirand here中的相应演示。

如何将jqgrid用于移动浏览器

1 个答案: