-2 
    ![i am showing you an image.
    i want to create this type by using of jquery but i am not getting exactly what i want please help me. ,I have following HTML code which I want to create dynamically by using jQuery AJAX request. My response is in JSON format.
i am showing you an image.
    i want to create this type by using of jquery but i am not getting exactly what i want please help me. ,I have following HTML code which I want to create dynamically by using jQuery AJAX request. My response is in JSON format. 
i am showing you an image.
    i want to create this type by using of jquery but i am not getting exactly what i want please help me. ,I have following HTML code which I want to create dynamically by using jQuery AJAX request. My response is in JSON format.

私はあなたに画像を見せています。jquery を使用してこのタイプを作成したいのですが、必要なものが正確に得られません。助けてください。jQuery AJAX リクエストを使用して動的に作成したい次の HTML コードがあります。私の応答は JSON 形式です。私はあなたに画像を見せています。jquery を使用してこのタイプを作成したいのですが、必要なものが正確に得られません。助けてください。jQuery AJAX リクエストを使用して動的に作成したい次の HTML コードがあります。私の応答は JSON 形式です。私はあなたに画像を見せています。jquery を使用してこのタイプを作成したいのですが、必要なものが正確に得られません。助けてください。jQuery AJAX リクエストを使用して動的に作成したい次の HTML コードがあります。私の応答は JSON 形式です。

        <fieldset data-role="controlgroup" data-type="vertical">
            <legend>Select Locations</legend>
            <input id="checkbox2" name="" type="checkbox"
            />
            <label for="checkbox2">ICU Unit
                <div class="location_detail"> <span class="left">6 Messages</span>
                </div>
            </label>
            <input id="checkbox3" name="" type="checkbox" />
            <label for="checkbox3">CCU Unit
                <div class="location_detail"> <span class="left">6 Messages</span>
                </div>
            </label>
            <input id="checkbox4" name="" type="checkbox" />
            <label for="checkbox4">EU Unit
                <div class="location_detail"> <span class="left">6 Messages</span>
                </div>
            </label>
        </fieldset>

    JSON data looks like this:

        {
            __type="PatientInfo:#DAAB",
            DeptId=14,
            DeptName="GENERAL",
            more...
        }
        1Object{
            __type="PatientInfo:#DAAB",
            DeptId=14,
            DeptName="GENERAL",
            more...
        }
        2Object{
            __type="PatientInfo:#DAAB",
            DeptId=14,
            DeptName="GENERAL",
            more...
        }


    first record looks like this:

        {
            __type:"PatientInfo:#DAAB",
            AcknowledgeComment:null,
            AcknowledgedBy:null,
            DeptId:14,
            DeptName:"GENERAL",
            DeptPhoneNumber:"1234567894",
            ForwardBy:null,
            ForwardComment:null,
            HasECHO:false,
            HasLabReports:false,
            HasLabResults:false,
            HasMR:false,
            HospPhoneNumber:"1234512345",
            IsAlreadyLabSubscribed:false,
            IsEscalatedMessage:false,
            IsEscalationPossible:false,
            IsMessageAcknowledgedBySomeOne:false,
            IsMessageEscalatedBySystem:false,
            IsPrimaryReceiver:true,
            Message:"- ABNORMAL ECG -",
            MessageGenerationDate:"12/20/2012 08:20:24 AM",
            MessageID:768,
            MessageLevel:2,
            MessageStatus:"SENT TO MOBILE",
            MessageStatusID:3,
            MessageType:"EKG",
            PatientFirstName:" 03 ",
            PatientID:"TestPID9480",
            PatientLastName:"Test",
            PatientMiddleInitial:"",
            PatientNamePrefix:"",
            PatientNameSuffix:"",
            RowNumber:1,
            Sender:"Mvisum,",
            SenderId:1,
            Severity:"Level2",
            Subject:"ECG attached for patient - Test, 03 ",
            TotalPatientCount:3,
            UnitId:16,
            UnitName:"Emergency",
            UnitPhoneNumber:"9999999999"
        }


      \[1\]: http://i.stack.imgur.com/Hgnz2.png][1]
4

2 に答える 2

0 
<fieldset data-role="controlgroup" data-type="vertical" id="fs">
    <legend>Select Locations</legend>

</fieldset>

とjquery

$.getJSON(url, null, function (data) {
        var $fs = $("#fs");
        $.each(data, function (index, obj) {
            var cbid = "checkbox" + index;
            var $cb = $('<input id="' + cbid + '" name="" type="checkbox" style="float:left;display:inline;"/>');
            var $label = $('<label for="' + cbid + '">').append(obj.DeptName);
            var $div = $('<div class="location_detail">');
            var $span = $("<span class='left'>" + obj.DeptId + "</span>");
            $cb.appendTo($fs);
            $label.appendTo($fs);
            $div.appendTo($label);
            $span.appendTo($div);
        });
    });

アップデート：

オブジェクトの順序を変更するためのフィドル:

http://jsfiddle.net/8WbtF/2/

すべてのチェックボックスとラベルを display:block を使用して 1 つの div にラップし、配置を容易にしました。

于 2012-12-20T12:12:12.370 に答える
0

次のように、オブジェクトがオブジェクトを含む配列であると仮定します。

var data = [
    {
        __type: "PatientInfo:#DAAB",
        DeptId: 14,
        DeptName: "GENERAL"
        //Etc
    }, {
        __type: "PatientInfo:#DAAB",
        DeptId: 14,
        DeptName: "GENERAL"
    } //Etc
];

そして、次のような HTML があります。 

<fieldset data-role="controlgroup" data-type="vertical" id="fields">
    <legend>Select Locations</legend>
</fieldset>

次に、これは機能します： 

var fields = document.getElementById('fields');
for(var i = 0; i < data.length; i++){
    var input = document.createElement('input');
    var label = document.createElement('label');
    var div =  document.createElement('div');
    var span =  document.createElement('span');

    input.setAttribute('id','checkbox'+(i+1));
    input.setAttribute('type','checkbox');
    label.setAttribute('for','checkbox'+(i+1));
    div.setAttribute('class','location_detail');
    span.setAttribute('class','left');

    fields.appendChild(input);
    fields.appendChild(label);
    label.appendChild(document.createTextNode(data[i].DeptId));
    label.appendChild(div);
    div.appendChild(span);
    span.appendChild(document.createTextNode(data[i].__type));
}

作業サンプル

于 2012-12-20T12:00:47.147 に答える