注意：在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="關閉" οnclick="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;
});