Question

有没有办法动态填充jQuery Mobile GridView？

通常我们必须用ui-block_a，b，c声明gridViews子类，如下所示，

<div class="ui-grid-b">
    <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
    <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
    <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:60px">Block C</div></div>
</div><!-- /grid-b -->

如果有任何解决方法或插件来实现gridview的动态填充

Answer 1

您可以动态添加网格。这是一个例子：

给出像这样的页面标记

<div data-role="page" id="page1">
    <div id="cont" role="main" class="ui-content">
      <button id="btnAdd">Add Dynamic Grid</button>
      <div id="dynamicGrid"></div>
    </div> 
</div>

在按钮上单击

添加网格的脚本

$(document).on("pagecreate","#page1", function(){ 
    $("#btnAdd").on("click", function(){    
    var html = '<div class="ui-grid-b">';
    html += '<div class="ui-block-a"><button>A button</button></div>';
    html += '<div class="ui-block-b"><input type="text" value="text 1" /></div>';
    html += '<div class="ui-block-c"><input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1"></div>';
    html += '</div>';

    $("#dynamicGrid").empty().append(html).enhanceWithin();
  });
});

注意：调用.enhanceWithin（）让jQM初始化网格中包含的小部件。

动态填充Jquery Mobile gridView

1 个答案:

的 DEMO