我正在w2ui网格上工作,我需要根据特定条件隐藏和显示它。 Grid
不会显示,即使在隐藏后应用了visible:visible属性。它只是显示一条线。
请在下面查看我的代码:
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,
});
答案 0 :(得分:0)
隐藏或显示后,您可以尝试致电w2ui["LastMile"].refresh()
。
答案 1 :(得分:0)
在我迟到时回答帮助他人 :D.
在花了很多时间解决这些问题后,我为 w2ui 网格显示隐藏问题或列大小问题制定了以下 2 个解决方案:
1.将列的大小更改为 px 而不是 %。
即。使用
{ field: 'lname', caption: 'Last Name', size: '30px' }
代替
{ field: 'lname', caption: 'Last Name', size: '30%' },
2.如果由于某些要求您希望以 % 为单位保留列大小:
根据您渲染网格的位置,您需要处理调整大小。
在网格上调用刷新会再次向服务器发送数据请求。
我不希望每次显示/隐藏网格时网格都调用服务器,因此编写了我自己的调整大小。
为了帮助理解该函数,请注意在我的应用程序中,
我遵循以下命名约定:
如果我创建一个网格,那么它将是 id+"_grid",
如果创建一个表单,它将是 id+"_form", 布局 id+"_layout" 也是如此。
所以我可以将关联的组件获取到一个 id 并在它们之间建立关系。 调用 show() 后调用 resize() 函数。
如果下面的函数没有帮助,请尝试在 show 和我的函数 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
}