天天看点

序列化封装 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   其中参数部分:

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

          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的值。    

源码:(点击)

继续阅读