DataTo 数据转换

简介

开发软件的时候经常遇到数据转换,比如字符串转数字,ul+li转json,#id转node节点等,以确保程序可按预定的方式执行下去。

axStrToDom

该函数是将字符串转成Dom节点对象。

完整写法:axStrToDom(string),参数说明如下:

  • string:必填项,通常为"<div>伟大的中国</div>"等标签与文字夹杂的字符串。

举例:axStrToDom('<div>伟大的中国</div>'),该例子表明将"<div>伟大的中国</div>"字符串转成可以使用document.querySelector选择器的节点。

axIdToDom

该函数表示选择#id、.className、div等Dom对象,如果本身是Dom则直接返回该Dom。

完整写法:axIdToDom(string),参数说明如下:

  • string:节点选择器,可以填"#id"、".className"、"DIV"、"[name]"等原生选择器,详细写法请点击这里

举例:axIdToDom('#demo'),该例子结果等于document.querySelector('#demo')。

axArrToDom

该函数将逗号区分的字符串转成数组,并根据数组内容转成Dom集合。

完整写法:axArrToDom(str, parent),可简写axArrToDom(str),参数说明如下:

  • str:必填项,是以英文逗号分隔的字符串,比如"#demo,.china,div"。
  • parent:可选项,如果填写表示只将其子元素转入集合,可以填"#id"、".className"、"div"等原生选择器以及Dom对象

举例:axArrToDom(".china,div", "#demo"),该例子返回#demo这个父节点下的.china和div子元素。

axUlToArr

该函数可以将UL+LI格式的内容转成Json对象,类似[{'label':'中国',value:'china','id':'no01','children':{}}]。

id会自动创建,label即是叶子第一个子节点文本,value即value属性值。

此外可获得节点所有属性,例如sub、legend、image、tip、avatar、brief、avatar、brief、rank、time、editor、source、count、keyword、state、flag、type、visit、review、selected、disabled、checked、expanded、active、readonly等

完整写法:axUlToArr(elem,start,replace),参数说明如下:

  • elem:节点选择器,可以填"#id"、".className"、"DIV"、"[name]"等原生选择器,详细写法请点击这里;elem必须是ul节点对象
  • start:选填项,第一个节点id开始值,start默认为0,也就是说节点的id从0开始计数
  • replace:选填项,如果没有value属性是否将label设为value值,默认为true

举例:axUlToArr('#demo'),该例子将id为demo的ul节点转成Json对象

axSelectToArr

该函数可以将select下拉菜单和datalist列表的内容转成Json对象,类似[{'label':'中国',value:'china','id':'no01','children':{}}]。

id会自动创建,label即是option节点文本,value即value属性值。

此外可获得节点所有属性,例如sub、legend、image、tip、avatar、brief、avatar、brief、rank、time、editor、source、count、keyword、state、flag、type、visit、review、selected、disabled、checked、expanded、active、readonly等

完整写法:axSelectToArr(elem,start,replace),参数说明如下:

  • elem:节点选择器,可以填"#id"、".className"、"DIV"、"[name]"等原生选择器,详细写法请点击这里
  • start:选填项,第一个节点id开始值,start默认为0,也就是说节点的id从0开始计数
  • replace:选填项,如果没有value属性是否将label设为value值,默认为true

举例:axSelectToArr('#demo'),该例子将id为demo的select节点转成Json对象

axStrToArr

该函数可以将字符串转成数组,支持字符串类型有'[]','{},{}','{}'和'a,b,c'。

注意'{}'中属性和值的写法需要用双引号,比如:'{"country":"China"}'

完整写法:axStrToArr(string,dftAttr,dftValue),参数说明如下:

  • string:可以填'[]','{},{}','{}'或'a','a,b,c'
  • dftAttr:选填项,默认属性,是数组。比如['media','caption']
  • dftValue:选填项,与默认属性相对应的默认值,是数组。比如['','测试标题']

举例:axStrToArr('{"country":"China"},{"country":"Rusia"}'),该例子将最终返回一个数组:[{country:"China"},{country:"Rusia"}]

axTplToArr

该函数可以将页面中的HTML模板转成数组。

完整写法:axTplToArr(template, roles, keys, itemNode,dft),参数说明如下:

  • template:必填项,HTML模板。可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • roles:必填项,HTML模板中的标签属性,是数组类型,比如['src','title']
  • keys:必填项,转成数组后的属性名合集,是数组类型,比如['media','caption']
  • itemNode:选填项,HTML模板中的子节点名称,如果是列表就需要填
  • dft:选填项,转成数组后的属性为空时是否使用默认值,是数组类型,比如['','测试标题']

举例:axTplToArr('#demo', ['src','title'], ['media','caption'], 'figure'),该例子将最终返回一个数组:[{media:"",caption:''},{media:"",caption:''}]

HTML模板如下:

                                <div style="display:none;" id="demo">
                                <figure>
                                    <img src="../demo01.jpg">
                                    <figcaption title>测试1</figcaption>
                                </figure>
                                <figure>
                                    <img src="../demo02.jpg">
                                    <figcaption title>测试2</figcaption>
                                </figure>
                                <figure>
                                    <img src="../demo03.jpg">
                                    <figcaption title>测试3</figcaption>
                                </figure>
                            </div>
                            

axMultiValues

该函数将可以数组或字符串的形式获取checkbox、radio、select和file的值。

该函数默认返回一个数组,比如['book','travel','fitness'],如果讲format设置为string,那么将输出“book,travel,fitness”,如果将进行表单提交操作,通常需要字符串格式。

file类型比较特殊,无法直接将文件路径数据提交到表单,通常需要用一个隐藏域存储文件路径;推荐使用axUpload组件上传文件,该组件可将成功上传的文件的路径以字符串的形式存储在隐藏域。

完整写法:axMultiValues(name, type, format,parent,separator),可简写axMultiValues(name),参数说明如下:

  • name:必填,表单元素或元素的name,其支持多种格式:
    • 1、name为表单元素的name值或[name],string类型
    • 2、name为表单元素的父节点,#id、className或node节点,此时插件会从内部以数组形式取得input的节点
    • 3、name为表单元素的节点数组,array类型
  • type:选填,表单元素类型,默认值为checkbox,可选择radio、select或file
  • format:选填,取得的值最终以什么格式输出,默认是array数组(格式如:['book','travel']),可选择string(格式如:'book,travel')
  • parent:选填,获取表单元素的父层,默认是document
  • separator:选填,数组值转字符串时的分隔符,默认是英文逗号

axArrToTree

该函数可以将多一维数组转成tree数组,通常用于从sql获取数据之后转成tree数组。

完整写法:axArrToTree(arr, start),参数说明如下:

  • arr:必填项,一维数组,注意数组中每一项必须都有id和pId属性
  • start:选填项,顶级父id,如果不填则默认为0

举例:略

axSerialize

该函数可以将表单有name属性的表单域(input、select、textarea)的值转为字符串、json或array。

完整写法:axSerialize(elem,type,separator),参数说明如下:

  • elem:必填项,节点选择器,可以填"#id"、".className"、"DIV"、"[name]"等原生选择器,详细写法请点击这里;可以是表单form节点(div等其他父节点也可以),也可以是input节点数组
  • type:选填项,序列化值类型,默认string,可选择json或array,举例说明如下:
    • string:&name=Lily&age=18&city=Beijing
    • json:{name:'Lily',age:18,city:'Beijing'}
    • array:[{name:'name',value:'Lily'},{name:'age',value:18},{name:'city',value:'Beijing'},]
  • separator:多值转成字符串之后的分隔符,默认是英文逗号

举例:略

axStrToFilter

该函数可以将字符串转成可执行的js语句,返回filter结果,是一个数组

完整写法:axStrToFilter(str, source, callback),参数说明如下:

  • str:必填项,字符串语句,filter语句,比如" item.name == 'han' && item.age > 18 ",条件变量名必须是item
  • source:必填项,filter数据变量。
  • callback:选填项,回调函数,支持一个参数,即该函数filter返回值。

举例:略

axArrToFlat

该函数可以将带children属性的多维数组转成一维数组,以方便使用filter等数组操作方法,最终返回新的数组(新数组里的项跟原数组项内存地址不变)

完整写法: axArrToFlat(arr),参数说明如下:

  • arr:必填项,多维数组

举例:略

axValueToArr

该函数可以将多种类型参数统一转成数组格式,以便于后续开发。

完整写法:axValueToArr(obj),obj参数支持格式如下:

  • 单个字符串,例如obj='China',函数返回['China']
  • 逗号分割字符串,例如obj='China,USA',函数返回['China','USA']
  • 空格分割字符串,例如obj='China USA',函数返回['China','USA']
  • 单个数字,例如obj=98,函数返回[98]
  • 多个数字,例如obj='8,9,12'/'8 9 12',函数返回['8','9','12']
  • 一个对象,例如obj={},函数返回[{}]
  • 一个数组,例如obj=[],函数返回原始数组

举例:略

axIncreaseId

该函数可以根据现有数据在追加新项的时候自动创建id。

完整写法:axIncreaseId(data,hasId),

  • data是数组,如果需要是树状数据则需要借助axArrToFlat(data)函数将数组拍平。
  • hasId表示数组中项目是否包含id属性,如果为true,那么将从所有项id中取最大值+1并返回;如果为false,那么函数将返回数组的length值;默认为true

举例:略

axTrim

该函数可以去掉收尾空格,字符串中间多个空格将只会保留一个空格。

完整写法:axTrim(str, all = false),

  • str是任意字符串。
  • all是指是否去掉字符串中所有的空格,默认为false,可选择true。

举例:略

axSplitToArr

该函数可以将字符串分隔为字符串数组。

完整写法:axSplitToArr(data, separator = ',', space = 'all')

  • data:字符串或数组,如果是数组将直接返回。
  • separator:字符串分隔符,默认为英文逗号。
  • space:中间空格处理方式,默认保留中间空格不做处理,当space为one时表示只保留一个空格;当space为none是表示不保留任何空格。

举例:略

axUnique

该函数可以对数组去重。支持两种数组:[0,0,1,2,2,3]和[{id:0,label:'a'},{id:0,label:'b'},{id:1,label:'c'}]

完整写法:axUnique(arr, prop)

  • arr:数组,如果是对象数组则需要使用prop参数。
  • prop:去重比较的属性,如果为空则从普通数组去重。

举例:略

axNumber

该函数可以获取指定位数的小数,支持补零。

完整写法:axNumber(data, opt),可简写为axNumber(data),默认获取两位小数+四舍五入+不补零

  • data:数字或字符串(带字母/空格/特殊字符的字符串将输出0),必填项
  • opt:参数选项,是一个对象,支持的属性如下:
    • mode:截断模式,默认round即四舍五入,另外可选择floor向下取小和ceil向上取大
    • places:截取位数,默认2即小数两位
    • zero:位数不够是否补零,默认不补零,如果设为true那么输出结果看着是数字但是是string类型

举例:略