我们正在开发将 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');
}
});
});