Question

我正在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,
    });

Answer 1

隐藏或显示后，您可以尝试致电w2ui["LastMile"].refresh()。

Answer 2

在我迟到时回答帮助他人 :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

}

w2ui网格隐藏和显示无法正常工作

2 个答案: