W2UI 网格隐藏并显示无法正常工作

Question

我正在处理w2ui网格，我需要根据某些条件隐藏和显示它。Grid不会显示，即使可见性：可见属性在隐藏后应用。它只是显示一条线。

请看下面的代码：

.HTML：

<div id="LastMileGrid" class="col-lg-6 col-sm-12 col-md-6" style="width: 100%; height: 150px"></div>

Javascript：

$('#LastMileGrid').w2grid({
name: 'LastMile',
show: {
toolbar: true,
footer: true,
toolbarReload: false,
toolbarColumns: false,
lineNumbers: true,
},
columns: [
{ field: 'recid', caption: 'ID', size: '10%', sortable: true },
//{ field: 'Header', caption: 'Header', size: '20%', editable: { type: 'text' }, sortable: true },
{ field: 'Description', caption: 'Description', size: '50%', editable: { type: 'text' }, sortable: true }
],
toolbar: {
items: [
{ id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' },
{ id: 'remove', type: 'button', caption: 'Remove Record', icon: 'w2ui-icon-cross' }
],
onClick: function (event) {
if (event.target == 'add') {
var Index = w2ui['LastMile'].records.length;
w2ui['LastMile'].add({ recid: w2ui['LastMile'].records.length + 1 });
}
if (event.target == 'remove') {
var grid = w2ui["LastMile"];
grid.method = 'DELETE';
grid.delete();
}
}
},
//records: [{ recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' }]
});

打开弹出窗口时，我调用该函数，

$('#popup').w2popup('open', {
onOpen: function () {
if ($("#ddlMode").val() == "AIR" && ($("#drpServiceScope").val() == "D2D" || $("#drpServiceScope").val() == "A2D")) {
$('#LastMileGrid').attr("style", "visibility:visible;height:160px:")
}
else {
$('#LastMileGrid').attr("style", "visibility:collapse;")
}
},
modal: true,
});  

Answer 1

您可以尝试在隐藏或显示后呼叫w2ui["LastMile"].refresh()。

Answer 2

回答帮助别人，因为我:D迟到了。

在花费大量时间解决问题后，我针对w2ui网格显示隐藏问题或列大小问题制定了以下2种解决方案：

1.将列的大小更改为 px 而不是 %。

即使用

{ 字段： 'lname'， caption： '姓氏'，大小： '30px'}

而不是

{ 字段： 'lname'， 标题： '姓氏'，大小： '30%'}，

2.如果由于某些要求而希望以%为单位保持列大小：

根据渲染网格的位置，您需要处理大小调整。

在网格上调用刷新将再次向服务器发送数据请求。

我不希望网格在每次显示/隐藏网格时调用服务器，因此编写了我自己的大小调整。

为了帮助理解该功能，请注意，在我的应用程序中，

我遵循了以下命名约定：

如果我创建一个网格，那么它将是id+"_grid"，

如果创建一个表单，它将是id+"_form"， 布局 ID+"_layout" 也是如此。

因此，我可以将关联的组件获取为id并在它们之间建立关系。 调用show((后调用resize((函数。

如果下面的函数没有帮助，请尝试在显示和我的函数 resize(( 之间添加一些毫秒延迟。

function resize(id){
var grid=id+"_grid";
var layout=id+"_layout";
var form=id+"_form";

if(w2ui[layout]){
if($(w2ui[layout].el("main")).hasClass("w2ui-grid")){ /*means in w2ui layouts main has grid  hence call resize. Calling refresh on layout "main"  will make grid to reload data again ,hence  grid resizing is handled in next case  */
w2ui[layout].resize();
}else{
w2ui[layout].refresh();/*means main has element other than grid so refresh */
}
}

if(w2ui[form])
w2ui[form].resize();

if(w2ui[grid])
w2ui[grid].resize();  //if grid is directly rendered without a layout resize helps
}