jqGrid-拖动一行进行排序会打乱单元格宽度
jqGrid - Dragging a row to sort it screws up cell widths
我的问题:当我在jqGrid中拖动一行,它完成了一个自定义的重载函数时,网格的单元格(以前定义网格时设置的所有不同宽度)将被调整为相同的宽度。这种情况在Webkit浏览器中发生,但在Firefox中没有。
代码:我在网格上启用了拖动排序:
$mygrid.jqGrid(
'sortableRows', {
update: function(e, ui) {
sort_grid(e, ui);
}
}
);
正如您所看到的,我有一个在拖动完成时调用的排序函数sort_grid
。这是:
function sort_grid(e, ui) {
var current_grid = $(ui.item[0]).closest('table').attr('id');
var $current_row, moved_id, next_id, next_priority;
var $moved_row = $('#' + current_grid + ' tr');
var cnt = 0;
this_id = ui.item[0].id;
$moved_row.each(function () {
if ($(this).attr('id') == this_id) {
$current_row = $moved_row.eq(cnt);
moved_id = $current_row.attr("id");
next_id = $current_row.next().attr("id");
next_priority = $current_row.next().children("td:first").attr("title");
}
cnt++;
});
if ( typeof moved_id !== 'undefined' ) {
if ( next_priority == 'undefined' ) {
next_priority = '999';
}
$.ajax({
url:my_url,
type:"POST",
data:"moved_id=" + moved_id + "&next_id=" + next_id + "&next_priority=" + next_priority,
success: function(data) {
$('.grid').setGridParam({loadonce:false, datatype:'json'}); // force grid refresh from server
$('#' + current_grid).trigger("reloadGrid");
$('.grid').setGridParam({loadonce:true}); // reset to use local values
}
})
}
}
一旦我按下重新加载触发器$('#' + current_grid).trigger("reloadGrid");
并重新加载完成,网格中的单元格现在的宽度不正确(它们从不同的宽度变为相同的宽度)。
当网格最初创建时,它的宽度以正常的jqGrid方式定义:
colModel:[
{name:'one', index:'one', sortable:true, width:45},
{name:'two', index:'two', sortable:true, width:180},
]
但是在网格重新加载之后,宽度被重置为相同的宽度(我假设这是网格的总宽度被均匀地除以行中的单元总数)。那么,我是否需要再次明确地设置这些宽度,也许在网格重新加载后调用以下内容?
$('.grid').setGridParam({
colModel:[
{name:'one', index:'one', sortable:true, width:45},
{name:'two', index:'two', sortable:true, width:180},
]
});
我尝试了上面的修复,在重新加载后重新定义了colModels,并显式设置了宽度,但没有效果。奇怪的是,如果我进入浏览器控制台并使用javascript设置宽度,它也没有任何效果。这让我很为难。
不幸的是,对我来说,jqGrid"Answer Man"(Oleg)似乎不在身边。。。lol.
我在Chrome上遇到了同样的问题。我在这里重新创建了它http://jsfiddle.net/gZSra/.只需拖动行,然后对任意列进行排序。
但是经过几个小时艰苦的jqGrid源代码调试,我终于修复了这个错误。该问题出现在jqGrid的emptyRows方法中。
emptyRows = function (scroll, locdata) {
var firstrow;
if (this.p.deepempty) {
$(this.rows).slice(1).remove();
} else {
firstrow = this.rows.length > 0 ? this.rows[0] : null;
$(this.firstChild).empty().append(firstrow); // bug "activation" line
}
if (scroll && this.p.scroll) {
$(this.grid.bDiv.firstChild).css({height: "auto"});
$(this.grid.bDiv.firstChild.firstChild).css({height: 0, display: "none"});
if (this.grid.bDiv.scrollTop !== 0) {
this.grid.bDiv.scrollTop = 0;
}
}
if(locdata === true && this.p.treeGrid) {
this.p.data = []; this.p._index = {};
}
},
*在最近的jqGrid-4.4.4中,此代码从jqGrid.src.js 的1070行开始
问题连接到删除,然后附加第一行。这一行定义了列的宽度——在我的jsFiddle示例中,它的一个单元格是
<td role="gridcell" style="height:0px;width:60px;"></td>
这就是为什么这个问题似乎和一些Chrome或Webkit的动态表行为有关。
FIX
将感染的其他范围替换为下一行
$(this.firstChild).find('tr:not(:first)').remove();
不难看出,我只是选择并删除除第一行以外的所有行,而不是删除所有行,然后将第一行追加回来。
结果jsFiddle:http://jsfiddle.net/HJ3Q3/
在Chrome、FF、IE 8&9.
希望这个修复程序很快成为jqGrid源代码的一部分。
.trigger('reloadGrid');
导致可排序行出现问题。
下面的解决方案可能会帮助你(卸载和重新加载网格)
创建一个配置网格的函数,如下面的
jQuery().ready(ConfigureGrid);
function ConfigureGrid(){
jQuery("#grdCategory").jqGrid({
url: '/controller/action',
datatype: "xml",
colNames: ['Order', 'Name', 'Page Title', 'Is Active', 'Action'
],
colModel: [
{ name: 'col1', index: 'col1', width: 50, sortable: true, sorttype: 'int' }
, { name: 'col2', index: 'col2', width: 150, sortable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
});
$("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false, search: true });
$("#list1").jqGrid('sortableRows', { update: function (event, ui) { updateOrder() } });
}
创建函数以重新加载网格
function loadGrid() {
$('#grdCategory').jqGrid('GridUnload');
ConfigureGrid();
}
在ajax回调中使用loadGrid()函数或刷新网格
您是否尝试在jQgrid选项中设置此属性
width: 'auto',
如果这不起作用,请尝试在更新行后重新加载网格
jQuery('.grid').trigger('reloadGrid');
PokatilovArt的注释需要更多的关注:jqGrid-拖动一行进行排序会打乱单元格宽度。
它解决了Chrome中的问题。
以下是jqGrid中要更改的参数:
deepempty : true
在jqGridwiki中,以下是该选项的定义。
如果事件或插件附加到表单元格,则此选项应设置为true。该选项对行及其所有子元素使用jQuery empty。这当然有速度开销,但可以防止内存泄漏。如果激活了可排序的行和/或列,则此选项应设置为true。
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 如何使用 jquery sortable 对表的所有行中的表单元格进行排序
- jQuery UI 可排序:检测表单元格中是否已包含项目
- 按英国日期对 jQuery 数据表进行排序,忽略空单元格
- 在单元格中显示另一个值时,按一个值对jqGrid进行排序
- jQuery UI可排序-排序时表格单元格丢失边框
- 如何对具有空单元格的日期列进行排序
- 通过单击另一个表中的单元格对表进行排序
- Bootstrap Datatables按部分单元格内容排序
- jqGrid-拖动一行进行排序会打乱单元格宽度
- ag网格对单元格值的排序发生了变化
- 如何在表排序器中设置固定的表宽度(不是单元格)
- Dojo数据网格:按单元格布局中的第一个值排序
- 我如何得到一个谷歌可视化表上的格式单元格值排序时呈现
- 如何在JavaScript中删除和重新排序表格中的单元格
- 使网格系统中单元格的垂直重新排序具有响应性
- SlickGrid单元格样式在排序时丢失