序列化封装 table数据和搜索条件的js小插件

           源码:(点击)

 

v1.2(以此版本为主，1.1版本直接忽略)

     $("#searchForm").serializeSearch();//针对搜索区

      $("#mainId").serializeTable();//针对table数据 进行封装成对象

参数	作用	类型	默认值	必填
bind	针对table输入内容的数组封装为对象	string	''	否
resultType	返回的类型(针对搜索区)	string/object	string	否
filter	过滤不要的【name】字段	Array	[]	否

v1.1

tableSerializeV1.1.js :

1.简化js

2.$("#listTable").serializeTable({bind:""});

 2.1 bind属性简化，如上 如值为空 返回的则是 数组 如不为空  则返回的是对象数组
  
  ## serializeTable方法 
 2.2 移除参数 filter
 2.3 移除参数 able

3.$("#listTable").serializeSearch({'resultType':"object"});//

     3.1 resultType属性为空 默认对象 如{name:'lisi',age:26}  
          否则返回字符串例如 "name=lisi&age=26"  
     3.2 移除参数 filter
     3.3 移除参数 able

4.需要过滤的input select 等 加上class为need_ingore即可。

原始版本

tableSerialize.js :序列化-封装搜索区或者table内输入框下拉框内容的小插件

  var tables = $("#listTable").serializeSearch({'bind': { able: false}});
  //封装格式化 多table部分  

参数	作用	类型	默认值	必填
el	绑定的id	String	'' (例如上面的‘#listTable’)	是
bind	绑定封装后的对象属性	Object	'bind': { able: true}	是
able	bind下的属性	Boolean	true	否
filter	过滤不要的封装字段	Array	[]	否

 ##var mains = $("#mainContent").serializeSearch({'resultType':"object"});
 //封装格式化 多搜索区域 将其变成url后参数或者整个对象

参数	作用	类型	默认值	必填
el	绑定的id	String	'' (例如上面的‘#mainContent’)	是
bind	绑定封装后的对象属性	Object	'bind': { able: true}	否
able	bind下的属性	Boolean	true	否
filter	过滤不要的封装字段	Array	[]	否
resultType	结果类型	Oject/String(默认)	实例score=100&age=10	否

 

这个目的在于传递参数或对象时 不需要挨个$（"xx"）.val()的方式 同时也避免了form的序列化方法把一些隐藏域传入 造成不必要的麻烦。

 

 

tableSerializeV1.1.js  使用demo

 

  var tables = $("#listTable").serializeTable({'bind': { able: false}});//id是table 【 表格 】的id 针对下面input的值 封装成json对象

 

  var mains = $("#mainContent").serializeSearch({'resultType':"object"});//id是搜索区的id

 

其中参数部分：

 

 

 

 

 

tableSerializeV1.2.js 使用demo

 

var search =$("#mainContent").serializeSearch({resultType:'obj'});

console.log(search);//这里是个对象 一般是搜索栏的数据  

 

var tables = $("#listTable").serializeTable({bind:'list',filter:['status']});

console.log(tables);//这里是个数组对象

 

优化如下：1. 参数结果扁平化 只有三个形参  bind 绑定， filter 过滤字段 resultType 返回类型

                 2. 方法  serializeSearch 和  serializeTable 使用了not方法 过滤不需要的class控件值，过滤class为 need_ingore. 搜索方法 serializeSearch 通过这个直接返回连接参数 格式为 name='liming'&age=18 ，不需要像之前拼接的方式进行处理。

      3.过滤的字段（针对table里面的控件值） 提过两种方式过滤  一是设置 class为need_ingore , 二是如上面紫色字体标注 设置filter的值，值为对应过滤控件的name的值。

 

 

源码:(点击)