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解决方式: < ...
随机推荐
- Linux常用操作分享
Java开发经常遇到的linux相关操作 1.常用的上传下载(Xshell5) 1).get 从远程服务器上下载一个文件存放到本地,如下: 先通过lcd切换到本地那个目录下,然后通过get file ...
- 【Selenium-WebDriver自学】Selenium网格化（十六）
参考链接: http://www.yiibai.com/selenium/selenium_grids.html 命令: cd E:\Yingpu\000.SVNYP\01.个人文件夹\Renqian ...
- BLOB TO CLOB
CREATE OR REPLACE FUNCTION blob_to_clob (blob_in IN BLOB) RETURN CLOB AS v_clob CLOB; v_varchar VARC ...
- Mac技巧之苹果电脑Mac OS X系统自带的鼠标所在点颜色RGB值查看工具：数码测色计
转自http://www.mac52ipod.cn/post/show-mouse-point-rgb-color-by-apple-mac-os-x-tool.php
- python学习笔记_week15
note 上节作业问题: 1.css重用 <style> 如果整个页面的宽度 > 900px时: { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </styl ...
- Maven子模块
1.选取父工程创建子模块(Maven Modeule) 2.创建子模块时 Packaging 选 jar
- Mybatis学习4——多对一
一个用户对多个订单 在用户中添加属性List<user> User.java package pojo; import java.util.Date; import java.util.L ...
- redis导数到mysql
filename=$(date "+%Y%m%d%H%M%S") //将type为list,键为bi0205导出文本,并保存到mysql导入导出目录redis-cli -h 服务器 ...
- 10. js截取最后一个斜杠后面的字符串
var startIndex = filePath.lastIndexOf("\\"); endIndex = filePath.lastIndexOf("." ...
- MBR （主引导记录）
概念 主引导记录(MBR,Main Boot Record)是位于磁盘最前边的一段引导(Loader)代码.它负责磁盘操作系统(DOS)对磁盘进行读写时分区合法性的判别.分区引导信息的定位,它由磁盘操 ...