Question

我正在使用列选择器来自定义jqGrid条记录中的列，但是我将<thead>附加到jqGrid以进行对齐，因为我无法重新排序jqGrid列与columnChooser。

我的代码是：

if (success==true) {    
    $("#merror").text('');

    $("#list1").jqGrid("GridUnload")
    $("#list1").jqGrid({
        url:"./controllers/apGetTestData.php?testanzres=1&testsuite="+testsuite+
            "&testcase="+testcase+"&ch="+ch+"&fromdate="+fromdate+
            "&todate="+todate+"&mmss="+mmss,
        datatype: 'xml',
        mtype: 'GET',
        height: 'auto',
        colNames:[ 'RRID', 'Release Tag','Completed Date','Result', 'Firm  Ware','DUT','Summary','Remarks'],
        colModel:[
            {name:'idreleaseRequest', index:'idreleaseRequest', width:24},
            {name:'releaseRequestTag', index:'releaseRequestTag'},   
            {name:'DateInfo', index:'Date Info', sortable:false,align:'center'},
            {name:'Result', index:'Result', sortable:false},
            {name:'Firm Ware', index:'Firm Ware', sortable:false},
            {name:'DUT', index:'DUT', sortable:false},              
            {name:'Summary', index:'Summary', sortable:false, align:'left'} ,
            {name:'Remarks', index:'Total Suites', sortable:false}],       
        pager: $('#pager1'),
        rowNum:6,
        rowList:[6,12,18,24],
        sortable:true,
        sortname: 'timeStamp',
        sortorder: "DESC",
        // caption:"Test Results : "+ globalData,
        caption:"Test Results ",
        shrinkToFit:true,
        autowidth: true,
        viewrecords: true,
        rownumbers:true,
        cloneToTop:true, 
        hidedlg: true        
    });
    $("table.ui-jqgrid-htable thead").appendTo("table#list1");
    function  ShowHideColumn () {
        $.extend(true, $.ui.multiselect, {
            locale: {
                addAll: 'Make all visible',
                removeAll: 'Hide All',
                itemsCount: 'Avlialble Columns'
            }
        });
        $.extend(true, $.jgrid.col, {
            width: 450,
            modal: true,
            msel_opts: {dividerLocation: 0.5},
            dialog_opts: {
                minWidth: 470,
                show: 'blind',
                hide: 'explode'
            }
        });
        $("#list1").jqGrid("setColProp", "rn", {hidedlg: false});
        $('#list1').jqGrid('columnChooser');

当我通过列选择器重新排序列时，这些名称没有重新排序，但值重新排序，如何解决这个问题请任何人帮助我，谢谢

enter image description here

我正在使用这个js文件

  <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/popup/popup.js"></script>
    <script type="text/javascript" src="js/viewTestReq.js"></script>   
     <script type="text/javascript" src="../js/jquery.validate/jquery-validate.js"></script>
    <script type="text/javascript" src="../js/jquery.form/jquery.form.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-ui- 1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/ui.multiselect.js"></script>         
    <script type="text/javascript" src="../js/jqGrid/js/i18n/grid.locale-en.js"></script>        
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

对于列Chooser，我使用的是单独的函数：

    function  ShowHideColumn () {
            $.extend(true, $.ui.multiselect, {
            locale: {
                addAll: 'Make all visible',
                removeAll: 'Hide All',
                itemsCount: 'Avlialble Columns'
            }
        });
        $.extend(true, $.jgrid.col, {
            width: 450,
            modal: true,
            msel_opts: {dividerLocation: 0.5},
            dialog_opts: {
                minWidth: 470,
                show: 'blind',
                hide: 'explode'
            }
        });
      $("#list1").jqGrid("setColProp", "rn", {hidedlg: false});
     $('#list1').jqGrid('columnChooser');


 }

Answer 1

您包含多次 jQuery和jQuery UI，甚至包括不同版本。这是错的！参见

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

和

<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" 
        src="http://code.jquery.com/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

一个应该包含每个JavaScript库仅一个 !!!

此外，我不建议您使用旧的4.3.1版本的jqGrid，并在我的网站（http://www.ok-soft-gmbh.com/jqGrid）中包含jqGrid的副本。有一些公共CDN（内容交付网络）与jqGrid。例如cdnjs（请参阅here）或jsdelivr（请参阅here）：

<link rel="stylesheet" type="text/css"
      href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script type="text/javascript" 
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>

UPDATED 您发布的jsfiddle演示包含许多不需要的CSS规则，这些规则是列错误对齐的问题的根源。固定演示http://jsfiddle.net/OlegKi/y2yfuvjy/2/没有问题。

更新2 ：无法为jqGrid的所有内部表设置table-layout:auto。它将打破jqGrid的内部结构。如果您需要根据列或列标题中单元格的内容宽度设置列的宽度，则可以按照我为the demo创建的the answer。请参阅http://jsfiddle.net/OlegKi/y2yfuvjy/7/。

将thead附加到jqGrid时，列重新排序不起作用

1 个答案: