vue 模拟下拉树

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

// 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化【使用 watch+nextTick 可以完成页面数据监听的不会出现闪烁】 regFreData: { //深度监听运费表格数据 handler(val, oldVal) { this.$nextTick(function() { var thisSelTreeData = this.regFreTreeData; //每一个表格树选中的值 for(var j = 0; j < thisSelTreeData.length; j++) { if(thisSelTreeData[j].data.length > 0) { var thisHtml = ""; for(var i = 0; i < thisSelTreeData[j].data.length; i++) { thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisSelTreeData[j].data[i].title + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="remoeTblSelTreeNode(this,' + j + ',\'' + thisSelTreeData[j].data[i].title + '\')"></i > </div>'; } //选中的值渲染到页面 $("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html(thisHtml); } else { $("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html('<span class="ivu-select-placeholder">请选择</span>'); } } }); }, deep: true } }, methods: { //未指定地区设置运费点击事件 addregFreData: function() { var thisTreeId = "freightTblTree_" + this.regFreData.length; //表格数据增加一条数据 this.regFreData.push({ destination: '', //运送到 firstThings: 0, //首** firstFreight: 0, //首**费用 continueThings: 0, //续** continueFreight: 0, //续**费用 treeId: thisTreeId, treeData: JSON.parse(JSON.stringify(this.regLea)), eidtId: "11" //无用初始使用 }); //每个表格下拉树选中的值 this.regFreTreeData.push({ treeId: thisTreeId, data: [] }); //显示表格 app.showFreTbl = true; }, //表格下拉树选中节点的事件【】 showSelNodes: function(thisDatas, treeID, index) { //所有选中树节点数据,当前树的ID，树在数组中的索引 var thisHtml = ""; this.regFreTreeSelData = [], //title thisSelData = []; //选中的值 for(var i = 0; i < thisDatas.length; i++) { if(thisDatas[i].hasOwnProperty("children") && this.regFreTreeSelData.indexOf(thisDatas[i].nodeKey) == -1) { //拥有子级【保存子级的nodeKey】 thisSelData.push(thisDatas[i]); thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisDatas[i].title + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="remoeTblSelTreeNode(this,' + index + ',\'' + thisDatas[i].title + '\')"></i > </div>'; this.saveSelTreeNodeKey(thisDatas[i].children); } else { if(this.regFreTreeSelData.indexOf(thisDatas[i].nodeKey) == -1) { thisSelData.push(thisDatas[i]); thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisDatas[i].title + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="remoeTblSelTreeNode(this,' + index + ',\'' + thisDatas[i].title + '\')"></i > </div>'; } } } //将选中的值保存到每一个下拉树的值 this.regFreTreeData[index].data = thisSelData; //选中的值渲染到页面 $("body").find("#" + treeID).parent().parent().siblings().children("div").html(thisHtml); }, //表格下拉树选中事件递归 saveSelTreeNodeKey: function(thisDatas) { for(var i = 0; i < thisDatas.length; i++) { if(this.regFreTreeSelData.indexOf(thisDatas[i].nodeKey) == -1) { this.regFreTreeSelData.push(thisDatas[i].nodeKey); } if(thisDatas[i].hasOwnProperty("children")) { this.saveSelTreeNodeKey(thisDatas[i].children); } } }, //修改表格下拉树的选中状态 editTblTreeChecked: function(selData, treeDataindex) { var thisTreeData = this.regFreData[treeDataindex].treeData, thisselTitleArr = selData.map(function(value, index, arr) { return value.title; }); for(var i = 0; i < thisTreeData.length; i++) { if(thisselTitleArr.indexOf(thisTreeData[i].title) > -1 && !thisTreeData[i].hasOwnProperty("children")) { thisTreeData[i].checked = true; } else { thisTreeData[i].checked = false; } if(thisTreeData[i].hasOwnProperty("children")) { this.dgEditTblTreeChecked(thisselTitleArr, thisTreeData[i].children); } } }, ////修改表格下拉树的选中状态递归 dgEditTblTreeChecked: function(thisselTitleArr, thisTreeData) { for(var i = 0; i < thisTreeData.length; i++) { if(thisselTitleArr.indexOf(thisTreeData[i].title) > -1 && !thisTreeData[i].hasOwnProperty("children")) { thisTreeData[i].checked = true; } else { thisTreeData[i].checked = false; } if(thisTreeData[i].hasOwnProperty("children")) { this.dgEditTblTreeChecked(thisselTitleArr, thisTreeData[i].children); } } } }, data: { showFreTbl: false, //是否显示表格 //地区省市级联数据 regLea: [], //保存选中当前树的节点的title regFreTreeSelData: [], //保存表格每一个下拉树选中的值 regFreTreeData: [], //为地区设置运费表格 -数据 regFreData: [], showFreData: false, tablInputData:[10], //为地区设置运费表格 -列 regFreCol: [{ title: '运送到', key: 'destination', width: 300, render: function(h, params) { return h("div", [ h("Select", { props: { "multiple": "multiple" } }, [ h("Tree", { props: { "data": params.row.treeData, "show-checkbox": "show-checkbox", "multiple": "multiple" }, attrs: { //属性存放id id: params.row.treeId }, on: { "on-check-change": function(data) { //对应下拉树的ID var thisTreeId = params.row.treeId; if(data.length == 0) { $("body").find("#" + thisTreeId).parent().parent().siblings().children("div").html('<span class="ivu-select-placeholder">请选择</span>'); } else { //渲染选中的树的节点 app.showSelNodes(data, thisTreeId, params.index); } //计算下拉的位置 var afterOffset = parseInt($("body").find("#" + thisTreeId).parent().parent().siblings()[0].offsetHeight), thisOffsetTop = parseInt($("body").find("#" + thisTreeId).parent().parent().siblings()[0].offsetTop); $("body").find("#" + thisTreeId).parent().parent().css({ "top": thisOffsetTop + afterOffset }); //设置选中的节点的状态 app.editTblTreeChecked(data, params.index); } } }) ]) ]) } }, { title: '首件(件)', key: 'firstThings', render: function(h, params) { return h('div', [ h('InputNumber', { props: { value:params.row.firstThings, min: 0, size: 'small' }, style: { width: "100%" }, on: { "on-change": function(value) { //保存 params.row.firstThings=value; app.regFreData[params.index] = params.row; } } }) ]); } }, { title: '费用(元)', key: 'firstFreight', render: function(h, params) { return h('div', [ h('InputNumber', { props: { value: params.row.firstFreight, min: 0, size: 'small' }, style: { width: "100%" }, on: { "on-change": function(value) { params.row.firstFreight=value; app.regFreData[params.index] = params.row; } } }) ]); } }, { title: '续件(件)', key: 'continueThings', render: function(h, params) { return h('div', [ h('InputNumber', { props: { value: params.row.continueThings, min: 0, size: 'small' }, style: { width: "100%" }, on: { "on-change": function(value) { params.row.continueThings=value; app.regFreData[params.index] = params.row; } } }) ]); } }, { title: '运费(元)', key: 'continueFreight', render: function(h, params) { return h('div', [ h('InputNumber', { props: { value: params.row.continueFreight, min: 0, size: 'small' }, style: { width: "100%" }, on: { "on-change": function(value) { params.row.continueFreight=value; app.regFreData[params.index] = params.row; } } }) ]); } }, { title: '删除', key: 'del', render: function(h, params) { return h('Poptip', { props: { trigger: 'click', title: "确认删除吗", placement: 'bottom', confirm: "confirm" }, on: { "on-ok": function() { //从 tableData中删除 app.regFreData.splice(params.index, 1); //将下拉树选中值删除 app.regFreTreeData.splice(params.index, 1); if(app.regFreData.length == 0) app.showFreTbl = false; }, "on-cancel": function() {} } }, [ h('a', { props: { size: 'small' }, style: { } }, '删除') ]) } }] }, mounted: function() { getProvincialData(); } }); //获取大区省市的数据 function getProvincialData() { al.ajax({ url: '/brd/aic/fl', contentType: 'application/json;chartset=UTF-8', data: {}, callback: function(result, data, msg) { var thisData = data; for(var i = 0; i < thisData.length; i++) { thisData[i].title = thisData[i].LABLE; if(thisData[i].hasOwnProperty("ITEMS")) { diguipData(thisData[i].ITEMS); thisData[i].children = thisData[i].ITEMS; } } app.regLea = thisData; app.showFreData = true; doEdit(); } }); } function diguipData(thisData) { for(var i = 0; i < thisData.length; i++) { thisData[i].title = thisData[i].LABLE; if(thisData[i].hasOwnProperty("ITEMS")) { diguipData(thisData[i].ITEMS); thisData[i].children = thisData[i].ITEMS; } } } //表格选中下拉树的值移除从树改变状态 function remoeTblSelTreeNode(obj, index, title) { event.stopPropagation(); //不添加这个不会重新渲染 app.regFreData[0].eidtId = parseInt(Math.random() * (10 - 1) + 1); //从表格移除 var thisTreeData = app.regFreData[Number(index)].treeData; //遍历树找到对应的节点修改选中状态 for(var i = 0; i < thisTreeData.length; i++) { if(thisTreeData[i].title == title) { // if(thisTreeData[i].hasOwnProperty("children")) { cancelNodeChildren(thisTreeData[i].children); } thisTreeData[i].checked = false; //break; } else if(thisTreeData[i].hasOwnProperty("children")) { remoeTblSelTreeNodeDg(thisTreeData[i].children, title); } } //修改 for(var i = 0; i < app.regFreTreeData[index].data.length; i++) { if(app.regFreTreeData[index].data[i].title == title) { app.regFreTreeData[index].data.splice(i, 1); break; } } } //递归取消树的选中状态 function remoeTblSelTreeNodeDg(data, title) { for(var i = 0; i < data.length; i++) { if(data[i].title == title) { if(data[i].hasOwnProperty("children")) { cancelNodeChildren(data[i].children); } data[i].checked = false; } else if(data[i].hasOwnProperty("children")) { remoeTblSelTreeNodeDg(data[i].children, title); } } } function cancelNodeChildren(data) { for(var i = 0; i < data.length; i++) { if(data[i].hasOwnProperty("children")) { cancelNodeChildren(data[i].children); } data[i].checked = false; } } function getData() { console.log(JSON.stringify(app.regFreData)) } validateAddForm(); //添加表单的验证 function validateAddForm() { $('#infoForm').bootstrapValidator({ live: 'enabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证 message: '此项不可用', feedbackIcons: { /* valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' */ }, fields: { /* 模板名称 */ nm: { message: '验证失败', validators: { notEmpty: { message: '请输入模板名称' }, } }, /* 默认运费 */ init_unit: { validators: { notEmpty: { message: '至少添加一种规格' } } }, /* 费用 */ init_fee: { validators: { notEmpty: { message: '至少添加一种规格' } } }, /* 每增加件 */ rate_unit: { validators: { notEmpty: { message: '至少添加一种规格' } } }, /* 费用 */ rate_fee: { validators: { notEmpty: { message: '至少添加一种规格' } } } }, submitHandler: function(validator, form, submitButton) { addHandler(); //这是提交的方法 } }); } function addHandler() { var handleJson = {}; var id = $("input[name='id']").val(); if(null != id && "" != id && undefined != id) { handleJson['id'] = id; } //获取模板名称 handleJson['nm'] = $.trim($("#name").val()); //计费方式 handleJson['mun_miss'] = $("#billingWay").find(".ant-radio-checked").find(".ant-radio-input").attr("data-type"); //默认运费设置 handleJson['init_unit'] = $("#dian_dian").val(); handleJson['init_fee'] = $("#dian_dian1").val(); //费用 handleJson['rate_unit'] = $("#dian_dian2").val(); //每增加 handleJson['rate_fee'] = $("#dian_dian3").val(); //费用 //添加表格的数据 //每一行选中的树的值 // app.regFreTreeData; //表格中的数据 //app.regFreData; //获取选中的运送到的地区的 title/code var thisFreTitle = [], thisFreCode = []; for(var i = 0; i < app.regFreTreeData.length; i++) { thisFreTitle[i] = app.regFreTreeData[i].data.map(function(val, index, arr) { return val.title; }); thisFreCode[i] = app.regFreTreeData[i].data.map(function(val, index, arr) { return val.CODE; }) }; var thisregFreData = app.regFreData; for(var i = 0; i < thisregFreData.length; i++) { app.regFreData[i]["citys_nm"] = thisFreTitle[i].join(","); thisregFreData[i]["citys_code"] = thisFreCode[i].join(","); //thisregFreData[i].treeDatas=JSON.stringify(app.regFreTreeData[i]); delete thisregFreData[i].treeData; } handleJson['tblData'] = JSON.stringify(thisregFreData); al.ajax({ url: '/brd/cc/save', //contentType: 'application/json;chartset=UTF-8', data: $.param(handleJson, true), callback: function(result, data, msg) { if(result) { window.location.href = "/brd/cc/inx"; } } }); } var thisEditTreeData = []; //编辑保存选中的树的节点 function doEdit() { //判断是新增还是修改 var thisTempid = $("#temId").val(); if(thisTempid != "") { al.ajax({ url: '/brd/cc/sfd', data: { id: thisTempid }, callback: function(result, data, msg) { for(var i = 0; i < data.length; i++) { thisEditTreeData = []; if( data[i].CITYS_CODE==null|| data[i].CITYS_CODE==""||data[i].CITYS_CODE.length==0){ continue; } var thisCityCode = data[i].CITYS_CODE.split(","); //设置下拉树的选中状态 var thistreeData = JSON.parse(JSON.stringify(app.regLea)); for(var j = 0; j < thistreeData.length; j++) { if(thisCityCode.indexOf(thistreeData[j].CODE) > -1) { thistreeData[j].checked = true; thisEditTreeData.push(thistreeData[j]); } else if(thistreeData[j].hasOwnProperty("children")) { diguiEdit(thistreeData[j].children, thisCityCode); } } //设置每一行的数据 app.regFreData.push({ "destination": "", "firstThings": data[i]["INIT_UNIT"], "firstFreight": data[i]["INIT_FEE"], "continueThings": data[i]["RATE_UNIT"], "continueFreight": data[i]["RATE_FEE"], "treeId": "freightTblTree_" + i, "treeData": thistreeData, "eidtId": "11" }); //设置每一行选中的树的节点 app.regFreTreeData.push({ "treeId": "freightTblTree_" + i, data: thisEditTreeData }); } //显示表格 app.showFreTbl = true; } }); } thisEditTreeData = []; } function diguiEdit(thistreeData, thisCityCode) { for(var i = 0; i < thistreeData.length; i++) { if(thisCityCode.indexOf(thistreeData[i].CODE) > -1) { thistreeData[i].checked = true; thisEditTreeData.push(thistreeData[i]); } else if(thistreeData[i].hasOwnProperty("children")) { diguiEdit(thistreeData[i].children, thisCityCode); } } }

正文

相关阅读

windowsu盘怎么修复系统，win10u盘怎么修复系统

公众号风险案例怎么写好，微信公众号典型案例分析

好玩的飞行游戏解说，飞行游戏推荐

电脑虚拟机怎样运行xp，运行虚拟机电脑蓝屏

游戏开发物语杰作创意，游戏开发物语手游攻略

开发数据计算的小程序，数据开发兼职平台

穿墙路由器什么牌子好，穿墙路由器哪一款好

100m香港服务器租用指南，香港服务器租用哪个好

目录[+]