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

最新推荐文章于 2024-03-20 15:21:38 发布

kenhins

最新推荐文章于 2024-03-20 15:21:38 发布

阅读量3.7k

点赞数 1

分类专栏： Javascript VUE jQuery

本文链接：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>