我正在使用JQM 1.4.2创建一个小应用程序,而我遇到的问题是我在没有使用ajax刷新页面的情况下更新表。这很好用,我的表(整个表)更新但是更新后data-mode='columntoggle'
不再有效 - 按钮就在那里,但你对显示列做出的任何选择都不再适用。
有谁能想到这会发生的原因?代码如下:
主页
<div data-role="content" data-theme="a" >
<div id='visualUnitTable'>
<!-- list loads dynamically - popup & jquery at bottom of page -->
</div>
<!------------------POPUP------------------- -->
<div data-role='popup' id='popupVisualUnit' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width: 300px;'>
<div data-role='header' data-theme='a'>
<h1>Visual Check</h1>
</div>
<div data-role='main' class='ui-content'>
<form id='frmVisualUnit'>
<!--using ajax to create the form-->
</form>
</div>
</div>
</div><!-- /content -->
表页面(香港专业教育学院从这里删除了一堆PHP以方便阅读!!):
<table data-role='table' id='visualUnitListTable' data-mode='columntoggle' class='ui-body-b ui-shadow table-stripe ui-responsive' data-column-btn-mini='true' data-column-btn-text='Columns to Display' data-column-btn-theme='c' data-column-popup-theme='a' >
<thead>
<tr>
<th data-priority='1'>Unit No.</th>
<th data-priority='1'>Size Code</th>
<th data-priority='2'>Size</th>
<th data-priority='3'>Week Rate</th>
<th data-priority='3'>Month Rate</th>
<th data-priority='2'>Overlocked</th>
<th data-priority='2'>Visual Check</th>
<th data-priority='1'>Status</th>
<th></th>
</tr>
</thead>
<tbody>
echo"<tr>
<td><a href='./unit_Details.php?unitid=" . $row['unitid'] . "'>" . $row['unitno'] . "</a></td>
<td>" . $row['sizecode'] . "</td>
<td>" . $row['usize'] . "</td>
<td>" . $row['wrate'] . "</td>
<td>" . $row['mrate'] . "</td>
<td>" . $row['overlocked'] . "</td>
<td>" . $row['visual'] . "</td>
<td>" . $row['description'] . "</td>
<td><div id='custom-border-radius'><a onclick= DisplayVisualCheckPopUP('" . $row ['unitid'] ."') class='ui-btn ui-icon-edit ui-btn-icon-notext ui-corner-all' data-rel='popup' data-position-to='window' data-transition='pop'>" . $row['unitno'] . "</a></div></td>
</tr>
</tbody>
</table>
单击编辑按钮以打开一个弹出窗口,当您关闭时会重新写入包含更新信息的表格。 ajax重新加载表而不刷新整个页面:
function LoadVisualUnitTable() {
$.post('unit_DisplayVisualTable.php', 'unitSearchBox=<?php echo $_POST ['unitSearchBox'];?>&choiceUnitSearch=<?php echo $_POST ['choiceUnitSearch'];?>&choiceDeletedUnit=<?php echo $_POST ['choiceDeletedUnit'];?>&selectSiteUnit=<?php echo $_POST ['selectSiteUnit'];?>&choiceUnitSearchCri=<?php echo $_POST ['choiceUnitSearchCri'];?>&selectUnitStatus=<?php echo $_POST ['selectUnitStatus'];?>&sid=RI201310111345581600', function(data) {
$("#visualUnitTable").html(data); //<!-- load data to div -->
$("#visualUnitTable").trigger('create'); //<!-- load data to css -->
});
return false;
};
我在想,也许我需要一行一行地重新加载 - 对此有什么看法?否则任何想法将不胜感激! 感谢
答案 0 :(得分:6)
看起来jQM将弹出窗口保留在表的第一次加载时的列列表中,因此在后续加载后它不会重新创建列表。可能还有更多的官员&#39;这样做的方法,但一个快速的解决方法是每次刷新表时从DOM中删除动态弹出窗口:
$("#visualUnitListTable-popup-popup").remove();
$("#visualUnitTable").html(data).enhanceWithin();
鉴于您的表ID为visualUnitListTable
,jQM会创建一个id为visualUnitListTable-popup-popup
的弹出窗口,因此您可以在更新表格HTML之前立即调用该元素上的remove()。
这是 DEMO