Hibernate-easyUI中前台页面的增删改查

最新推荐文章于 2020-09-06 20:43:55 发布

cxc_happy111

最新推荐文章于 2020-09-06 20:43:55 发布

阅读量198

点赞数

分类专栏： easyUI Hibernate

本文链接：https://blog.csdn.net/cxc_happy111/article/details/81412140

版权

easyUI 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Hibernate

6 篇文章 0 订阅

订阅专栏

注意：在jsp文件中的文本框中可以不用写value的值，在js文件中跟后台连接的路径，写哪个方法用他时在调用那个路径

1.首先就是写一个jsp文件，跟HTML差不多，基本上是一样的

2.写一个js文件，在jsp文件中引用js文件

3.写一个jsp文件，跟HTML差不多，文本框中基本上都有的id和name

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/static/commonJsp/commonCssAndTaglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script data-main="${ctx}/js/common" src="${ctx}/js/lib/require.js"
	load-module="module/teachers/teachers"></script>
</head>
<body>
	<table id="teachersGrid"></table>
	<div id="toolbar">
		<form id="searchForm">
			<label><input id="dept" name="deptId"  type="text" ></label>
			<label><input id="input" name="name"  type="text" placeholder="请输入专业名称"></label>
			<label><input id="searchBtn" type="button" value="查询"></label>
		</form>
	</div>
	<div id="footer">
		<a href="javascript:" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a> 
		<a href="javascript:" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a> 
		<a href="javascript:" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
	</div>

	<div id="dialog" class="easyui-dialog" style="width: 600px; display: none;" top="30" title="系别编辑" closed="true">
		<form id="form">
			<input type="hidden" name="id" />
			<table class="oper_table">
				<tr>
					<td class="td_marked">系别：</td>
					<td class="td_content">
						<input id="seldept" name="deptId" style="width: 150px"></td>
					<td class="td_marked">学位：</td>
					<td class="td_content">
						<input id="seldegree" name="degree" style="width: 150px" /></td>
				</tr>
				<tr>
					<td class="td_marked">专业：</td>
					<td class="td_content">
						<input id="selmajor" name="majorId" style="width: 150px"></td>
					<td class="td_marked">学历：</td>
					<td class="td_content">
						<input id="seledu" name="eduBack" style="width: 150px" /></td>
				</tr>
				<tr>
					<td class="td_marked">手机号码：</td>
					<td class="td_content">
						<input type="text" id="phone" name="phone" class="easyui-validatebox" /></td>
					<td class="td_marked">职务：</td>
					<td class="td_content">
						<input id="selpost" name="post" style="width: 150px" /></td>
				</tr>
				<tr>
					<td class="td_marked">教师编号：</td>
					<td class="td_content">
						<input type="text" id="code" name="code" class="easyui-validatebox" /></td>
						<td class="td_marked">职称：</td>
					<td class="td_content">
						<input id="seltitle" name="title" style="width: 150px" /></td>
					
				</tr>
				<tr>
					<td class="td_marked">教师姓名：</td>
					<td class="td_content">
						<input type="text" id="teaname" name="name" class="easyui-validatebox" /></td>
					<td class="td_marked">类别：</td>
					<td class="td_content">
						<input id="seltype" name="type" style="width: 150px" /></td>
				</tr>
				<tr>
					<td class="td_marked">上传图片：</td>
					<td class="td_content">
						<input type="file" id="fielinput" hidden="hidden"> 
						<img id="txshow" style="width: 100px; height: 100px;" alt="请点击选择图片" /> 
						<textarea rows="3" id="base" style="width: 100%;" name="photoStr" hidden="hidden"></textarea>
					</td>
					<td class="td_marked">描述：</td>
					<td class="td_content">
						<textarea rows="3" style="width: 100%; height: 140px;" name="remark"></textarea></td>
				</tr>
				<tr>
					<td class="td_content" colspan="4" align="center">
					<input id="saveBtn" type="button" value="提交"> 
					<input type="button" value="关闭" onclick="javascript:$('#dialog').dialog('close');"></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

4.在js文件

 define([ 'config', 'easyui' ], function(config) {

	var moudel = config.baseModel || {};
	moudel.name = "教师管理";

//这是跟后台相连接的路径，list，dept都是后台@requestMapping中的值
	var url = {
//list是查询所有的连接
		list : serverBasePath + "/teachers/list",
		
		save : serverBasePath + "/teachers/save",
		
		deleted : function(id) {
			return serverBasePath + "/teachers/delete/" + id;
		},
		
	}

//这是页面上显示的字段名，这个字段名是可以加可以减的
	function initGrid() {
		$("#teachersGrid").datagrid({
			url : url.list,//这个连接一定要对
			method : 'get',//请求方式也要对应
			rownumbers : true,
			fitColumns : true,
			fit : true,
			nowrap : false,
			singleSelect : true,
			border : false,
			cahce : false,
			pagination : true,
			pageSize : 20,//默认一页显示多少页
			columns : [ [ {
				field : "deptName",
				title : "系别",
				width : 50
			}, {
				field : "majorName",
				title : "专业",
				width : 50
			}, {
				field : "name",
				title : "教师姓名",
				width : 50
			}, {
				field : "phone",
				title : "手机号码",
				width : 50
			}, {
				field : "code",
				title : "教师码",
				width : 50
			}, {
				field : "degreeStr",
				title : "学位",
				width : 50
			}, {
				field : "eduBackStr",
				title : "学历",
				width : 50
			}, {
				field : "postStr",
				title : "职务",
				width : 50
			}, {
				field : "typeStr",
				title : "类别",
				width : 50
			}, {
				field : "title",
				title : "职称",
				width : 50
			} ] ],
			footer : '#footer',
			toolbar : "#toolbar"
		});
	}

//这是增加，修改，删除的方法
	function bindLisenter() {
		$("#footer a").unbind().click(function() {
			var btn = $(this).attr("iconCls");
			switch (btn) {
			case "icon-add":
				add();
				break;
			case "icon-edit":
				edit();
				break;
			case "icon-remove":
				deleted();
				break;
			}
		});

		/**
		 * 保存教师
         *在保存教师的时候回对表单中填写的数据进行判断，是否为空或者数据不合法
		 */
		$("#saveBtn").unbind().click(function() {
			var dept = $("#seldept").val();
			var major = $("#selmajor").val();
			var phone = $("#phone").val();
			var code = $("#code").val();
			var teaname = $("#teaname").val();
			var title = $("#title").val();
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            var number = /^[A-Za-z0-9]+$/;
            var photoStr = $("#base").val();
			if (dept == "请选择系别") {
				config.alert("系统消息", "请选择系别");
			} else if (major == "-请选择专业-" || major == "") {
				config.alert("系统消息", "请选择专业");
			} else if (phone == null || phone == "") {
				config.alert("系统消息", "手机号不能为空");
			} else if (!myreg.test(phone)) {
				config.alert("系统消息", "请输入正确的手机号码");
				$("#phone").val("");
			} else if (code == null || code == "") {
				config.alert("系统消息", "教师编号不能为空");
			}else if (!number.test(code)) {
				config.alert("系统消息", "教师编号只允许为数字或字母");
				$("#code").val("");
			} else if (teaname == null || teaname == "") {
				config.alert("系统消息", "教师姓名不能为空");
			} else if (teaname.length < 2) {
				config.alert("系统消息", "教师姓名不能小于2");
				$("#teaname").val("");
			}else if (photoStr == null || photoStr == "") {
				config.alert("系统消息", "教师的图片不能为空");
			}else {
				$.post(url.save, $('#form').serialize(), function(result) {
					var flag = config.executeResult(result);
					if (flag) {
						$('#dialog').dialog('close');
						$("#teachersGrid").datagrid("reload");
					}
				}, "json");
			}

		});
	
	/**
	 * 新增教师
	 */
	function add() {
		$("#form").form("clear");
		$('#seldept').combobox({
			value : "请选择系别"
		});
		$('#selmajor').combobox({
			value : "请选择专业"
		});
		$("#txshow").attr("src", "");
		$('#dialog').dialog('open');
		
		$('#code').attr('readonly',false);
		$('#code').tooltip({
		    position: 'right',
		    content: '<span style="color:#fff">提交后，编号不可再修改</span>',
		    onShow: function(){
				$(this).tooltip('tip').css({
					backgroundColor: '#666',
					borderColor: '#666'
				});
		    }
		});

	}

	/**
	 * 修改教师
	 */
	function edit() {
		var row = $("#teachersGrid").datagrid("getSelected");
		if (row) {
			$('#dialog').dialog('open');
			$("#form").form("load", row);
			$('#code').attr('readonly',true);
			$("#txshow").attr("src", row.photoStr);
			$('#code').tooltip({
			    position: 'right',
			    content: '<span style="color:#fff">教师编号不可修改</span>',
			    onShow: function(){
					$(this).tooltip('tip').css({
						backgroundColor: '#666',
						borderColor: '#666'
					});
			    }
			});
		} else {
			config.alert("系统消息", "请选择一条记录");
		}
	}

	/**
	 * 删除教师
	 */
	function deleted() {
		var row = $("#teachersGrid").datagrid("getSelected");
		if (row) {
			var flag = config.confirm("系统消息", "是否要删除记录,此操作不可恢复!");
			if (flag) {
				$.post(url.deleted(row.id), function(result) {
					var flag = config.executeResult(result);
					if (flag) {
						$("#teachersGrid").datagrid("reload");
					}
				}, "json");
			}
		} else {
			config.alert("系统消息", "请选择一条记录");
		}
	}

//这是这些方法的执行
	moudel.init = function() {
		initGrid();
		bindLisenter();
		loadDeptData();
		select();
		base();
	}

	return moudel;
});

cxc_happy111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hibernate-easyUI中前台页面的增删改查

注意：在jsp文件中的文本框中可以不用写value的值，在js文件中跟后台连接的路径，写哪个方法用他时在调用那个路径1.首先就是写一个jsp文件，跟HTML差不多，基本上是一样的2.写一个js文件，在jsp文件中引用js文件3.写一个jsp文件，跟HTML差不多，文本框中基本上都有的id和name&lt;%@ page language="java" contentType="t...
复制链接

扫一扫