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类型
举例:略