将thead附加到jqGrid时，列重新排序不起作用 [英] column re-ordering is not working while appending thead to jqGrid
问题描述
我正在使用列选择器来自定义jqGrid记录中的列，但是为了对齐目的，我将<thead>附加到jqGrid，因此该iam无法用columnChooser重新排序我的jqGrid列.
I am using column chooser for customizing columns in jqGrid records, but iam appending <thead> to jqGrid for alignment purpose, for this iam unable to reorder my jqGrid columns with 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');
当我通过列选择器重新分配列时，广告名称没有重新排序，而值却重新排序，请问如何解决此问题的人会帮助我，谢谢
when i am re-odering columns through column chooser thead names are not reordering but values are reorder, how to solve this problem would anyone help me on this please, thanks
我正在使用此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>
对于列选择器，我正在使用类似的单独函数:
For column Chooser i am using seperate function like this:
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');
}
推荐答案
您包含了多次 jQuery和jQuery UI，甚至包括了不同版本.这是不对的！见
You included multiple times jQuery and jQuery UI and even in different versions. It's wrong! See
<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库仅一个 !!!
One should include every JavaScript library only ones!!!
此外，我不建议您使用旧的4.3.1版本的jqGrid，并不要从我的网站(http://www.ok-soft-gmbh.com/jqGrid)包含jqGrid的副本. jqGrid有一些公共的CDN(内容交付网络).例如 cdnjs (请参见 jsdelivr (请参见
Additionally I don't recommend you to use old 4.3.1 version of jqGrid and include copy of jqGrid from my web site (http://www.ok-soft-gmbh.com/jqGrid). There are some public CDN (Content Delivery Network) with jqGrid. For example cdnjs (see here) or jsdelivr (see 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>
已更新您发布的jsfiddle演示包含许多不必要的CSS规则，这些规则是列对齐错误的问题根源.固定演示 http://jsfiddle.net/OlegKi/y2yfuvjy/2/不要没有问题.
UPDATED The jsfiddle demo which you posted contains a lot of unneeded CSS rules which is origin of the problem with wrong alignment of the columns. The fixed demo http://jsfiddle.net/OlegKi/y2yfuvjy/2/ don't have the problem.
更新2 :不能只为jqGrid的所有内部表设置table-layout:auto.它将破坏jqGrid的内部结构.如果您需要根据列标题或列标题中单元格的内容宽度来设置列宽度，则可以遵循答案创建的.参见 http://jsfiddle.net/OlegKi/y2yfuvjy/7/.
UPDATED 2: One can't just set table-layout:auto for all internal tables of jqGrid. It will break internal structure of jqGrid. If you need to set the width of columns based on the width of content on cells in the column or column header then you can follow the demo which I created for the answer. See http://jsfiddle.net/OlegKi/y2yfuvjy/7/.
这篇关于将thead附加到jqGrid时，列重新排序不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
