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

我正在使用列选择器来自定义jqGrid记录中的列，但是我将

附加到jqGrid以进行对齐，因为这个iam无法使用columnChooser重新排序我的jqGrid列。

我的代码是：

 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'); 

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

我正在使用这个js文件

对于列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，甚至包括不同的版本 。 这是不对的！ 看到

和

一个应该只包括每个JavaScript库！

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

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

更新2 ：不能只为jqGrid的所有内部表设置table-layout:auto 。 它将打破jqGrid的内部结构。 如果需要根据列或列标题中单元格的内容宽度设置列的宽度，则可以按照我为答案创建的演示 。 见http://jsfiddle.net/OlegKi/y2yfuvjy/7/ 。