<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>crud.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
body{
font-size:14px;
}
</style>
<script type="text/javascript">
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+d+'-'+m;
}
$.extend($.fn.validatebox.defaults.rules, {
isnum: {
validator: function(value,param){
if(isNaN(value)){
return false;
}
return true;
},
message: '你输入的值必须是数字'
}
});
$.extend($.fn.validatebox.defaults.rules, {
age: {
validator: function(value,param){
if(value>0 && value<100){
return true;
}
return false;
},
message: '年龄必须在0~100岁'
}
});
$.extend($.fn.validatebox.defaults.rules, {
email1: {
validator: function(value,param){
var str="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/";
if(str.test(value)){
return true;
}
return false;
},
message: '邮箱格式不正确'
}
});
function sexFormatter(value,row,index){
if(value==1){
return '男';
}else{
return '女';
}
}
function queryForm(){
//easyui获取文本值
var stuName=$("#stuName").textbox('getValue');
//ajax=queryStudent?sname=stuName的值
//easyui所有的方法的调用
//控件对象.控件名称('方法名')
$('#dg').datagrid('load',{
sname: stuName
});
}
/*修改方法*/
function submitUpdateForm(){
var selectedRow=$("#dg").datagrid("getSelected");
$('#ff').form('submit', {
url:'student/'+selectedRow.sid,
success: function(msg){
msg=JSON.parse(msg);
if(msg.code==1){
$.messager.alert('提示消息','修改成功');
queryForm();
$("#w").window('close');
}else{
$.messager.alert('错误消息',msg.message);
}
}
});
}
function submitaddForm(){
$('#tj').form('submit', {
url:'student',
success: function(msg){
msg=JSON.parse(msg);
if(msg.code==1){
$.messager.alert('提示消息','添加成功');
queryForm();
$("#ww").window('close');
$("#ww").form("clear");
}else{
$.messager.alert('错误消息',msg.message);
}
}
});
}
$(function(){
//设置data-options属性
$("#dg").datagrid({
toolbar:[{
iconCls: 'icon-aaa',
text:'添加',
onClick:function(){
$("#ww").window('open');
}
},{
iconCls: 'icon-remove',
text:'删除',
onClick:function(){
//获取当前选择中的行
var selectedRow=$("#dg").datagrid("getSelections");
if(selectedRow==null){
$.messager.alert('提示消息','请选择数据');
return;
}
var temp = "";
$.each(selectedRow,function(key,value){
temp=temp+value.sid+",";
})
$.ajax({
url:'student/'+temp,
method:'POST',
dataType:'json',
data:'_method=delete',
success:function(msg){
$.messager.confirm('确认对话框', '是否删除数据', function(r){
if(r){
if (msg.code==1){
$.messager.alert('提示消息','删除成功');
queryForm();
}else{
$.messager.alert('错误消息',msg.message);
}
}else{
$.messager.alert('提示消息','取消操作');
}
});
/*if(msg.code==1){
$.messager.alert('提示消息','删除成功');
queryForm();
}else{
//$.messager.alert('错误消息',msg.message);
$.messager.show({
title:'我的消息',
msg:msg.message,
showType:'show',
style:{
right:'',
heigth:500,
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
}*/
}
})
}
},{
iconCls: 'icon-edit',
text:'修改',
onClick:function(){
//获取当前选择中的行
var selectedRow=$("#dg").datagrid("getSelected");
if(selectedRow==null){
$.messager.alert('提示消息','请选择数据');
return;
}
$("#w").window('open');
$('#ff').form('load',selectedRow);
}
}]
})
})
</script>
</head>
<body>
学生姓名:<input id="stuName" class="easyui-textbox" type="text" name="stuname" data-options="required:true"></input>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:50px" οnclick="queryForm()">搜索</a>
<div style="height:5px"></div>
<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:false,collapsible:true,url:'queryStudent',method:'get',pagination:true,
rownumbers:true">
<thead>
<tr>
<!-- {"sid":1,"sname":"张三2号","gid":1,"age":12,"sex":1,"address":"深圳福田"} -->
<th data-options="field:'sid',width:80">学生编号</th>
<th data-options="field:'sname',width:100">学生姓名</th>
<th data-options="field:'age',width:80,align:'right'">年龄</th>
<th data-options="field:'sex',width:80,align:'right',formatter:sexFormatter">性别</th>
<th data-options="field:'address',width:250">地址</th>
</tr>
</thead>
</table>
<div id="w" class="easyui-window" title="修改学生信息" data-options="iconCls:'icon-edit',closed:true" style="width:320px;height:300px;padding:5px;">
<div class="easyui-layout" data-options="fit:true">
<form id="ff" method="post">
<input type="hidden" name="_method" value="put">
<table cellpadding="5">
<tr>
<td>学生姓名:</td>
<td><input class="easyui-textbox" type="text" name="sname" data-options="required:true"></input></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></input></td>
</tr>
<tr>
<td>性别:</td>
<td>
<select class="easyui-combobox" name="sex" style="width: 50px">
<option value="1">男</option>
<option value="0">女</option>
</select>
</td>
</tr>
<tr>
<td>地址:</td>
<td><input class="easyui-textbox" name="address" data-options="multiline:true" style="height:60px"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitUpdateForm()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
</div>
</div>
</div>
<div id="ww" class="easyui-window" title="添加学生信息" data-options="iconCls:'icon-add',closed:true" style="width:320px;height:420px;padding:5px;">
<div class="easyui-layout" data-options="fit:true">
<form id="tj" method="post" enctype="multipart/form-data">
<input type="hidden" name="gid" value="1"/>
<table cellpadding="5">
<tr>
<td>学生姓名:</td>
<td><input class="easyui-textbox" type="text" name="sname" data-options="required:true,missingMessage:'请输入用户名'"></input></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-textbox" type="text" name="age" data-options="required:true,validType:['age','length[0,2]']"></input></td>
</tr>
<tr>
<td>性别:</td>
<td>
<select class="easyui-combobox" name="sex" style="width: 50px">
<option value="1">男</option>
<option value="0">女</option>
</select>
</td>
</tr>
<tr>
<td>手机号码:</td>
<td><input class="easyui-textbox" type="text" name="phone" data-options="required:true,invalidMessage:'电话号码必须是11位数字',validType:['isnum','length[11,11]']" ></input></td>
</tr>
<tr>
<td>出身日期:</td>
<td><input class="easyui-datebox" type="text" name="bornDate" data-options="required:true,editable:false"></input></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input class="easyui-textbox" type="text" name="email1" data-options="required:true,validType:'email1'"></input></td>
</tr>
<tr>
<td>地址:</td>
<td><input class="easyui-textbox" name="address" data-options="multiline:true" style="height:60px"></input></td>
</tr>
<tr>
<td>个人形象照:</td>
<td><input class="easyui-filebox" name="myImage" data-options="prompt:'请选择形象照'" style="width:100%"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitaddForm()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
</div>
</div>
</div>
</body>
</html>