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

本文主要是介绍iview 穿梭框形式实现选择设置的业务，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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();//诉状分类Idvar 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>

这篇关于iview 穿梭框形式实现选择设置的业务的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！