私たちは、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');
}
});
});