easyui简单的增删改查
<!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">-->
<!-- 将themes,query.min.js,jquery.easyui.min.js放在webRoot下-->
<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">
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);//获取JSON数据
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');
}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(){
//获取当前选择中的多行,返回数组
//getselected获取当前选中的行,返回单行数据
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){
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:300px;padding:5px;">
<div class="easyui-layout" data-options="fit:true">
<form id="tj" method="post">
<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"></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="submitaddForm()">添加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
</div>
</div>
</div>
</body>
</html>
easyui简单的增删该查
最新推荐文章于 2019-06-14 18:02:39 发布