fieldcontainer.js

/**
 * @fileOverview 表单字段的容器扩展
 * @ignore
 */
var $ = require('jquery'),
  BUI = require('bui-common'),
  Field = require('./field'),
  GroupValid = require('./groupvalid'),
  PREFIX = BUI.prefix;

var FIELD_XCLASS = 'form-field',
  CLS_FIELD = PREFIX + FIELD_XCLASS,
  CLS_GROUP = PREFIX + 'form-group',
  FIELD_TAGS = 'input,select,textarea';

function isField(node){
  return node.is(FIELD_TAGS);
}
/**
 * 获取节点需要封装的子节点
 * @ignore
 */
function getDecorateChilds(node,srcNode){

  if(node != srcNode){

    if(isField(node)){
      return [node];
    }
    var cls = node.attr('class');
    if(cls && (cls.indexOf(CLS_GROUP) !== -1 || cls.indexOf(CLS_FIELD) !== -1)){
      return [node];
    }
  }
  var rst = [],
    children = node.children();
  BUI.each(children,function(subNode){
    rst = rst.concat(getDecorateChilds($(subNode),srcNode));
  });
  return rst;
}

var containerView = BUI.Component.View.extend([GroupValid.View]);

/**
 * 表单字段容器的扩展类
 * @class BUI.Form.FieldContainer
 * @extends BUI.Component.Controller
 * @mixins BUI.Form.GroupValid
 */
var container = BUI.Component.Controller.extend([GroupValid],
  {
    //同步数据
    syncUI : function(){
      var _self = this,
        fields = _self.getFields(),
        validators = _self.get('validators');

      BUI.each(fields,function(field){
        var name = field.get('name');
        if(validators[name]){
          field.set('validator',validators[name]);
        }
      });
      BUI.each(validators,function(item,key){
        //按照ID查找
        if(key.indexOf('#') == 0){
          var id = key.replace('#',''),
            child = _self.getChild(id,true);
          if(child){
            child.set('validator',item);
          }
        }
      });
    },
    /**
     * 获取封装的子控件节点
     * @protected
     * @override
     */
    getDecorateElments : function(){
      var _self = this,
        el = _self.get('el');
      var items = getDecorateChilds(el,el);
      return items;
    },
    /**
     * 根据子节点获取对应的子控件 xclass
     * @protected
     * @override
     */
    findXClassByNode : function(childNode, ignoreError){


      if(childNode.attr('type') === 'checkbox'){
        return FIELD_XCLASS + '-checkbox';
      }

      if(childNode.attr('type') === 'radio'){
        return FIELD_XCLASS + '-radio';
      }

      if(childNode.attr('type') === 'number'){
        return FIELD_XCLASS + '-number';
      }

      if(childNode.hasClass('calendar')){
        return FIELD_XCLASS + '-date';
      }

      if(childNode[0].tagName == "SELECT"){
        return FIELD_XCLASS + '-select';
      }

      if(isField(childNode)){
        return FIELD_XCLASS;
      }

      return BUI.Component.Controller.prototype.findXClassByNode.call(this,childNode, ignoreError);
    },
    /**
     * 获取表单编辑的对象
     * @return {Object} 编辑的对象
     */
    getRecord : function(){
      var _self = this,
        rst = {},
        fields = _self.getFields();
      BUI.each(fields,function(field){
        var name = field.get('name'),
          value = _self._getFieldValue(field);

        if(!rst[name]){//没有值，直接赋值
          rst[name] = value;
        }else if(BUI.isArray(rst[name]) && value != null){//已经存在值，并且是数组，加入数组
          rst[name].push(value);
        }else if(value != null){          //否则封装成数组，并加入数组
          var arr = [rst[name]]
          arr.push(value);
          rst[name] = arr; 
        }
      });
      return rst;
    },
    /**
     * 获取表单字段
     * @return {Array} 表单字段
     */
    getFields : function(name){
      var _self = this,
        rst = [],
        children = _self.get('children');
      BUI.each(children,function(item){
        if(item instanceof Field){
          if(!name || item.get('name') == name){
            rst.push(item);
          }
        }else if(item.getFields){
          rst = rst.concat(item.getFields(name));
        }
      });
      return rst;
    },
    /**
     * 根据name 获取表单字段
     * @param  {String} name 字段名
     * @return {BUI.Form.Field}  表单字段或者 null
     */
    getField : function(name){
      var _self = this,
        fields = _self.getFields(),
        rst = null;

      BUI.each(fields,function(field){
        if(field.get('name') === name){
          rst = field;
          return false;
        }
      });
      return rst;
    },
    /**
     * 根据索引获取字段的name
     * @param  {Number} index 字段的索引
     * @return {String}   字段名称
     */
    getFieldAt : function (index) {
      return this.getFields()[index];
    },
    /**
     * 根据字段名
     * @param {String} name 字段名
     * @param {*} value 字段值
     */
    setFieldValue : function(name,value){
      var _self = this,
        fields = _self.getFields(name);
        BUI.each(fields,function(field){
          _self._setFieldValue(field,value);
        });
    },
    //设置字段域的值
    _setFieldValue : function(field,value){
      //如果字段不可用，则不能设置值
      if(field.get('disabled')){
        return;
      }
      //如果是可勾选的
      if(field instanceof Field.Check){
        var fieldValue = field.get('value');
        if(value !== undefined && (fieldValue == value || (BUI.isArray(value) && BUI.Array.contains(fieldValue,value)))){
          field.set('checked',true);
        }else{
          field.set('checked',false);
        }
      }else{
        if(value == null){
          value = '';
        }
        field.clearErrors(true);//清理错误
        field.set('value',value);
      }
    },
    /**
     * 获取字段值,不存在字段时返回null,多个同名字段时，checkbox返回一个数组
     * @param  {String} name 字段名
     * @return {*}  字段值
     */
    getFieldValue : function(name){
      var _self = this,
        fields = _self.getFields(name),
        rst = [];

      BUI.each(fields,function(field){
        var value = _self._getFieldValue(field);
        if(value){
          rst.push(value);
        }
      });
      if(rst.length === 0){
        return null;
      }
      if(rst.length === 1){
        return rst[0]
      }
      return rst;
    },
    //获取字段域的值
    _getFieldValue : function(field){
      if(!(field instanceof Field.Check) || field.get('checked')){
        return field.get('value');
      }
      return null;
    },
    /**
     * 清除所有表单域的值
     */
    clearFields : function(){
      this.clearErrors(true);
      this.setRecord({})
    },
    /**
     * 设置表单编辑的对象
     * @param {Object} record 编辑的对象
     */
    setRecord : function(record){
      var _self = this,
        fields = _self.getFields();

      BUI.each(fields,function(field){
        var name = field.get('name');
        _self._setFieldValue(field,record[name]);
      });
    },
    /**
     * 更新表单编辑的对象
     * @param  {Object} record 编辑的对象
     */
    updateRecord : function(record){
      var _self = this,
        fields = _self.getFields();

      BUI.each(fields,function(field){
        var name = field.get('name');
        if(record.hasOwnProperty(name)){
          _self._setFieldValue(field,record[name]);
        }
      });
    },
    /**
     * 设置控件获取焦点，设置第一个子控件获取焦点
     */
    focus : function(){
      var _self = this,
        fields = _self.getFields(),
        firstField = fields[0];
      if(firstField){
        firstField.focus();
      }
    },
    //禁用控件
    _uiSetDisabled : function(v){
      var _self = this,
        children = _self.get('children');

      BUI.each(children,function(item){
        item.set('disabled',v);
      });
    }
  },
  {
    ATTRS : {
      /**
       * 表单的数据记录，以键值对的形式存在
       * @type {Object}
       */
      record : {
        setter : function(v){
          this.setRecord(v);
        },
        getter : function(){
          return this.getRecord();
        }
      },
      /**
       * 内部元素的验证函数，可以使用2中选择器
       * <ol>
       *   <li>id: 使用以'#'为前缀的选择器，可以查找字段或者分组，添加联合校验</li>
       *   <li>name: 不使用任何前缀，没查找表单字段</li>
       * </ol>
       * @type {Object}
       */
      validators : {
        value : {

        }
      },
      /**
       * 默认的加载控件内容的配置,默认值：
       * <pre>
       *  {
       *   property : 'children',
       *   dataType : 'json'
       * }
       * </pre>
       * @type {Object}
       */
      defaultLoaderCfg  : {
        value : {
          property : 'children',
          dataType : 'json'
        }
      },
      disabled : {
        sync : false
      },
      isDecorateChild : {
        value : true
      },
      xview : {
        value : containerView
      }
    }
  },{
    xclass : 'form-field-container'
  }
); 
container.View = containerView;

module.exports = container;