如何使用json动态转换listview静态？

Posted 2023-05-09

【中文标题】如何使用json动态转换listview静态？

【英文标题】：How transform listview static in dynamic using json?

【发布时间】：2015-02-16 14:49:46

【问题描述】：

使用长轮询我更新了我的 jquery 移动列表视图，但我以这种方式编写了静态代码来更新列表视图：

 function updatePage() 
      if (ajaxRequest.readyState == 4) 

             var parsobj = jQuery.parseJSON( ajaxRequest.responseText );
             console.log(ajaxRequest.responseText);
            $("#nameobj1").empty().append(parsobj.nameobj0);
            $("#prezzoobj1").empty().append(parsobj.prezzoobj0);
            $("#nameobj2").empty().append(parsobj.nameobj1);
            $("#prezzoobj2").empty().append(parsobj.prezzoobj1);
            $("#nameobj3").empty().append(parsobj.nameobj2);
            $("#prezzoobj3").empty().append(parsobj.prezzoobj2);
            $("#nameobj4").empty().append(parsobj.nameobj3);
            $("#prezzoobj4").empty().append(parsobj.prezzoobj3);
            $("#nameobj5").empty().append(parsobj.nameobj4);
            $("#prezzoobj5").empty().append(parsobj.prezzoobj4);
            makeAjaxRequest();
      
  
  function makeAjaxRequest() 
      var datashowobj= 'type':"show-obj" ;
      ajaxRequest = new XMLHttpRequest();
      ajaxRequest.onreadystatechange = updatePage;
      ajaxRequest.open("POST","http://localhost:8080/asta/ServletObjects", true);
      ajaxRequest.setRequestHeader("Content-Type", "application/json");
      ajaxRequest.send( JSON.stringify(datashowobj));
   

服务器发送这个 json "nameobj0":"w","prezzobj0":1.0, nameobj1:"x", "prezzobj2":60.0 ...

我想放在列表视图中的 li 标签如下 `

      <li><h3 id = "nameobj1"></h3> 
      <p id="prezzoobj1"></p>
      <div data-role="controlgroup" data-type="horizontal" data-mini="true">
   <select>
    <option>$</option>
    <option>€</option>
    <option>£</option>
    <option>¥</option>
    <option>₩</option>
    <option>₹</option>
   </select>
   <input id="currency-controlgroup1" type="text" data-wrapper-class="controlgroup-  textinput ui-btn">
  <button id="bo1" class ="myclass" data-icon="plus">Piazza l'offerta</button>
  <div id="piaz1"></div> 

  </div>
     </li>`

谢谢大家的回答，希望能有一个例子说明如何实现。

【问题讨论】：

不确定您的意思。尝试刷新列表。 $("#myisview").listview("refresh")

【参考方案1】：

var parsobj = jQuery.parseJSON( ajaxRequest.responseText );
for (var id in parsobj)

    if ($("#"+id).length>0)  //check if exists an element with this id
        $("#"+id).empty().append(parsobj[id]);

【参考方案2】：

在您的 html 标记中，只需创建一个空列表：

<ul id="mylist" data-role="listview"></ul>

将返回的 JSON 更改为 JSON 对象数组，其中数组中的每一项都是列表视图中一个列表项的数据，例如：

var parsobj =[
    "nameobj":"w","prezzobj":1.0, 
    "nameobj":"x", "prezzobj":60.0,
    "nameobj":"y","prezzobj":11.0,
    "nameobj":"z","prezzobj":58.0    
];

然后在您的 updatePage() 代码中，迭代数组并为数组的每个成员创建一个列表项。将这些附加到列表视图，告诉 jQM 刷新列表视图并增强所有子控件：

var html = '';
for (var i = 0; i < parsobj.length; i++)
    html += '<li>';
    html += '<h3>' + parsobj[i].nameobj + '</h3>';
    html += '<p>' + parsobj[i].prezzobj + '</p>';        
    html += '<div data-role="controlgroup" data-type="horizontal" data-mini="true"><select><option>$</option><option>€</option> <option>£</option><option>¥</option><option>₩</option><option>₹</option></select>';
    html += '<input id="currency-controlgroup' + i +'" type="text" data-wrapper-class="controlgroup-textinput ui-btn" />';
    html += '<button id="bo' + i +'" class ="myclass" data-icon="plus">Piazza l\'offerta</button>';
    html += '<div id="piaz' + i +'"></div></div>';
    html += '</li>';


//empty the listview, append new items and tell jQM to refresh
$("#mylist").empty().append(html).listview("refresh").enhanceWithin();

这是一个有效的DEMO