最近,我决定允许我的用户编辑此网格上的多个字段。
对于我网站上的这个页面,我选择结合来自 jqgrid、jquery-ui 和 twitter 引导 css 框架的元素。
当用英语或任何其他 ltr 语言查看网格时,一切似乎都很正常,但是当切换到 rtl 视图时,一切都被破坏了,列变得不对齐,并且用于选择每一行的复选框从视图中消失。
截屏:
代码:
$("#list2").jqGrid({
url:'get_applicants.php',
datatype: "json",
width: 900,
autowidth: false,
shrinktofit: false,
height: 300,
scroll: false,
direction: <?=$web_dir?>,
multiselect: true,
gridview: true,
colNames:['id', '<?=$mylabel["last_updated"]?>', '<?=$mylabel["job_internal_id"]?>', '<?=$mylabel["job_title"]?>', '<?=$mylabel["applicant_name"]?>', '<?=$mylabel["filename"]?>', '<?=$mylabel["recommendation_count"]?>', '<?=$mylabel["referer_name"]?>',
'<?=$mylabel["media_id"]?>', '<?=$mylabel["ref_type"]?>', '<?=$mylabel["location"]?>','<?=$mylabel["note"]?>', 'status_id', 'job_id', ''],
colModel:[
// {name: 'selector', width:10, hidden: false, align:'<?=$col_direction?>'},
{name: 'id',index:'2', width:0, hidden: true, align:'<?=$col_direction?>'},
{name:'last_updated', index:'1', width:25, sortable:true, editable: false, align:'<?=$col_direction_other?>'},
{name:'internal_id',index:'9', width:20, hidden: false, sortable:true, editable: false, align:'<?=$col_direction?>'},
{name:'job_title',index:'8', width: 60, sortable:true, editable: false, align:'<?=$col_direction ?>'},
{name:'uname', index:'3', sortable:true, width:40, editable: false, align:'<?=$col_direction?>'},
{name:'filename',index:'11', width:30, sortable:true, editable: false, align:'center'},
{name:'recommendation_count', index: '13', sortable:true, width: 45, align: 'center'},
{name:'referer_name', index:'4', width:40, sortable:true, editable: false, align:'<?=$col_direction?>'},
{name:'media_id',index:'5', width:20, sortable:true, editable: false, align:'<?=$col_direction?>'},
{name:'ref_type',index:'6', width:30, sortable:true, editable: false, align:'<?=$col_direction?>'},
{name:'location', index:'14', width:30, sortable:true, align:'<?=$col_direction?>'},
{name:'note',index:'10', width:0, hidden: true, editable: true, editrules: { edithidden: true }, hidedlg: true, align:'<?=$col_direction?>'},
{name:'job_id',index:'7', hidden:true, width:0, editable: false, align:'<?=$col_direction?>'},
{name:'status_id',index:'12', hidden:true, width:0, editable: false, align:'<?=$col_direction?>'},
{name:'empty', width:10, sortable:false ,index:'15', hidden:false, editable: false, align:'center'}
],
rowNum:20,
rowList:[20,40,60],
pager: '#pager2',
sortname: '1',
viewrecords: true,
sortorder: "DESC",
caption:"<?=get_phrase("Applicants")?>",
loadonce:false,
postData: {
uid: function(){return $("#uid").val();},
medias: function(){return $("#medias option:selected").val();},
types: function(){return $("#types option:selected").val();},
jobs: function(){return $("#jobs option:selected").val();},
applicant: function(){return $("#applicant").val();},
referrer: function(){return $("#referrer").val();},
internal_id: function(){return $("#internal_id").val();},
location_id: function(){return $("#locations option:selected").val();}
},
});