-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 创建这种类型，但我没有得到我想要的，请帮助我。，我有以下 HTML 代码，我想使用 jQuery AJAX 请求动态创建这些代码。我的回复是 JSON 格式。我给你看一张图片。我想通过使用 jquery 创建这种类型，但我没有得到我想要的，请帮助我。，我有以下 HTML 代码，我想使用 jQuery AJAX 请求动态创建这些代码。我的回复是 JSON 格式。我给你看一张图片。我想通过使用 jquery 创建这种类型，但我没有得到我想要的，请帮助我。，我有以下 HTML 代码，我想使用 jQuery AJAX 请求动态创建这些代码。我的回复是 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

假设您的对象是一个包含对象的数组，如下所示：

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 回答
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 将所有复选框和标签包装到一个 div 中，以使排列更容易。

于 2012-12-20T12:12:12.370 回答