Form表单传递List数组属性到后台对象中

 

第一层属性的List

 

 

后台有一个对象 User ，结构如下：

public class User{

 private String username;



 private List<PhotoDo> photo;



 ..get ....set.....



}



public class PhotoDo{

 private String id;



 private String name;



  ...get...set...

}

Controller中接受方法 getUser

 

@reqeustMapping("/getUser")

public void getUser(User user){



...实现方法...



}

前台Form这么写：

<form>

     <input type="text" name="username" aciton="..">



     <input type="text" name="photo[0].id">

     <input type="text" name="photo[0].name">

     <input type="text" name="photo[1].id">

     <input type="text" name="photo[1].name">

     <input type="text" name="photo[2].id">

     <input type="text" name="photo[2].name">

</form>

 

 

 

 

第二层属性的List

 

如果List属性不是在User属性的第一层，而是在第二层，则需要处理一下。

 

后台有一个对象 User ，结构如下：
 

public class User{
 private String username;


 private Address address;


 ..get ....set.....


}






public class Address{
 private List<PhotoDo> photo;


 ..get ....set.....


}




public class PhotoDo{
 private String id;


 private String name;


  ...get...set...
}

Controller中接受方法 getUser

 

@reqeustMapping("/getUser")
public void getUser(User user){


...实现方法...


}

前台Form这么写：

 

<form>
     <input type="text" name="username" aciton="..">


     <input type="text" name="address.photo[0].id">
     <input type="text" name="address.photo[0].name">
     <input type="text" name="address.photo[1].id">
     <input type="text" name="address.photo[1].name">
     <input type="text" name="address.photo[2].id">
     <input type="text" name="address.photo[2].name">
</form>

Js中需要作处理:


 

$('button.save').on('click', function () {
            debugger;
            var data = $('#user').formGet();
            var photos = new Array();
            for (var i in data.address) {
                photos.push(data.address[i]);
            }
            data.photos= photos;
            $.ajax({
                type: "POST",
                url: "/user/save",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (result) {
                    console.log(result);
                    if (!result.code) {
                        $('#mutation').formSet(data);
                        location.href = '/user'
                    } else {
                        alert(result.msg);
                    }
                },
                error: function () {
                    alert("出错了，请稍后重试");
                }
            });


        });








其中使用的几个函数为:


 var _fnObjectGetPropertyChainValue = function(obj, propertyChain) {
      /* 获取属性链的值 */
      if (!obj) return;
      if (!propertyChain) return obj;
      var property,
        chains = propertyChain.split('.'),
        i = 0,
        len = chains.length;
      for (;
        (property = chains[i]) && i < len - 1; i++) {
        if (!obj[property]) return;
        obj = obj[property];
      }
      return obj[property];
    },
    _fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) {
      /* 设置属性链的值 */
      if (!obj || !propertyChain) return;
      var property,
        chainObj = obj,
        chains = propertyChain.split('.'),
        i = 0,
        len = chains.length;
      for (;
        (property = chains[i]) && i < len - 1; i++) {
        if (!chainObj[property]) {
          chainObj[property] = {};
        }
        chainObj = chainObj[property];
      }
      // 改进版：checkbox的多选可以组合为数组
      if (!allowMulti || chainObj[property] === undefined) {
        chainObj[property] = value;
      } else {
        var pv = chainObj[property];
        if ($.isArray(pv)) {
          pv.push(value);
        } else {
          chainObj[property] = [pv, value];
        }
      }
      return obj;
    };



 /**
     * jQuery form 扩展获取数据
     */
  $.fn.formGet = function(opts) {
    opts = $.extend({}, opts);
    var data = {},
      els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');
    if (!els || !els.length) {
      return data;
    }


    var fnSetValue = (function(emptyToNull) {
      return emptyToNull ? function(obj, propertyChain, value, allowMulti) {
        value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti)
      } : _fnObjectSetPropertyChainValue
    })(opts.emptyToNull);


    els.each(function() {
      var $this = $(this),
        type = $this.attr('type'),
        name = $this.attr('name'), // 可能为属性链
        tag = this.tagName.toLowerCase();
      if (tag == 'input') {
        if (type == 'checkbox') {
          var v = $(this).val();
          if (v == 'on' || !v) {
            fnSetValue(data, name, $(this).prop('checked'));
          } else {
            $(this).prop('checked') && fnSetValue(data, name, v, true);
          }
        } else if (type == 'radio') {
          this.checked && fnSetValue(data, name, $this.val());
        } else {
          fnSetValue(data, name, $this.val());
        }
      } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {
        fnSetValue(data, name, $this.val());
      } else {
        fnSetValue(data, name, $.trim($this.text()));
      }
    });
    return data;
  };









  /**
     * jQuery form 扩展绑定数据
     * 
     */
  $.fn.formSet = function(data, formGroup) {
    var els = formGroup ? this.find('[form-group="' + formGroup + '"]') : this.find('[name]');
    if (!els || !els.length) {
      return this;
    }



    els.each(function() {
      var $this = $(this),
        type = $this.attr('type'),
        name = $this.attr('name'),
        tag = this.tagName.toLowerCase();


      var value = _fnObjectGetPropertyChainValue(data, name);
      if (tag == 'input') {
        if (type == 'checkbox') {
          var v = $(this).val();
          if (v == 'on' || !v) {
            this.checked = value ? 'checked' : '';
          } else {
            this.checked = $.isArray(value) && value.indexOf(v) > -1 ? 'checked' : ''
          }
        } else if (type == 'radio') {
          this.checked = $this.val() == String(value) ? 'checked' : '';
        } else {
          $this.val(value);
        }
      } else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {
        $this.val(value);
      } else {
        $this.html(value);
      }
    });
    return this;

  };