87,993
社区成员
发帖
与我相关
我的任务
分享
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生信息</title>
<link rel="stylesheet" type="text/css"
href="<%=contextPath%>/framework/EasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=contextPath%>/framework/EasyUI/themes/icon.css">
<script type="text/javascript"
src="<%=contextPath%>/framework/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"
src="<%=contextPath%>/framework/EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=contextPath%>/framework/EasyUI/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
a {outline:none;}
</style>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="height:35px;overflow:hidden;border-color:#dddddd;border-width:1px 1px 1px 1px;">
<div id="stuDg1" style="padding-top: 5px;padding-bottom: 5px;outline:none" >
按学生姓名查询: <input type="text" id="searchStu" placeholder="请输入要搜索的学生名" />
<a href="javascript:void(0)" onclick="searchStudent()"
class="easyui-linkbutton btn" iconCls="icon-search">查询</a>
<a href="javascript:void(0)" class="easyui-linkbutton btn" iconCls="icon-reload"
onclick="clearStu()">重置</a>
</div>
</div>
<div data-options="region:'center'">
<div id="stuDg" style="width:100%;height:100%;" >
</div>
</div>
</div>
<div id="stuDlg" >
<form id="stuForm" method="post">
<div style="margin-bottom: 10px;margin-right: 10px;margin-top: 10px">
学生编号:<input name="stuId" class="easyui-textbox" required="true" style="width: 300px">
</div>
<div style="margin-bottom: 10px;margin-right: 10px">
学生姓名:<input name="stuName" class="easyui-textbox" required="true" style="width: 300px">
</div>
<div style="margin-bottom: 10px;margin-right: 10px">
学生性别:<input name="stuSex" class="easyui-textbox" required="true" style="width: 300px">
</div>
<div style="margin-bottom: 10px;margin-right: 10px">
学生年龄:<input name="stuAge" class="easyui-textbox" required="true" style="width: 300px">
</div>
<div style="margin-bottom: 10px;margin-right: 10px">
备 注:<input name="stuRemark" class="easyui-textbox" required="true" style="width: 300px">
</div>
</form>
</div>
<script type="text/javascript">
function searchStudent(){
var search = document.getElementById("searchStu").value;
$.ajax({
url : ctx + '/demo/searchStu.action?searchName=' + search,
type:'post',
cache:false,
dataType:'text',
success : function(data) {
var data = eval('(' + data + ')'); // change the JSON string to javascript object
$('#stuDg').datagrid('loadData',data.rows);
}
});
}
function clearStu(){
document.getElementById("searchStu").value="";
}
var ctx = '<%=contextPath%>';
$(function(){
//初始化dialog
$('#stuDlg').dialog({
width : 400,
height : 250,
closed : true, //是否关闭
modal : true,
buttons:[{
text :'提交',
iconCls : 'icon-add',
handler :function(){
$('#stuForm').submit(); //提交表单信息
}
},{
text:'关闭',
iconCls : 'icon-no',
handler:function(){
$('#stuDlg').dialog('close');
$('#stuForm').form('reset');
}
}]
});
//初始化datagrid
$('#stuDg').datagrid({
url : ctx+'/demo/getStuPage.action', //action地址 不可以设为绝对路径 通过ctx变量获取工程名再加namespace...
pagination : true, //显示分页控件
pageSize : 20,
fit : true, //自动充满当前网页
striped : true, //是否显示斑马线效果。
//multiSort : true, //是否允许多列排序
remoteSort : true, //后台服务器排序
fitColumns : true, //真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。
columns : [[{
field : 'ck',
checkbox : true
},{
field : 'index',
title : '序号',
width : 15,
align : 'center',
formatter : function(val,row,index) {
var ps = $('#stuDg').datagrid('getPager').pagination('options');
if(ps.pageNumber == 0){
currentPage = ps.pageNumber + 1;
}else{
var currentPage = ps.pageNumber; //在设置分页属性的时候初始化页码。 默认1
}
var pageSize = ps.pageSize; //在设置分页属性的时候初始化页面大小。 默认10
return (pageSize * (currentPage - 1 )) + (index + 1 ); // 没明白
}
},
{field:'stuId',title:'学生编号',halign:'center',width:80,sortable:'true'},
{field:'stuName',title:'学生姓名',align: 'center',halign:'center',width:80},
{field:'stuSex',title:'学生性别',align: 'center',halign:'center',width:50},
{field:'stuAge',title:'学生年龄',align: 'center',halign:'center',width:50,sortable:'true'},
{field:'stuRemark',title:'学生备注',halign:'center',width:100},
]],
toolbar: [{
iconCls : 'icon-add',
text : "添加学生信息",
handler: function(){
$('#stuForm').form({
url : ctx+'/demo/addStu.action',
onSubmit: function(){
$('#stuForm').form('enableValidation');
return $('#stuForm').form('validate');
},
success:function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDlg').dialog('close');
$('#stuForm').form('clear');
$('#stuDg').datagrid('reload'); //重新加载dg页面
$('#stuForm').form('reset');
}else{
alert(data.message + ',请重试');
}
}
});
$('#stuDlg').dialog('setTitle','新增学生信息');
$('#stuDlg').dialog('open');
$('#stuForm').form('disableValidation');
$('#stuForm').form('reset');
}
},'-',{
iconCls: 'icon-edit',
text : "修改学生信息",
handler : function(){
//获取所有选中行
var rows = $('#stuDg').datagrid('getSelections');
//判断是否有选中行 如果数量不是1 提示选择一条 如果数量<1 提示没有选中
if(rows.length > 1){
$.messager.alert('错误提示','请选择一条记录','error');
}else if(rows.length < 1){
$.messager.alert('错误提示','您还没有选择一条记录','error');
}else{
//弹出修改的对话框
$('#stuDlg').dialog('setTitle','修改学生信息');
//获取行数据
$('#stuForm').form({
url : ctx+'/demo/updateStu.action',
onSubmit: function(){
// 校验 返回false则不提交
},
success:function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDlg').dialog('close');
$('#stuDg').datagrid('reload'); //重新加载dg页面
$('#stuForm').form('clear'); //清除表单数据,以免更改后,点击添加表单残留信息
$('#stuForm').form('reset');
}else{
alert(data.message+',请重试');
}
}
});
$('#stuDlg').dialog('open');
//表单加载数据
$('#stuForm').form('load',rows[0]); //方法就这样调用 先调方法的API
}
}
},'-',{
iconCls: 'icon-remove',
text : "删除学生信息",
handler : function(){
//获取所有选中行
var rows = $('#stuDg').datagrid('getSelections');
var ides = new Array();
if (null!= rows && 0 < rows.length ){
$.messager.confirm('确认','您确认想要删除此条记录吗?',function(r){
if (r) {
for(var i = 0; i < rows.length;i++){
ides.push(rows[i].stuId);
}
$.ajax({
url : ctx + '/demo/delStu.action',
data : {
"stuId" : ides,
},
traditional:true, //一个参数有多个值的情况下,可能以某个字符分隔的形式传递
type:'post',
cache:false,
dataType:'json',
success : function(data) {
// var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDg').datagrid('reload'); //重新加载dg页面
}else{
alert(data.message);
};
}
});
}
});
}else{
$.messager.alert('错误信息','请至少选择一条记录!','error');
}
}
}]
});
});
</script>
</body>
</html>
var ctx = '<%=contextPath%>';
$(function(){
var submitType;
//初始化dialog
$('#stuDlg').dialog({
width : 400,
height : 250,
closed : true, //是否关闭
modal : true,
buttons:[{
text :'提交',
iconCls : 'icon-add',
handler :function(){
if (submitType=="add"){
$('#stuForm').form("submit",{
url : ctx+'/demo/addStu.action',
onSubmit: function(){
$('#stuForm').form('enableValidation');
return $('#stuForm').form('validate');
},
success:function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDlg').dialog('close');
$('#stuForm').form('clear');
$('#stuDg').datagrid('reload'); //重新加载dg页面
$('#stuForm').form('reset');
}else{
alert(data.message + ',请重试');
}
}
}); //提交表单信息
}else{
$('#stuForm').form("submit",{
url : ctx+'/demo/updateStu.action',
onSubmit: function(){
// 校验 返回false则不提交
},
success:function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDlg').dialog('close');
$('#stuDg').datagrid('reload'); //重新加载dg页面
$('#stuForm').form('clear'); //清除表单数据,以免更改后,点击添加表单残留信息
$('#stuForm').form('reset');
}else{
alert(data.message+',请重试');
}
}
}); //提交表单信息
}
}
},{
text:'关闭',
iconCls : 'icon-no',
handler:function(){
$('#stuDlg').dialog('close');
$('#stuForm').form('reset');
}
}]
});
//初始化datagrid
$('#stuDg').datagrid({
url : ctx+'/demo/getStuPage.action', //action地址 不可以设为绝对路径 通过ctx变量获取工程名再加namespace...
pagination : true, //显示分页控件
pageSize : 20,
fit : true, //自动充满当前网页
striped : true, //是否显示斑马线效果。
//multiSort : true, //是否允许多列排序
remoteSort : true, //后台服务器排序
fitColumns : true, //真正的自动展开/收缩列的大小,以适应网格的宽度,防止水平滚动。
columns : [[{
field : 'ck',
checkbox : true
},{
field : 'index',
title : '序号',
width : 15,
align : 'center',
formatter : function(val,row,index) {
var ps = $('#stuDg').datagrid('getPager').pagination('options');
if(ps.pageNumber == 0){
currentPage = ps.pageNumber + 1;
}else{
var currentPage = ps.pageNumber; //在设置分页属性的时候初始化页码。 默认1
}
var pageSize = ps.pageSize; //在设置分页属性的时候初始化页面大小。 默认10
return (pageSize * (currentPage - 1 )) + (index + 1 ); // 没明白
}
},
{field:'stuId',title:'学生编号',halign:'center',width:80,sortable:'true'},
{field:'stuName',title:'学生姓名',align: 'center',halign:'center',width:80},
{field:'stuSex',title:'学生性别',align: 'center',halign:'center',width:50},
{field:'stuAge',title:'学生年龄',align: 'center',halign:'center',width:50,sortable:'true'},
{field:'stuRemark',title:'学生备注',halign:'center',width:100},
]],
toolbar: [{
iconCls : 'icon-add',
text : "添加学生信息",
handler: function(){
submitType = "add";
$('#stuDlg').dialog('setTitle','新增学生信息');
$('#stuDlg').dialog('open');
$('#stuForm').form('disableValidation');
$('#stuForm').form('reset');
}
},'-',{
iconCls: 'icon-edit',
text : "修改学生信息",
handler : function(){
//获取所有选中行
var rows = $('#stuDg').datagrid('getSelections');
//判断是否有选中行 如果数量不是1 提示选择一条 如果数量<1 提示没有选中
if(rows.length > 1){
$.messager.alert('错误提示','请选择一条记录','error');
}else if(rows.length < 1){
$.messager.alert('错误提示','您还没有选择一条记录','error');
}else{
$('#stuDlg').dialog('setTitle','修改学生信息');
//获取行数据
submitType = "update";
$('#stuDlg').dialog('open');
//表单加载数据
$('#stuForm').form('load',rows[0]); //方法就这样调用 先调方法的API
}
}
},'-',{
iconCls: 'icon-remove',
text : "删除学生信息",
handler : function(){
//获取所有选中行
var rows = $('#stuDg').datagrid('getSelections');
var ides = new Array();
if (null!= rows && 0 < rows.length ){
$.messager.confirm('确认','您确认想要删除此条记录吗?',function(r){
if (r) {
for(var i = 0; i < rows.length;i++){
ides.push(rows[i].stuId);
}
$.ajax({
url : ctx + '/demo/delStu.action',
data : {
"stuId" : ides,
},
traditional:true, //一个参数有多个值的情况下,可能以某个字符分隔的形式传递
type:'post',
cache:false,
dataType:'json',
success : function(data) {
// var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message);
$('#stuDg').datagrid('reload'); //重新加载dg页面
}else{
alert(data.message);
};
}
});
}
});
}else{
$.messager.alert('错误信息','请至少选择一条记录!','error');
}
}
}]
});$.messager.progress(); // display the progress bar
$('#ff').form('submit', {
url: ...,
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close'); // hide progress bar while the form is invalid
}
return isValid; // return false will stop the form submission
},
success: function(){
$.messager.progress('close'); // hide progress bar while submit successfully
}
});