datatable动态表头+复合主键后台交互增删改

最新推荐文章于 2022-08-11 17:39:39 发布

玻璃渣渣瓶

最新推荐文章于 2022-08-11 17:39:39 发布

阅读量1.1k

点赞数

分类专栏： dataTable Java

本文链接：https://blog.youkuaiyun.com/qq_27815133/article/details/81045489

版权

Java 同时被 2 个专栏收录

6 篇文章

订阅专栏

dataTable

4 篇文章

订阅专栏

本来以为只需要做动态表头的查询，没想到还要做增删改...

因为是动态表头，而且是联合主键，到现在也没有什么头绪要怎么做...

想到哪里写到哪里吧，希望有大佬指导一下。

创建新增页面：

java：

@RequestMapping(value = "/toEditPage.do")
	public ModelAndView toEditMenuPage(HttpServletRequest request, HttpServletResponse response) throws Exception {

		
		ModelAndView mav = new ModelAndView();
		String parentMenuName = "";
		
		System.out.println("~~~~~~~~~~listcolu~~~~~~~~~~~"+JSON.toJSONString(listcolu));
		
		mav.addObject("parentMenuName", parentMenuName);
		mav.addObject("keyList", keyList);
		mav.addObject("listcolu", listcolu);
		mav.addObject("ztreeids", ztreeids);
		
		/*if(keyList != null && !"".equals(keyList)){
//			TCashboxCommandEntity cashBoxCEntity = stdataService.getStdListByEditDate(keyList);
//			mav.addObject("cashBoxCEntity", cashBoxCEntity);
		}*/
		
		mav.setViewName("stdata/createStdata");
		return mav;
	}

注：这里没有注明返回数据获取的详细

然后是构建jsp页面用的c标签

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
	
</head>

<body class="body-box">
   <form name="dataFrm">
        <table class="table table-bordered table-edit">
		<tbody id="editTbody">
			<input type="hidden" id="ztreeids" name="ztreeids"/>   
			<c:forEach items="${listcolu}" var="colu">
				<c:choose>
					<c:when test="${colu.(需要的bean的属性)}">
						<tr class="icList" id="${colu.(需要的bean的属性)}">
							<th>${colu.(需要的bean的属性)}</th>
							<td>
										<input type="text" id="${colu.(需要的bean的属性)}" name="${colu.view_iskey}" style="width:70%" placeholder="必填项" value="">
							</td>
						</tr>
					</c:when>
					<c:otherwise> 
						<tr class="icList" id="${colu.(需要的bean的属性)}">
								<th>${colu.(需要的bean的属性)}</th>
								<td>
									<input type="text" id="${colu.(需要的bean的属性)}" name="${colu.view_iskey}" style="width:70%" placeholder="" value="">
								</td>
						</tr>
					</c:otherwise>  
				</c:choose>
			</c:forEach>
		   </tbody>
	</table>
   </form>
                           
</body>
</html>

js获取提交数据：已经初步实现了新增数据提交使用了提交表单 js这里有改动更新...

	//新增按钮
	$("#addBtn").click(function(){
		var ztreeids = $("input:hidden[name='ztreeids']").val();
		if(!ztreeids){
			layer.msg('请选择数据类型！');
			return;
		};
		var index = layer.open({
			  type: 2,
			  title: false,
			  closeBtn: 0,
			  shadeClose: false,
			  maxmin: false,
			  area:['80%','80%'],
			  content: URL,
			}); 
		layer.full(index);
	});
	//保存
	$("#saveBtn").click(function(){
		var obj = document.getElementsByTagName("input");
	    for(var i=0;i<obj.length;i++){
	    	var vid = obj[i].id
	    	if(vid=="1"){
		    	var vname = obj[i].name;
		    	var v =  $('input[name='+vname+']').val();
		    	console.log(v);
		    	if(!v){
		    		layer.msg('必填项不能为空!');
					return false;
		    	}
	    	}
	    }
		var dataItem = $("form").serialize();
		var index = layer.load(1);
		$.ajax({ 
			type: 'POST',
			url: URL, 
			data:dataItem,
			success: function(resdata){
				//var jsonObj = $.parseJSON(resdata); 
				//var str = jsonObj.message;
 				layer.close(index);
				layer.alert(resdata.message,function(index){
	            	 var index = parent.layer.getFrameIndex(window.name); 
	     			 //window.parent.location.reload();
	     			 parent.init();
	     			 parent.layer.close(index);
	             });
              },
				error:function(){
					layer.close(index);
					layer.alert('数据提交失败!',{icon: 5});
				} 
		});
	});
	
	//关闭按钮
	$("#closeBtn").click(function(){
		var index = parent.layer.getFrameIndex(window.name); 
		parent.layer.close(index);
	});

后台接收数据java：

public void toEdit(HttpServletRequest request, HttpServletResponse response) throws Exception {
		String[] column = request.getParameterValues("column");
		Map<String,String> stdMap = new HashMap<String,String>();
		for(int i=0;i<column.length;i++) {
			String columnN = column[i];
			String columnV = request.getParameter(columnN);
			stdMap.put(columnN, columnV);
		}
		
		Map<String,String> resMap = new HashMap<String,String>();
		resMap.put("status", "提示");
		resMap.put("message", "操作成功!");
		
		String jsonString = JSON.toJSONString(resMap); 
		response.setCharacterEncoding("utf-8");
		response.getOutputStream().write(jsonString.getBytes("utf-8"));
	}

程序目前就写到这里，后续有进展再更，希望有大佬指导一下，希望有过类似项目经验的大佬指导，也欢迎类似需求的同道?道友？共同交流进步

新增功能因为是复合主键的原因，需要进行数据校验，我是用主键Map 进行查询校验的，详细的不放了只放一个mapper吧，需要详细的，私信我，或者时间充足再更

    <!-- 新增、修改功能主键查询校验 -->
    <select id="getCount" parameterType="java.util.Map" resultType="Integer">  
		select count(*) count from ${keyMap.tblName} t 
		<where>
 	          <foreach item="key"  collection="keyMap.keycoluMap.keys" separator="and">
			       ${key} =  '${keyMap.keycoluMap[key]}'
			  </foreach>
 	   </where>
    </select>

修改跟新增差不太多，只是需要用主键Map查一遍数据库，然后把数据返回给页面，然后跟新增就差不多了，过...

修改的校验跟新增差不多但是要麻烦一点，感觉我写的很臃肿。。。

希望大佬能指导一下复合主键的修改校验。。。

删除就更简单了对也是不想写了过...

很良心的贴上前台代码...

	//获取选中行数据
	$('#dataTable tbody').on( 'click', 'tr', function () {
		var check = $(this).find("input[type='checkbox']");
		$(this).toggleClass('selected');
        if ($(this).hasClass('selected')) {
            //$(this).removeClass('selected');
        	$(check).prop('checked', true);
        }else {
        	//dataTable.$('tr.selected').removeClass('selected');
            //$(this).addClass('selected');
            $(check).prop('checked', false);
        }
    });
 
    //修改按钮
	$("#editBtn").click(function(){
		var ztreeids = $("input:hidden[name='ztreeids']").val();
		var i = dataTable.rows('.selected').data().length
        //alert(i);
        if(i!=1){
			layer.msg('请选择一行数据！');
			return;
        }
		var param = {};
		param = dataTable.row('.selected').data();
		var sJson = JSON.stringify(param).replace(/\"/g,"'");

		var index = layer.open({
			  type: 2,
			  title: 0,
			  closeBtn: 0,
			  shadeClose: false,
			  maxmin: false,
			  area:['80%','80%'],
			  content: url,
			}); 
			layer.full(index);
	});
    
})

 	//删除按钮
	$("#delBtn").click(function(){
		var ztreeids = $("input:hidden[name='ztreeids']").val();
		var i = dataTable.rows('.selected').data().length;
		var param = {};
		var par = {};
		var dataArr = [];
		$(".selected").each(function(){
			par = dataTable.row(this).data();
			var sJson = JSON.stringify(par).replace(/\"/g,"'");
			dataArr.push(sJson);
		})
		param["dataArr"] = dataArr;
		
        //alert(i);
        //if(i!=1){
        if(i==0){
			layer.msg('请选择一行数据！');
			return;
        }else{
        	layer.confirm('你确定要删除所选记录吗？',{

				icon: 3
			},function(index){
				//确认
				layer.close(index);
				//param = dataTable.row('.selected').data();
				param["ztreeids"] = ztreeids;
				$.ajax({
					type: 'post' ,
		                        url:url,
					cache: false ,
					traditional :true,
					data: param,
					dataType:'json' ,
					success:function(){
						layer.close(index);
						layer.msg('记录删除成功！');
						dataTable.draw();
					},
					error:function(){
						layer.close(index);
						layer.alert('数据提交失败!',{icon: 5});
					}
				});
			}, function(index){
					//取消
					return;
			});