Mobile 如何将jqgrid用于移动浏览器
我们正在开发将web应用程序转换为移动应用程序的应用程序。我需要使用jqgrid在视图页面中显示数据。它显示了列宽大小的一些问题。我们试图在css中调整大小，但列大小和列标题大小不匹配。有没有人知道如何在移动设备中使用jqgrid或其他移动设备的好替代品，。下面是我们尝试过的代码：Mobile 如何将jqgrid用于移动浏览器,mobile,jqgrid,Mobile,Jqgrid,我们正在开发将web应用程序转换为移动应用程序的应用程序。我需要使用jqgrid在视图页面中显示数据。它显示了列宽大小的一些问题。我们试图在css中调整大小，但列大小和列标题大小不匹配。有没有人知道如何在移动设备中使用jqgrid或其他移动设备的好替代品，。下面是我们尝试过的代码： jQuery(document).ready(function (){ jQuery("#customerList").jqGrid({ url:"${customerL
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');
}
});
});
jQuery（document）.ready（函数（）{
jQuery（“#customerList”）.jqGrid（{
url:“${customerListUrl}”，
数据类型：“json”，
colNames:[''，''，''，''，''，''，''，''，
colModel:[
{name:'active'，index:'active'，width:0，格式化程序：'checkbox'，stype:'select'，sortable:false，searchoptions:{sopt:['eq']}，editoptions:
{value:“真：是；假：否”}，
{name:'group'，index:'group'，width:0，align:'left'，sortable:false，stype:'select'，searchoptions:{sopt:['eq']}，editoptions:{value:：All；DE:Channel
销售；DC:直接消费者“}”，
{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']}，
{名称：'salesOffice'，索引：'salesOffice'，宽度：0，对齐：“左”，可排序：false，搜索选项：{searchhidden:true，sopt:['eq']}，
{name:'unit'，index:'unit'，width:0，align:'left'，sortable:false，searchoptions:{searchhidden:true，sopt:['eq']}
],
rowNum:15，
自动宽度：正确，
行列表：[15,30]，
寻呼机：jQuery（“#CustomerPage”），
sortname:'名称'，
viewrecords：是的，
分拣员：“asc”，
身高：300，
标题：''，
loadError:函数（xhr、st、str）{
$（'GriderDialog'）。dialog（'open'）；
}
});
jQuery（#customerList”）.jqGrid（'hideCol'，[“组织”，“渠道”，“销售办公室”，“单位”，“活动”，“组]）；
jQuery（“#customerList”）.jqGrid（'navGrid'，'#customerpage'，
{
编辑：false，添加：false，删除：false，搜索：true，刷新：true
},
{}，//编辑选项
{}，//添加选项
{}，//删除选项
{multipleSearch:true，closeAfterSearch:true}//搜索选项
).navbuttonad（“#CustomerPage”，{标题：，按钮图标：“ui图标文档”，
onClickButton:函数（行id）{
var id=jQuery（“#customerList”）.jqGrid（'getGridParam'，'selrow'）；
如果（id）{
var ret=jQuery（“#customerList”）.jqGrid（'getRowData'，id）；
formObject=document.f1；
jQuery（“#detail”）.val（id）；
formObject.submit（）；
}否则{
$（'rownotseldialog'）。dialog（'open'）；
}
},
位置：“第一”，标题：“${actionheader}”
});
jQuery（“#customerList”）.jqGrid（'navbuttonad'，'#customerpage'，{
标题：“，
标题：“重新排列列”，
onClickButton:函数（）{
jQuery（“#customerList”）.jqGrid（'columnChooser'）；
}
});
});
“hidden xs”