首页 / 脚本样式 / JavaScript / jquerymobile局部渲染的各种刷新方法小结

在JQueryMobile页面在第一次初始化进行一次整体渲染，动态生成的需要局部渲染。

在jquerymobile实现listview局部渲染的方法：
复制代码 代码如下:
function queryPublishOrderList（trackOrDealOrInsp,userCode,type,pageNum）{ 
    var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/"+trackOrDealOrInsp+"/"+userCode+"/"+type+"/"+pageNum; 
    $.ajax（{ 
        type: "get", 
        dataType : "json", 
        url: queryPublishOrderListURL, 
        contentType: "application/json", 
        data: [], 
        success: function（data） { 
              var sb = new StringBuffer（）;  
              $.each（data, function（i,item）{ 
                 //创建一个工单列表行对象 
                sb.append（"<ul data-role="listview" data-inset="true" data-theme="c" data-pidertheme="b" >"）; 
                sb.append（"<li data-role="list-pider"> "+item.work_orders_id+"<span class="ui-li-count">"+i+"</span></li>"）; 
                sb.append（"<li><a id=""+item.work_orders_id+"" href="inspectorder.html" >"）; 
                sb.append（"<p data-role="fieldcontain" ><label for="work_orders_id">工单号:</label><span id="work_orders_id">"+item.work_orders_id+"</span></p>"）; 
                sb.append（"<p data-role="fieldcontain"><label for="founder_na">创建人:</label><span id="founder_na">"+item.founder_na+"</span></p>"）; 
                sb.append（"<p data-role="fieldcontain"><label for="found_time">创建时间:</label><span id="found_time">"+item.found_time+"</span></p>"）; 
                sb.append（"<p data-role="fieldcontain"><label for="type_na">工单类型:</label><span id="type_na">"+item.type_na+"</span><img  src="../../images/beforeforward.png" style="float: right"/></p>"）; 
                sb.append（"<p data-role="fieldcontain"><label  for="work_cont">工单内容:</label><span id="work_cont">"+item.work_cont+"</span></p>"）; 
                sb.append（"</a></li>"）; 
                sb.append（"</ul>"）; 
              }）; 
              var content = sb.toString（）;  
                 $（"#queryList"）.html（content）; 
        }, 
        error:function（XMLHttpRequest, textStatus, errorThrown）{ 
                alert（"请求远程服务错误！"）; 
        }, 
        complete: function（） {     
              $（"p[data-role=content] ul"）.listview（）;           
        }   
    }）; 
} 

备注：

listview针对jquerymobile针对listview组件刷新。

$（"p[data-role=content] ul"）.listview（）;  

如果想针对listview内部的li刷新可以使用

$（"p[data-role=content] ul li"）.listview（"refresh"）;

否则报错误如下：

jquerymobile listviewcannot call methods on listview prior to initialization; attempted to call method "refresh"

jquerymobile checkbox及时刷新才能获取其准确值
复制代码 代码如下:
一般登录的时候 都有个记住用户名 记住密码 的两个checkbox 多选框 

用jquerymobile 做页面 ，当勾选checkbox 时总是不能获取它正确的值。 

解决办法：   
[code]
$（"input[type="checkbox"]"）.bind（"click",function（） { 
       $（this）.prop（"checked"）.checkboxradio（"refresh"）;   // 绑定事件及时更新checkbox的checked值 
  }）; 
 

如果要用js去改变checkbox的值时也要及时刷新。  

$（"input [type="checkbox"]"）.attr（"checked",false）.checkboxradio（"refresh"）; 
$（"input [type="checkbox"]"）.attr（"checked",false）.checkboxradio（"refresh"）;  

原因：因为手动改变它的值后，jquerymobile不能重新渲染。 这样页面显示的值和实际值就不一样了。 （jquerymobile 把form表单元素都隐藏起来，然后用 js添加了一些元素易于美化input, select ,textarea 等元素的效果）
[/code]
下拉框刷新
复制代码 代码如下:
$（"#selectbox"）.html（optionList）.selectmenu（"refresh", true）; 

复制代码 代码如下:
复选按钮 
$（"input[type="checkbox"]"）.attr（"checked",true）.checkboxradio（"refresh"）; 

单选按钮组: 
$（"input[type="radio"]"）.attr（"checked",true）.checkboxradio（"refresh"）; 

选择列表:: 
var myselect = $（"select#foo"）; 
myselect[0].selectedIndex = 3; 
myselect.selectmenu（"refresh"）;  

滑动条 
$（"input[type=range]"）.val（60）.slider（"refresh"）; 

开关 （they use slider）: 
var myswitch = $（"select#bar"）; 
myswitch[0].selectedIndex = 1; 
myswitch .slider（"refresh"）; 

select 禁用样式
<select id="select-choice-1" class="mobile-selectmenu-disabled ui-state-disabled" disabled="disabled"name="select-choice-1" aria-disabled="true">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>

button禁用样式
<input class="ui-btn-hidden mobile-button-disabled ui-state-disabled" type="button" disabled="disabled"value="不可用" aria-disabled="true">