0

最近,我决定允许我的用户编辑此网格上的多个字段。

对于我网站上的这个页面,我选择结合来自 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();} 
                  },

    });
4

1 回答 1

0

解决方案:

转到以下页面并创建您自己的引导程序自定义包,消除可能与 jquery-ui 或您希望与引导程序结合的任何其他框架发生冲突的任何元素。

http://twitter.github.io/bootstrap/customize.html

于 2013-05-08T10:17:23.320 回答