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); } } }
vue 模拟下拉树的更多相关文章
- vue+element下拉树选择器
项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...
- 开源框架.netCore DncZeus学习(五)下拉树的实现
千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...
- vue-Treeselect实现组织机构(员工)下拉树的功能
知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...
- elementUI下拉树组件封装
使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...
- zTree开发下拉树
最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
- [js开源组件开发]模拟下拉选项框select
模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
- div模拟下拉框
1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
随机推荐
- python项目入门之 安装、创建
3年前接触python,那时候还是文本格式进行学习,但是由于一直没有项目实践,所以就搁浅了 今天,python如火如荼,适用于人工智能等多领域,已经成为了语言界的翘楚 python有非常多的优点,开源 ...
- (转)利用 SVG 和 CSS3 实现有趣的边框动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- (转)C#串口SerialPort常用属性方法
SerialPort(): //属性 .BaudRate;获取或设置波特率 .BytesToRead;得到 接收到数据的字节数 .BytesToWrites;得到送往串口的字节数 .DataBits; ...
- ftp的安全问题
ftp漏洞http://www.4hou.com/technology/3507.html
- apt-get 使用指南
# apt-get update——在修改/etc/apt/sources.list或者/etc/apt/preferences之後运行该命令.此外您需要定期运行这一命令以确保您的软件包列表是最新的. ...
- [C基础修炼] [C课程设计]C语言课程设计之图书管理系统
#include <stdio.h> #include <stdlib.h> #include <string.h> FILE *fp;//定义文件指针fp,指向文 ...
- python 机器学习实践入门
机器学习概念概念 机器 学习是计算机科学的一个分支,从模式识别.人工智能和计算学习理论发展而来,我们可以将其作为数据挖掘的工具 侧重用于数据分析方法理解给定的数据 目的是:开发能够从先前观测的数据,通 ...
- iOS响应链原理
ios找到被点击的view的过程是从根view开始递归地调用hitTest方法,直到有一个子view的hitTest方法返回自身:如果所有一级子view的hitTest方法都返回nil,那么根view ...
- hadoop-1
结合其他文章 http://weixiaolu.iteye.com/blog/1504898 https://www.cnblogs.com/dycg/p/3934394.html https://b ...
- 向SqlParameter内动态添加参数
动态向SqlParameter 里添加相应参数,方法如下 先定义一个List,然后再往List里面添加SqlParameter对象,然后将List转为SqlParameter数组即可 List< ...