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解决方式: < ...
随机推荐
- JVM总结-invokedynamic
前不久,“虚拟机”赛马俱乐部来了个年轻人,标榜自己是动态语言,是先进分子. 这一天,先进分子牵着一头鹿进来,说要参加赛马.咱部里的老学究 Java 就不同意了呀,鹿又不是马,哪能参加赛马. 当然了,这 ...
- QT编写TCP的问题
---->>>TCP编写实战的小项目 TCP套接字:主机(IP+端口) 和 服务器(IP+端口) 进行通讯,需要中间的一个锁套进行 啮合,这个锁套就是套接字的作用. 其中套接字的使 ...
- thinkphp在linux下报mkdir()错误
这个主要是由于缓存文件的权限不够,一般我们git下来的文件时,这个runtime是没有下来的. 解决办法:进入到TP项目下:修改父级目录权限为0777即可linux: chmod -R 777 ./r ...
- Docker的概述
什么是Docker 1.容器技术 在计算机的世界中,容器拥有一段漫长且传奇的历史.容器与管理程序虚拟化(hypervisor virtualization,HV)有所不同,管理程序虚拟化通过中间层将一 ...
- [Android] android.util.Log
android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, W ...
- 48.纯 CSS 创作一盘传统蚊香
原文地址:https://segmentfault.com/a/1190000015246974 感想: 都是半圆边框合成的. HTML code: <div class="coil& ...
- python学习笔记_week22
note 知识点概要 - Session - CSRF - Model操作 - Form验证(ModelForm) - 中间件 - 缓存 - 信号 内容详细: 1. Session 基于Cookie做 ...
- Linq的常见查询
首先定义几个模型类: /// <summary> /// 员工类 /// </summary> public class Employee { /// <summary& ...
- Mybatis八（ mybatis工作原理分析）
MyBatis的主要成员 Configuration MyBatis所有的配置信息都保存在Configuration对象之中,配置文件中的大部分配置都会存储到该类中 SqlSession ...
- Angular.js实现分页
一.编写angularJS实现的分页js(网上搜)和样式表(pagination),并在页面引入 二.编写变量和方法 //分页控件控制 $scope.paginationConf={ currentP ...