数据库存储数组或json实现 3级或N级联动

数据库存储数组或json实现 3级或N级联动

html代码为

<table class="form-table"><tbody><tr class="firstRow"><th>工单路径</th><td id="orderTypes"><ui id="orderPathUi"></ui></td></tr></tbody></table>

js代码

//假设有张配置表 config     value 为以下字符串
let orderTypes=[{"title":"咨询","key":"zx","children":[{"title":"和路通","key":"zx-hlt","children":[{"title":"智能后视镜X1","key":"zx-hlt-znhsj1","children":[]},{"title":"智能后视镜P1","key":"zx-hlt-znhsjp1","children":[]},{"title":"和路通M1/M1 Pro","key":"zx-hlt-hltm1","children":[]},{"title":"平台","key":"zx-hlt-pt","children":[]},{"title":"记录仪","key":"zx-hlt-jly","children":[]}]},{"title":"和车队","key":"zx-hcd","children":[{}]}]},{"title":"投诉","key":"ts","children":[{"title":"和路通","key":"ts-hlt","children":[{"title":"智能后视镜X1","key":"ts-hlt-znhsj1","children":[]},{"title":"智能后视镜X2","key":"ts-hlt-znhsj2","children":[]},{"title":"和路通E1","key":"ts-hlt-hlte1","children":[]},{"title":"记录仪","key":"ts-hlt-jly","children":[]}]},{"title":"和车队","key":"ts-hcd","children":[{}]}]}]//已选中的数据 keyvar selectedKey=[];//已选中的数据对象var selectedData=[];// orderTypes=[{"title":"咨询","key":"zx","children":[{"title":"和路通","key":"zx-hlt","children":[{"title":"智能后视镜X1","key":"zx-hlt-znhsj1","children":[]},{"title":"智能后视镜X2","key":"zx-hlt-znhsj2","children":[]},{"title":"智能后视镜X3","key":"zx-hlt-znhsj3","children":[]},{"title":"OBD盒子","key":"zx-hlt-obdhz","children":[]},{"title":"和路通D1","key":"zx-hlt-hltd1","children":[]},{"title":"和路通D2","key":"zx-hlt-hltd2","children":[]},{"title":"后视镜R611","key":"zx-hlt-hsjr611","children":[]},{"title":"智能后视镜P1","key":"zx-hlt-znhsjp1","children":[]},{"title":"和路通M1/M1 Pro","key":"zx-hlt-hltm1","children":[]},{"title":"和路通S1","key":"zx-hlt-hlts1","children":[]},{"title":"T-BOX","key":"zx-hlt-tbox","children":[]},{"title":"平台","key":"zx-hlt-pt","children":[]},{"title":"记录仪","key":"zx-hlt-jly","children":[]}]},{"title":"和车队","key":"zx-hcd","children":[{}]},{"title":"商机","key":"zx-sj","children":[{}]}]},{"title":"投诉","key":"ts","children":[{"title":"和路通","key":"ts-hlt","children":[{"title":"智能后视镜X1","key":"ts-hlt-znhsj1","children":[]},{"title":"智能后视镜X2","key":"ts-hlt-znhsj2","children":[]},{"title":"智能后视镜X3","key":"ts-hlt-znhsj3","children":[]},{"title":"OBD盒子","key":"ts-hlt-obdhz","children":[]},{"title":"和路通D1","key":"ts-hlt-hltd1","children":[]},{"title":"和路通D2","key":"ts-hlt-hltd2","children":[]},{"title":"后视镜R611","key":"ts-hlt-hsjr611","children":[]},{"title":"智能后视镜P1","key":"ts-hlt-znhsjp1","children":[]},{"title":"和路通M1/M1 Pro","key":"ts-hlt-hltm1","children":[]},{"title":"和路通S1","key":"ts-hlt-hlts1","children":[]},{"title":"和路通S2","key":"ts-hlt-hlts2","children":[]},{"title":"和路通E1","key":"ts-hlt-hlte1","children":[]},{"title":"和路通E2","key":"ts--hlte2","children":[]},{"title":"T-BOX","key":"ts-hlt-tbox","children":[]},{"title":"平台","key":"ts-hlt-pt","children":[]},{"title":"记录仪","key":"ts-hlt-jly","children":[]}]},{"title":"和车队","key":"ts-hcd","children":[{}]}]}];//当前节点子集数据var currentNodeChildData=orderTypes;var orderPathUiElm ;orderPathUiElm&#ElementById('orderPathUi');orderPathAppendChild($compile,$scope,orderTypes);/*** 工单路径 联动 添加子节点r*/function orderPathAppendChild($compile,$scope,arr) {// let select = '<li><select style="max-width:160px;margin-right:6px" name="orderPath" class="" > <option value="*">--请选择--</option>';let li = ateElement("li");let select = ateElement("select");select.style.maxWidth="160px";select.style.marginRight="6px";select.className="form-control ng-pristine ng-valid ng-valid-custom-validate";select.name="orderPath";let defaultOption = ateElement("option");defaultOption.value="*";="--请选择--";select.appendChild(defaultOption)  ;if (arr.length>0){for (let i = 0; i < arr.length; i++) {let orderType = arr[i];let option = ateElement("option");option.value=orderType.=orderType.title;select.appendChild(option);}}li.appendChild(select);let childNodes = orderPathUiElm.childNodes;orderPathUiElm.insertBefore($compile(li)($scope)[0], childNodes[childNodes.length-1]);addChangeEvent($compile,$scope,select,arr);}/*** 添加change事件* @param $compile* @param $scope* @param select* @param arr*/function addChangeEvent($compile,$scope,select,arr) {let orderPath = ElementsByName('orderPath');select.addEventListener('change',function(){for (let i = 0; i < orderPath.length; i++) {if (orderPath[i]===select){let value = select.selectedOptions[0].value;selectedKey.splice(i);selectedData.splice(i);querySelectedNode(value,arr);setNextChildrenData();removeChildrenNode(orderPath);orderPathAppendChild($compile,$scope,currentNodeChildData);// console.log("selectedKey",selectedKey);// console.log("当前节点子集数据",currentNodeChildData);}}},false)}/*** 查询选中节点 对象* @param key* @param arr*/function querySelectedNode(key,arr){arr.forEach(function(data){if (key===data.key){selectedKey.push(key);selectedData.push(data);return false;}else{querySelectedNode(key,data.children);}});}/*** 设置下一节点数据*/function setNextChildrenData(){let data = selectedData[selectedData.length-1];if (selectedKey.length>0){if (data){currentNodeChildData=data.children}else{currentNodeChildData= selectedData[selectedData.length-2].children}}else{currentNodeChildData=data?data.children:orderTypes}}/*** 删除子节点* @param orderPath*/function removeChildrenNode(orderPath){let removeNodes=[];orderPath.forEach(function (path) {if (selectedKey.indexOf(path.value)===-1){// console.log(orderPath);removeNodes.push(path.parentNode);}});//这里有个坑，不能写在for循环里面 删除   ，切记  ，折腾一晚上。。removeNodes.forEach(function (node) {veChild(node);})}