iview 穿梭框形式实现 选择设置的业务

最新推荐文章于 2024-03-20 15:21:38 发布
最新推荐文章于 2024-03-20 15:21:38 发布
阅读量3.7k 收藏 1
点赞数 1
分类专栏： Javascript VUE jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kenhins/article/details/84985441
版权
Javascript 同时被 3 个专栏收录
62 篇文章 1 订阅
订阅专栏
jQuery
40 篇文章 0 订阅
订阅专栏
VUE
6 篇文章 0 订阅
订阅专栏

iview 穿梭框形式实现 选择设置的业务

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>设置所需打印材料</title>
	<meta name="decorator" content="default" />
	<script src="${ctxStatic}/plugins/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="${ctxStatic}/plugins/iview/dist/styles/iview.css">
	<script src="${ctxStatic}/plugins/iview/dist/iview.min.js"></script>

</head>
<body>
<div class="main-content">
	<div class="breadcrumbs" id="breadcrumbs">
		<script type="text/javascript">
			try{ace.settings.check('breadcrumbs', 'fixed')}catch(e){}
		</script>

		<ul class="breadcrumb">
			<li>
				<i class="icon-home home-icon"></i>
				<a href="#">首页</a>
			</li>

			<li class="active">
				<a href="#">诉状模板</a>
			</li>
			<li class="active">设置所需打印材料</li>
		</ul><!-- .breadcrumb -->

		<div class="nav-search" id="nav-search">
			<form class="form-search">
				<span class="input-icon">
					<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
					<i class="icon-search nav-search-icon"></i>
				</span>
			</form>
		</div><!-- #nav-search -->
	</div>

	<div class="page-content">
		<div class="page-header">
			<h1>
				设置所需打印材料
				<small>
					<i class="icon-double-angle-right"></i>
				</small>
				${entity.name}
			</h1>
		</div><!--page-header-->

		<div id="app" class="row">
			<div class="col-xs-12">

				<form id="dataForm" class="form-horizontal">
					<input type="hidden" id="indictmentTypeId" name="indictmentTypeId" value="${entity.id}"/>

					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right" for="writeDoc">  </label>
						<div class="col-sm-8">
							<div class="panel panel-info">
							  <div class="panel-heading">
								  <span>材料列表：</span>
								  <div class="pull-right">
								  </div>
							  </div>
							  <div class="panel-body">
								   <div class="col-sm-10">
								    <transfer
								        :data="data2"
								        :target-keys="targetKeys2"
								        :list-style="listStyle"
								        :titles="titles"
								        :operations="['移除','添加']"
								        filterable
								        :filter-method="filterMethod"
								        @on-change="handleChange2"></transfer>
								   </div>
							  </div>
							</div>
						</div>
					</div>
					 
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"></label>
						<div class="col-sm-9">
							<a id="save-btn" class="btn btn-info">保存</a>
							<a class="btn btn-default" onclick="javascript :history.go(-1);">取消</a>
						</div>
					</div>

				</form>


				<!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</div><!-- /.page-content -->
</div><!-- /.main-content -->


<script type="text/javascript">

var Main = {
    data: function data() {
        return {
            data2: this.getMockData(),
            targetKeys2: [],
            titles:['材料列表','所需打印材料'],
            listStyle: {
                width: '250px',
                height: '500px'
            }
        };
    },

    methods: {
        getMockData: function() {
            var mockData = [];
        	$.ajax({
        		type: "GET",
        		url: '${ctx}/materials/materialsList?page=1&rows=1000&firstCategoryId=&secondCategoryId=&title=',
        		data: {},
        		dataType: "json",
        		success: function(jsonData) {
        			if("SUCCESS" == jsonData.result){
        				var mo = jsonData.data;
        	            for (var i = 0; i < mo.length; i++) {
        	                mockData.push({
        	                    key: mo[i].id,
        	                    label: mo[i].subTitle,
        	                    canWrite: mo[i].canWrite,
        	                    formType: mo[i].formType,
        	                    disabled: false
        	                });
        	            }
        			}else{
        				alert("数据加载失败！");
        			}
        		}
        	});

            return mockData;
        },
        getTargetKeys: function() {

        },
        handleChange2: function(newTargetKeys) {//移除、添加
            this.targetKeys2 = newTargetKeys;
        },
        filterMethod: function(data, query) {//搜索
            return data.label.indexOf(query) > -1;
        }
    }
};

var Component = Vue.extend(Main);
var vm = new Component().$mount('#app');

$(function(){
	loadTargetList();
	//保存需打印材料
	$("#save-btn").click(function(){
		var indictmentTypeId = $("#indictmentTypeId").val();//诉状分类Id
		var midArr = vm.targetKeys2;
		$.post('${ctx}/selfservice/indictmentMaterial/saveMaterials',{'indictmentTypeId':indictmentTypeId,'midArr':midArr}, function(data) {
			if('SUCCESS' == data.flag){
				window.location.href="${ctx}/writeForm/bg/indictmentType/list";
			}else{
				alert("操作失败!");
			}
		});
	});
});

//加载需要打印材料列表
function loadTargetList(){
	var indictmentTypeId = $("#indictmentTypeId").val();//诉状分类Id
	$.ajax({
		type: "GET",
		url: '${ctx}/selfservice/indictmentMaterial/getMaterialsList',
		data: {"indictmentTypeId":indictmentTypeId},
		dataType: "json",
		success: function(jsonData) {
			if("SUCCESS" == jsonData.result){
				//console.log(jsonData.data);
				if(jsonData.data){
					var mo = jsonData.data;
					for(var i=0;i<mo.length;i++){
						vm.targetKeys2.push(mo[i].materialsId);
					}
				}
			}else{
				alert("数据加载失败！");
			}
		}
	});
}



	
</script>
</body>
</html>

 

kenhins
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
树形穿梭框
10-08
多种树形穿梭框集合 满足你对于所有树形穿梭框的需求 vue方式启动即可
基于element-ui 使用树形穿梭框组件
锋声的博客
09-21 1892
先 npm 下载插件 npm install el-tree-transfer --save 或 npm i el-tree-transfer -S <template> <div> // 你的代码 ... // 使用树形穿梭框组件 <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @ad
vue+elementUI实现树形穿梭框
最新发布
大兵的猫
03-20 1062
思路二：利用elementUI的filter API对选中节点进行筛选，左侧筛选出未选中的，右侧筛选出选中的，用的还是同一棵树，用一个属性来区分是否选择，好处是子节点选中，父节点会跟随保存，不用重新构建树结构。将左侧选中的节点移动到右侧，还要保持树结构，意味着移动子节点，需要把该子节点对应的父节点甚至父节点的父节点一并移到右侧形成一个新的树结构，树结构的层级和原来的树保持一致，只是右侧展示的子节点为选中的子节点，filter API用法。
基于iview-封装定制化的穿梭框组件
a5252145的博客
05-28 1569
基于iview-封装定制化的穿梭框组件 PM那边需求如下： ** 效果图如下：** 代码如下： <template> <!-- 穿梭组件 --> <div class="transferTpl"> <div class="left"> <div class="title"> <span>{{ leftTitle }}</span>
vue 实现树状穿梭框
qq_43806488的博客
07-27 2704
vue实现树状穿梭框。
Iview中的左右穿梭框
AIfurture的博客
07-22 1293
iview后台框架
03-13
自己写的一个iview前台框架，有需要的拿去改改就能用了
vue+iview地址选择器
08-07
vue全国地址选择器（带省市区json数据），支持华东华北等大区选择，下载直接就可以放在项目使用，记得好评。
iview中Select 选择器多选校验方法
08-27
下面小编就为大家分享一篇iview中Select 选择器多选校验方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iView框架问题整理小结
10-17
主要介绍了iView框架问题整理小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+iview框架实现左侧动态菜单功能的示例代码
10-15
主要介绍了vue+iview框架实现左侧动态菜单功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
基于layui实现树形穿梭框
03-18
基于layui封装的多选树形穿梭框，双列表互选框
ztree带层级穿梭框
06-29
ztree带层级穿梭框，可以左右移动，可以去除重复的数据
iview 之 穿梭框 transfer
weixin_30363981的博客
03-28 1275
概述 双栏穿梭选择框，常用于将多个项目从一边移动到另一边。 说明 Transfer 组件主要基于以下四个 API 来使用： :data：总体数据，数组，每项为一个对象，且必须含有key值，组件基于此做索引。 :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。 （注意是 ...
用于后台管理基于iview，vue的穿梭框
weixin_30613727的博客
01-29 267
引入文件： <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"><script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>...
ivew 穿梭框Transfer组件高亮显示操作值
互联网编程爱好者
09-16 378
项目场景： Transfer（穿梭框），双栏穿梭选择框，常用于将多个项目从一边移动到另一边。这个组件在多个数据之间选择时非常方便。所有的控制都由组件完成，只需要最后保存组件目标值即可。 问题描述： 由于所有方式都由组件完成，因此会出现一种情况，当操作元素左右穿梭时，这些穿梭值与原数据样式一样，数据过多时，无法区分。而且组件没有任何一种方法直接可以特殊高亮显示。如下图所示（数据虽打马赛克，但可清晰看到数据颜色是相同的）： 原因分析： 我在百度上找了好久都没有找到解决方案，最后查看官网说明和源码研究，
从读取数据还原iview穿梭框组件信息（ js中indexOf错误匹配）
weixin_40366684的博客
10-15 361
从读取数据还原iview穿梭框组件信息（ js中indexOf错误匹配） 在完成前端页面的过程中遇到了一个问题，使用了iview的穿梭框控件： Transfer 组件主要基于以下四个 API 来使用： :data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。 :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。 :render-format：每行数据显示的格式函数，默认优先显示 label 值
vue+iview 自定义实现穿梭框
zoupeng199的博客
07-17 2883
vue+iview 自定义实现穿梭框 因业务需求iview穿梭框不满足业务需求自己写了个穿梭框。因本人是后端，请各位大佬看到了也可帮忙优化下。只实现了基本功能 表格及模态框代码 <Fotem label="选择缴费学员" v-if="applyModelForm.licenseType == null || applyModelForm.planId != null"> <div class="searchs" v-if="this.buttonNumber==1||this.butt
带你走进iView的穿梭框
湮顾千古的博客
06-03 1853
是的
iview穿梭框怎么写
03-25
iview的穿梭框可以使用 Transfer 组件实现，具体代码如下： <template> <Transfer :data="data" :target-keys="targetKeys" :render-format="renderFormat" @on-change="handleChange" /> </template> <script> import { Transfer } from 'iview' export default { data () { return { data: [ { key: '1', title: '选项1', description: '选项1的描述信息' }, { key: '2', title: '选项2', description: '选项2的描述信息' }, { key: '3', title: '选项3', description: '选项3的描述信息' } ], targetKeys: [], renderFormat: ({ title, description }) => `${title} - ${description}` } }, components: { Transfer }, methods: { handleChange (targetKeys) { this.targetKeys = targetKeys } } } </script>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值