注意:在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;
});