Dojo动态创建CheckBox

　　在某些情况下，我们需要动态的创建CheckBox，以满足我们对编程的需要。尽管Dojo官方也提供了一些Demo，但当Dojo的版本不断升级，而Dojo的Demo却依然停留在历史版本中，我们对此感到的是相当的头痛。尽管那些Demo简单，但是却不实用。因为他们只是为了达到易用的目的，而不是实用与扩充性。下面我们就来看一下，我们在项目中应该如何动态创建CheckBox。

尽管dijit.form.CheckBox很好用，但是我们为了更便捷的使用，对其又进行了封装，将其封装为CheckBoxFiled，以下是简单的Code，更深层的封装Code，将不在这里展示。

@H_502_10@dojo.provide( "com.itccxx.common.dijit.form.field.CheckBoxField" @H_502_10@);

@H_502_10@dojo.require( "com.itccxx.common.dijit.form.field.CheckField" @H_502_10@);

@H_502_10@dojo.declare( "com.itccxx.common.dijit.form.field.CheckBoxField" @H_502_10@,com.ibm.ecm.nuclear.common.dijit.form.field.CheckField,{

@H_502_10@});

@H_502_10@

如上，是我们封装完毕的一个CheckBoxField，在这里请读者不要进行过多的考虑，就将其当做一个普通的CheckBox即可，我们封装CheckBox也仅仅是我们更方便的使用CheckBox的某些属性。

当我们有了CheckBoxField原型之后，我们就要开始使用代码动态生成CheckBox。当我们需要动态创建CheckBoxField的时候，往往需要不止一个，因为我们需要遍历的来创建这些CheckBoxField，以下是创建所需Field的源码。

@H_502_10@@H_502_10@_loadCheckBoxByService :function@H_502_10@(){

@H_502_10@@H_502_10@var@H_502_10@subclasses = itemSet.get("items"@H_502_10@)[0].get("itemJSON"@H_502_10@).subclasses;

@H_502_10@@H_502_10@if@H_502_10@(subclasses) {

@H_502_10@@H_502_10@ dojo.forEach(subclasses,function@H_502_10@(subclass) {

@H_502_10@@H_502_10@this@H_502_10@.createCheckBox(subclass);

@H_502_10@@H_502_10@ }

@H_502_10@}

@H_502_10@

@H_502_10@@H_502_10@createCheckBox :function@H_502_10@(subclass){

@H_502_10@@H_502_10@ var@H_502_10@chkBox =new@H_502_10@com.ibm.ecm.nuclear.common.dijit.form.field.CheckField({

@H_502_10@@H_502_10@ checked:false@H_502_10@,

@H_502_10@@H_502_10@ label : subclass.label,

@H_502_10@@H_502_10@ symbolicName : subclass.symbolicName,

@H_502_10@@H_502_10@ style: {

@H_502_10@@H_502_10@ display :"inline-block"

@H_502_10@@H_502_10@ },

@H_502_10@@H_502_10@ title :@H_502_10@subclass.value

@H_502_10@@H_502_10@ });

@H_502_10@@H_502_10@

@H_502_10@@H_502_10@ chkBox.placeAt(this@H_502_10@.childDocLib);

@H_502_10@@H_502_10@ chkBox.startup();

@H_502_10@@H_502_10@}

@H_502_10@@H_502_10@

@H_502_10@ 当我们动态创建完CheckBoxField之后，就需要将CheckBox挂到相应的节点上。chkBox.placeAt()将这些CheckBoxField挂到相应的Div上。如下是存放CheckBoxField的HTML。

@H_502_10@

@H_502_10@@H_502_10@<divdata-dojo-attach-point@H_502_10@="childDocLib"></div>

@H_502_10@

@H_502_10@ 我们是以动态创建CheckBoxField为例进行说明的，如果需要动态创建CheckBox，可以直接参照createCheckBox进行创建。

Dojo动态创建CheckBox

猜你在找的Dojo相关文章