GetTree 获取树数据
简介
树数据源有很多种，为了方便获取数据之后的操作，对获取数据源和格式处理进行了封装。
axTreeMethod.getFullData
该函数可输出完整的树结构数据，返回一个对象{data:[],floorMax:'',idMax:''}。
- data即为完整的树形数据，带children、id、label、pId、path、floor等属性
- floorMax即为data的层级数量，最小为1
- idMax即为data的最大id值，如果id为字符串则该值为0
注意：如果addPath为false，那么该函数直接返回data而不是带floorMax和idMax的对象。
该方法最终返回一个promise，如果需要继续操作需要在then中进行。
完整写法：axTreeMethod.getFullData(opt={}) ，参数说明如下：
- source:必填项，数据源，支持多种格式：
- 节点选择器字符串，例如#id、.className、nodeName等，节点应该是ul、ol、select、datalist四种中其中的一种
- 节点对象，支持ul、ol、select、datalist四种节点
- 链接字符串，与async配合使用，表示异步地址
- 一维数组，带id和pId的一维数组
- 多维数组，带children属性的多维数组
- idStart:id初始值，选填项，默认为0；如果原数据没有id，该方法将给数据强制带上id
- rootStart:顶级节点的pId，选填项，默认为-1；如果原数据不是带pId的一维数组，该方法将给数据强制带上pId。
- replace:如果value属性值为空，是否用label值填充value值，选填项，默认为false即不替换；对source为节点有效。
- async:是否为异步方式，选填项，默认为false；如果source参数为链接，那么此参数应该为true。
- ajaxType:异步方式的类型，选填项，默认为post。
- ajaxData:异步方式传递的数据，选填项，为一个对象，如果使用sql异步应该必填此参数。
- addPath:输出值是否带上path和pId，选填项，默认为true。如果为false则函数仅输出数组数据，且数据中不带pId和path
- loadDom:异步缓冲的节点，可以是#id、.className、nodeName或节点，选填项
- instance:当前操作实例，选填项
- xhrName:异步操作XMLHttpRequest的名字，选填项
- opend:异步操作opened回调函数，选填项，支持参数response；如果没有该参数，但是填了instance和xhrName，那么会自动给实例追加xhrName
- before:异步操作before回调函数，选填项，支持参数response；如果没有该参数，但是填了loadDom，那么会自动给loadDom追加loading属性
- success:异步操作success回调函数，选填项，支持参数response
- callback:获得数据后的回调函数，选填项，支持参数data即函数返回的最终数据
从ul/ol+li节点获取数据
-
<ul id="ul"> <li><a>北京</a> <ul> <li><a>朝阳区</a></li> <li><a>丰台区</a></li> <li><a>海淀区</a></li> </ul> </li> <li><a>广东</a> <ul> <li><a>广州市</a></li> <li><a>深圳市</a></li> </ul> </li> <li><a>上海</a></li> <li><a>重庆</a></li> </ul> <a href="###" class="ax-btn" id="getUl">点击获取</a> -
axTreeMethod.getFullData({ source:'#ul' }).then((data)=>{ console.log('Ul数据：',data) });
从select节点获取数据
-
<select id="select"> <optgroup label="直辖市"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </optgroup> <optgroup label="广东省"> <option value="深圳">深圳</option> <option value="广州">广州</option> <option value="珠海">珠海</option> <option value="惠州">惠州</option> </optgroup> <optgroup label="湖南省"> <option value="长沙">长沙</option> <option value="株洲">株洲</option> <option value="岳阳">岳阳</option> <option value="张家界">张家界</option> </optgroup> <optgroup label="江西省"> <option value="南昌">南昌</option> <option value="赣州">赣州</option> <option value="宜春">宜春</option> <option value="九江">九江</option> </optgroup> </select> <a href="###" class="ax-btn" id="getSelect">点击获取</a> -
let select = document.querySelector('#select'), getSelect = document.querySelector('#getSelect'); getSelect.onclick = () => { axTreeMethod.getFullData({ source: select }).then((data) => { console.log('select数据：', data) }); }
从datalist节点获取数据
-
<datalist id="datalist"> <option>Apple苹果</option> <option>Banana香蕉</option> <option>Tomato西红柿</option> <option>Grape葡萄</option> <option>Haw山楂</option> <option>Lemon柠檬</option> <option>Orange橙子</option> </datalist> <a href="###" class="ax-btn" id="getDatalist">点击获取</a> -
let datalist = document.querySelector('#datalist'), getDatalist = document.querySelector('#getDatalist'); getDatalist.onclick = () => { axTreeMethod.getFullData({ source: datalist }).then((data) => { console.log(data) }); }
从一维数组获取树数据
-
<select id="select"> <a href="###" class="ax-btn" id="get1d">点击获取</a> -
let get1d = document.querySelector('#get1d'), d1 = [{ id: 1, pId: 0, label: "北京市" }, { id: 2, pId: 1, label: "朝阳区" }, { id: 3, pId: 1, label: "丰台区" }, { id: 4, pId: 1, label: "海淀区" }, { id: 5, pId: 0, label: "广东省", }, { id: 6, pId: 5, label: "广州市", }, { id: 7, pId: 5, label: "深圳市", }, { id: 8, pId: 0, label: '上海市', }, { id: 9, pId: 0, label: '重庆市' },] get1d.onclick = () => { axTreeMethod.getFullData({ source: d1, }).then((data) => { console.log(data) }); }
id和pId为字符串的一维数组
-
<select id="select"> <a href="###" class="ax-btn" id="getUUID">点击获取</a> -
let getUUID = document.querySelector('#getUUID'), UUID = [{ id: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C', pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89', label: "北京市" }, { id: 'F9C5AD07-DA56-9925-752B-DB708C990FB1', pId: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C', label: "朝阳区" }, { id: 'CC75A8A4-E37B-638B-E480-EF46FA77138D', pId: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C', label: "丰台区" }, { id: '462CD1CB-6A4F-C190-60F9-4280E223FBA6', pId: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C', label: "海淀区" }, { id: 'F9CDA624-8AAC-632B-C28A-F05E595562DD', pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89', label: "广东省", }, { id: '876F4D96-2FDB-A730-2E77-05640E726E5A', pId: 'F9CDA624-8AAC-632B-C28A-F05E595562DD', label: "广州市", }, { id: '9C2BCDBF-A95E-3A68-8A00-8EC4E49972F7', pId: 'F9CDA624-8AAC-632B-C28A-F05E595562DD', label: "深圳市", }, { id: 'BB7E3FAF-22BB-6E67-9834-F3165F0C5DC6', pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89', label: '上海市', }, { id: '6A15B3F4-9378-F032-5710-81B54FA30C28', pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89', label: '重庆市' }] getUUID.onclick = () => { axTreeMethod.getFullData({ source: UUID, }).then((data) => { console.log(data) }); }
从多维数组获取树数据
-
<select id="select"> <a href="###" class="ax-btn" id="get3d">从多维数组获取数据</a> -
let get3d = document.querySelector('#get3d'), d3 = [{ id: 1, label: '北京市', children: [{ id: 2, label: '朝阳区' }, { id: 3, label: '丰台区' }, { id: 4, label: '海淀区' },] }, { id: 5, label: '广东省', children: [{ id: 6, label: '广州市' }, { id: 7, label: '深圳市' },] }, { id: 8, label: '上海市', }, { id: 9, label: '重庆市' },] get3d.onclick = () => { axTreeMethod.getFullData({ source: d3, }).then((data) => { console.log(data) }); }
从异步json获取数据
填了source参数，还需要通过async:true参数表明异步模式。
-
<select id="select"> <a href="###" class="ax-btn" id="getJson">点击获取</a> -
let getJson = document.querySelector('#getJson'); getJson.onclick = () => { axTreeMethod.getFullData({ source: ' ajax/treeSimple.json', async: true, }).then((data) => { console.log(data) }); }
从异步sql获取数据
必填ajaxData参数，向后台需要至少传递pId值，也就是告诉后台从哪一层开始获取数据。填了ajaxData已经表明了异步模式，此时不需要在填async参数。
-
<select id="select"> <a href="###" class="ax-btn" id="getSql">点击获取</a> -
let getSql = document.querySelector('#getSql'); getSql.onclick = () => { axTreeMethod.getFullData({ source: 'ajax/treeSql.php', ajaxData:{pId:0}, }).then((data) => { console.log(data) }); }
异步回调函数
本函数在异步模式下支持opened（发送请求）、before（成功之前）和success（成功后）回调函数。
用户可以在三种状态下执行其他的程序片段，比如在opened阶段阻止请求；在before阶段使用loading缓冲；success阶段给出成功提示。
-
<select id="select"> <a href="###" class="ax-btn" id="getCb">点击获取</a> -
let getCb = document.querySelector('#getCb'), loadindg = document.querySelector('#loading'); getCb.onclick = () => { axTreeMethod.getFullData({ source: 'ajax/treeSql.php', ajaxData: { pId: 0 }, opened: () => { console.log('开始获取数据'); }, before: () => { loadindg.innerHTML = '正在获取数据，请稍后...'; }, success:()=>{ loadindg.innerHTML = '获取数据成功，请看控制台！'; } }).then((data) => { console.log(data) }); }
不要floor、pId和path
如果仅仅需要获得普通原始数据，并不需要floor、pId和path属性，可对参数addPath设为false，此时函数将返回原始数组数据而不是带floorMax和idMax的对象了。
-
<datalist id="raw"> <option>Apple苹果</option> <option>Banana香蕉</option> <option>Tomato西红柿</option> <option>Grape葡萄</option> <option>Haw山楂</option> <option>Lemon柠檬</option> <option>Orange橙子</option> </datalist> <a href="###" class="ax-btn" id="getRaw">点击获取</a> -
let raw = document.querySelector('#raw'), getRaw = document.querySelector('#getRaw'); getRaw.onclick = () => { axTreeMethod.getFullData({ source: raw, addPath: false, }).then((data) => { console.log(data) }); }