模型和渲染分离实现HTML的各种选择框

 

/**

   *  实现一个简单的选择框渲演器，大致思路如下：

   *  1、定义一个数据模型类，模型数据来源不做限制

   *  2、定义一个渲染器，渲染器根据数据模型和可选参数进行页面的渲染

   *  3、支持初始化选项设定 

   */   

  //定义一个数据模型

  function SelectModel(name,value){

          //public field

          this.options = [];       

          this.name = name;

          this.value = value || "";

 

          //private method

          function Option(value,text)

          {

               var value = value;

               var text = text;

               this.getValue = function(){

                  return value; 

               }

               this.getText = function(){

                  return text; 

               }            

          }

 

          //prototype method also public

          SelectModel.prototype.addOption = function(value,text)

          {

                this.options.push(new Option(value,text)); 

          }

 

          //set constructor

          SelectModel.prototype.constructor = SelectModel;

    }

 

 

   //页面元素渲染类

   function SelectRender(model,propertys){

        //private field

        var model = model;

        var propertys = propertys || {};

        var render = {

            "select":function(){

                var header = '<select name="'+model.name+'" '+(propertys.multiple?'multiple':'')+'>';

                var footer = '</select>';

 

                var body = (propertys.defaultNull?'<option value="">--请选择--</option>':'');

                var datas = model.options;          

                for(var i=0;i<datas.length;i++){

                    body += '<option value="'+datas[i].getValue()+'">'+datas[i].getText()+'</option>';

                }

 

                return header + body + footer;

            },

            "checkbox":function(){

                var body = '';

                var datas = model.options;          

                for(var i=0;i<datas.length;i++){

                    body += '<input type="checkbox" name="'

                             +model.name+'" value="'

                             +datas[i].getValue()+'"/>'

                             +datas[i].getText();

                }

 

                return body;

            },

            "radio":function(){

                var body = '';

                var datas = model.options;          

                for(var i=0;i<datas.length;i++){

                    body += '<input type="radio" name="'

                             +model.name+'" value="'

                             +datas[i].getValue()+'"/>'

                             +datas[i].getText();

                }

 

                return body;

            }

        }  

 

        var Init = {//初始化

            "select":function(){

                document.all(model.name).value = model.value;

            },

            "radio":function(){

                var objectArray = document.all(model.name);

                for(var i=0; i < objectArray.length; i++){

                     if(objectArray[i].value == model.value){

                         objectArray[i].checked = true;

                         break                         

                     }

                }

            },

            "checkbox":function(){

                var objectArray = document.all(model.name);

                var values = model.value;

                for(var k=0;k<values.length;k++){

                  for(var i=0; i < objectArray.length; i++){

                       if(objectArray[i].value == values[k]){

                           objectArray[i].checked = true;                        

                       }

                  }

               }

            }

        }     

 

        //---------private method------------------------    

        function handleRender(id,name){

              var renderHtml = render[name]();

              var renderPlace = document.all(id);

              if(renderPlace){

                   try

                   {

                      renderPlace.innerHTML =  renderHtml; 

                      Init[name](); 

                   }catch(e)

                   {

                      //ignore;

                   }   

              } 

 

              return renderHtml;

        }

 

        //------public method---------------------

        this.selectElement = function(id){               

              return handleRender(id,'select');

        }

        this.radioElement =  function(id){

              return handleRender(id,'radio');

        }

        this.checkboxElement = function(id){

              return handleRender(id,'checkbox');

        }

   }

 

   //--------------使用例子-------------------------------------------

 

   //定义模型 

   var model = new SelectModel("country","01");

   //var model = new SelectModel("country",["01","02"]);//如果渲染成checkbox并且需要初始化多个选项

   model.addOption("01","中国");

   model.addOption("02","英国");

   model.addOption("03","美国");

 

   //进行渲染 

   var render = new SelectRender(model,{defaultNull:true});

   render.selectElement('父节点ID') 或者 document.all('父节点ID').innerHTML = render.selectElement();

   render.radioElement('父节点ID') 或者 document.all('父节点ID').innerHTML = render. radioElement();

   render.checkboxElement('父节点ID') 或者 document.all('父节点ID').innerHTML = render.checkboxElement();