【发布时间】：2014-09-15 04:53:21
【问题描述】：
我正在使用列选择器来自定义 jqGrid 记录中的列，但我将 <thead> 附加到 jqGrid 以进行对齐，因此我无法用 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 文件
<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>
对于列选择器，我使用这样的单独功能：
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');
}
【问题讨论】：
-
$("table.ui-jqgrid-htable thead").appendTo("table#list1")行似乎是错误的。你为何这样做？ jqGrid的内部结构。你的目标是什么？顺便说一句，我建议您将postData与函数一起使用，而不是像目前那样构建url（有关详细信息，请参阅the answer）。 -
嗨奥列格，我的意思是你所说的，如果我没有添加那条线 jqgrid 列对齐看起来不好，那就是我附加那条线的情况，我有大数据要显示一列，是否有任何解决方案可以在不删除此行的情况下对列进行重新排序，或者告诉我任何其他解决方案，哪种对齐方式对于大数据和列重排应该是完美的。请帮助我，感谢您的回复。
-
嗨 Oleg，我使用了 PostData 但没有用，直到一周我才能解决这个问题，我被困在这个问题上，请帮助我，谢谢
-
您应该更详细地描述您的原始问题。您在“列对齐”下的意思是什么？列标题或网格单元格的对齐方式？垂直对齐还是水平对齐？等请参阅the answer 了解列标题的对齐方式。
-
我写
postData是因为对url的请求将是由于jqGrid 的一些内部 操作。如果 URL 的值testsuite, testcase, ch, fromdate, todate, mmss来自页面上的某些控件，那么您将看到在 jqGrid 的分页或排序时可以发送 old 值。此外，您可能需要在手动构建 URL 期间使用encodeURIComponent。