w2ui网格隐藏和显示不能正常工作

Question

我在w2ui网格上工作，我需要隐藏和显示它基于某些条件。即使在隐藏visibility:visible属性后应用了该属性，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网格显示隐藏问题或列大小问题制定了以下两个解决方案：

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

即。使用

{字段：'lname'，标题：‘姓氏’，大小：'30px' }

而不是

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

2.如果您由于某些要求而希望将列大小保持在%中：

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

在网格上调用refresh会再次向服务器发送数据请求。

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

为了帮助理解这个函数，请注意，在我的应用程序中，

我遵循的命名约定如下：

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

如果创建一个表单，它将是id+"_form"，与布局id+"_layout“相同。

因此，我可以将关联的组件添加到一个id中，并在它们之间建立关系。在调用()之后，调用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

}