您的位置: 首页  >  文章  >  模态框中嵌入左右双边栏选择框，并通过AJAX传json类型值

模态框中嵌入左右双边栏选择框，并通过AJAX传json类型值

分类: 文章 • 2023-12-05 22:31:22

在模态框中通过左右双边栏选择框自定义操作数据并传值到后台Action


目的：通过按钮实现弹出框，在弹出框中做数据自定义更改并传值到后台。
解决方案：弹出框采用模态框（Modal）插件，弹出框中数据自定义更改使用了左右双边栏选择框，数据传入后台使用Ajax。（使用的是SSH框架）
代码：
前端页面：

<div style="width:730px; margin: 0px auto">  
	<!--正文-->
	<div class="dsSelect" id="dsSelectTemp" style="margin: 10px auto; margin-left:15px;text-align:center">
	</div>
	<button **id="chongxinjisuanId"**onClick="PrpResolveAgain(taskId)">PRP重新计算</button>
		<script type="text/javascript">
   				let dsSelectObj = new dsSelect("dsSelectTemp");
 			   dsSelectObj.multiSelect =true;
			   dsSelectObj.init();
			   let datas = [
						 {id:"1",pointName:"SBM1",enabled:true},
					     {id:"2",pointName:"SBM2",enabled:true},
						 {id:"3",pointName:"SBM3",enabled:true},
					     {id:"4",pointName:"SBM4",enabled:true},
				         {id:"5",pointName:"SBM5",enabled:true},
										    ];
				 let datasR=[
						  {id:"16",pointName:"SBM16",enabled:true},
							];
				dsSelectObj.setLeftData(datas,"pointName");
				dsSelectObj.setRightData(datasR,"pointName");
		</script>
</div>

模态框中嵌入左右双边栏选择框，并通过AJAX传json类型值
Ajax:


function PrpResolveAgain(taskId){
	//取如图右侧框内数据
	var sbmList=JSON.stringify(dsSelectObj.getSelectRightValus())
	alert(sbmList);
		jQuery.ajax({
			url : "./prpResolveAgain.do", 
			data : "taskId="+taskId+"&sbmList="+sbmList,
			type : "post",
			cache : false,
			dataType : "json",
			success : function(msg) {
				if(msg.message=='ok'){
					alert("接收成功！")
				}
			}
		});
}

其中有一个现实的需求是，我在点击按钮时想要把一个参数TaskId传入到弹出框内部去，需要传值，这边使用的方法是在触发按钮下面函数中加入
$(’#chongxinjisuanId’)[0].taskId=taskId;
$(’#myModal-compare’).modal(‘show’);即可传入想要的值。

后台Action：
我从前台传了两个值一个是taskId（就是前面说的想要穿的值），另一个是最上面那个图右侧框内的数据，数据是封装成json字符串通过ajax传到后台，具体接收如下

public void prpResolveAgain() {
	    System.out.println(this.taskId);//经验证taskId值传进来了
	    //将json字符串转为json数组
		JSONArray listArray=JSONArray.fromObject(this.sbmList);
		将json数组转为list<MsResultPhotoPoint>对象，方面对象操作
		List<MsResultPhotoPoint> listsFromJSP = JSONArray.toList(listArray, MsResultPhotoPoint.class);
		System.out.println("listArray1=="+listsFromJSP.get(0).getPointName());//经验证可以得到对象，并且对象的值就是前端传回的值
	}

不过需要注意的是前端jsp传值的时候json内的字段属性要和数据库保持一致。
模态框中嵌入左右双边栏选择框，并通过AJAX传json类型值
总结其中涉及的重点

  1. 向弹出框内部传值
  2. 弹出框内添加可移除左右框
  3. 通过ajax传json字符串值
    注：其中左右双边栏选择框基本代码参考http://www.jq22.com/jquery-info20012

相关推荐