1

json 呼び出しから JQuery-Mobile のリストビューを自動生成する方法を探しています。結果を配列にロードし、キー/値を反復処理し、結果の数に基づいて作成されたliを使用して結果をulに入力すると仮定します...キーの長さを取得してループする方法がわかりませんそれらを介して<li>キーと値を入力します。json の値を知らなくても機能するようにしたいと考えています。

これが機能していない出発点です：

$(document).ready(function(){
$.getJSON("json_mdb.php", function(data){
     for (var i = 0; i < data.length; i++) {
        $.each(data[i], function(key, val) {
            //console.log(key + ":" + val); 
            $('#myUL').html("<li>" + key + " : " + val + "</li>");  
        });
      } 
});                 
});


<div data-role="page" id="index" data-theme="d">

<div data-role="content">   
<div id="inventory">
    <ul data-role='listview' id='myUL' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'>
    </ul>
</div>
</div>

</div>

JSON の例:

[{"LastName":"Doe","FirstName":"John","ID":"DJ0000"},{"LastName":"Doe","FirstName":"Jane","ID":"DA0000"}]
4

2 に答える 2

1

次のような HTML を作成します。

<div id='hiddenDiv'>
<ul><li>
    <label for='hiddenInput'></label>
    <input name='hiddenInput' type='text' />
</li></ul>
</div>
<form action="blah.php" method="post" class="coolFormCSSClass">
    <ul id='listViewUl' data-role="listview" ...>

    </ul>
</form>

次に、JSON を解析し、hiddenDiv のクローンを作成する必要があるデータ行ごとに、好みのセレクターを使用してラベルと入力の値を変更し、$(".listViewUl") に追加します。

ループは次のようになります。

var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {

//do stuff to the label (like fill in the text,
// remove the class and set some properties)        
$(".hiddenDiv label").doSomethingReallyCool()
//do stuff to the input
$(".hiddenDiv input").doSomethingReallyCool2()

var clonedLee = $(".hiddenLi").clone().appendTo(".listViewUl");
    });

クローンのソースが隠されている限り (誰にも邪魔されないため)、いかなる形でも (サーバー コードを台無しにしないように) あれば、好きなように操作できます。満足したら、クローンを作成します。したい場所に追加します。

…どうして薬はこうならないの？

于 2013-10-14T19:02:14.060 に答える
0

JSON を反復処理するために使用$.eachします。それを処理する汎用関数を作成できます。

function handleJSON(arrObject) {
    for (var i = 0; i < arrObject.length; i++) {
        $.each(arrObject[i], function(key, val) {
            console.log(key + ":" + val);
        });
    }
}

デモ: http://jsfiddle.net/9z4VH/

于 2013-10-14T23:15:13.043 に答える