通过在DOJO中迭代JSONArray来创建动态复选框

时间:2015-01-05 10:45:20

标签: javascript checkbox dojo

我是DOJO的新手,我正在使用 DOJO 1.5.0版本

我想通过在DOJO中迭代JSONArray来创建动态复选框。这种动态创建将在特定事件上完成,例如当我们选择一些组合框值时。

例如,请考虑以下JSONArray:

  

var tempJSONArray = [{role_id =' 1',role_name =' role1'},{role_id =   ' 2',role_name =' role2'},{role_id =' 3',role_name =' role3'}]

我想要与角色名称对应的显示复选框。 Lable for checkbox将是role_name,value将是来自JSON对象的role_id。 另外我想添加' onChange' event to check-box,因为在这个事件中我想用role_ids对服务器进行Ajax调用。

感谢您阅读,如果需要进一步说明,请告诉我。

2 个答案:

答案 0 :(得分:1)

您可以使用dojo.create()方法创建DOM节点,使用dojo.place()方法将它们放在另一个元素中,例如:

var checkbox = dojo.create("input", {
    type: "checkbox",
    value: "1"
});

您可能需要将其包含在<label>内以显示文本(您也可以使用dojo.create()创建)。然后您可以将它们放在列表中,例如:

dojo.place(label, "checkboxes");

这会将复选框(或标签)包装在ID为checkboxes的元素中。因此,如果您现在在循环中创建复选框,它应该可以工作。

答案 1 :(得分:0)

在做了一些网上冲浪和玩代码后,我可以写下面的代码,这对我的场景很好。所以认为这会对其他人有所帮助。

for ( var i = 0; i < roleJSON.length; i++) {
                        var role = roleJSON[i]; 
                        var tr = dojo.create("tr",{id:"rolebasecheckbox"+i,'class':'rolebasecheckbox'});
                        alert("tr=" + tr);
                        var td= dojo.create("td",{innerHTML:'<input id="roleBaseCb_'+i+'" value="'+role.role_id+'" dojoType="dijit.form.CheckBox" onclick="alert('onclick event')" type="checkbox" /> <label for="roleBaseCb_'+i+'">'+role.role_name+'</label>',align:'center'},tr);
                        alert("td=" + td);
                        if(i==0){
                        alert("i is 0");
                        dojo.place(tr, "roleBaseComboTR", "after");
                        }else{
                            dojo.place(tr, "rolebasecheckbox"+(i-1), "after");  
                        }
                    }