溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
主界面
添加
修改
刪除
查詢暫時按照單字段id查詢
頁面主要代碼easyDemo1.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>easyDemo1.jsp</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jslib/easyCrud.js"></script>
</head>
<body>
<h3><b>測試easyui的DataGrid的CRUD操作</b></h3>
<table id="tt">
</table>
<form id="ff" method="post">
<div>
姓名:<input class="easyui-validatebox" type="text" id="name" name="name" required="true"></input>
</div>
<div>
年齡:<input class="easyui-numberbox" type="text" id="age" name="age" required="true"></input>
</div>
<div>
性別:<input class="easyui-validatebox" type="text" id="sex" name="sex" required="true"></input>
</div>
<div>
出生:<input class="easyui-validatebox" type="text" id="birthday" name="birthday" required="true"/>
</div>
<div>
班級:<input class="easyui-validatebox" type="text" id="className" name="className" required="true"/>
</div>
</form>
<div id="add" class="easyui-window" title="添加" style="padding: 10px;width: 300;height:200;"
iconCls="icon-add" closed="true" maximizable="false" minimizable="false" collapsible="false">
<div id="aa">
</div>
<a class="easyui-linkbutton" iconCls="icon-ok" href="void(0)" onclick="add()">添加</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" href="void(0)" onclick="close1()">取消</a>
</div>
<div id="edit" class="easyui-window" title="修改" style="padding: 10px;width: 300;height: 200;"
iconCls="icon-edit" closed="true" maximizable="false" minimizable="false" collapsible="false">
<div id="ee">
</div>
<a class="easyui-linkbutton" iconCls="icon-ok" href="void(0)" onclick="edit()">修改</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" href="void(0)" onclick="close2()">取消</a>
</div>
<div id="query" class="easyui-window" title="查詢" style="padding: 10px;width: 360px;height:100;"
iconCls="icon-search" closed="true" maximizable="false" minimizable="false" collapsible="false">
<div>
<table>
<tr>
<td>學生學號:</td>
<td><input type="text" name="id" id="qq" class="easyui-numberbox" required="true"></td>
<td><a class="easyui-linkbutton" iconCls="icon-search" href="void(0);" onclick="query()">查詢</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
最主要的easyCrud.js代碼如下:
$(function(){
$('#ff').hide();
$('#tt').datagrid({
title:'datagrid增刪查該小例子',
iconCls:'icon-save',
width:500,
height:350,
//pageSize:5,
pageList:[5,10,15,20],
nowrap:false,
striped: true,
collapsible:true,
url:'easyAction.action',
loadMsg:'數據裝載中......',
sortName:'code',
sortOrder:'desc',
remoteSort:false,
frozenColumns:[[
{field:'ck',checkbox:true}
]],
columns:[[
{title:'學號',field:'id',width:'50',rowspan:2,align:'center'},
{title:'姓名',field:'name',width:'60',rowspan:2,align:'center'},
{title:'性別',field:'sex',width:'50',rowspan:2,align:'center'},
{title:'年齡',field:'age',width:'50',rowspan:2,align:'center'},
{title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'},
{title:'班級',field:'className',width:'100',rowspan:2,align:'center'}
]],
pagination:true,
rownumbers:true,
toolbar:[{
text:'全部',
iconCls:'icon-ok',
handler:function(){
$('#tt').datagrid({url:'easyAction.action'});
}
},'-',{
text:'添加',
iconCls:'icon-add',
handler:function(){$('#add').window('open');
$('#ff').show();
$('#ff').form('clear');
$('#ff').appendTo('#aa');}
},'-',{
text:'修改',
iconCls:'icon-edit',
handler:getSelect
},'-',{
text:'刪除',
iconCls:'icon-remove',
handler:del
},'-',{
text:'查詢',
iconCls:'icon-search',
handler:function(){
$('#query').window('open');
}
}
]
});
displayMsg();
});
function displayMsg(){
$('#tt').datagrid('getPager').pagination({displayMsg:'當前顯示從{from}到{to}共{total}記錄'});
}
function close1(){
$('#add').window('close');
}
function close2(){
$('#edit').window('close');
}
function add(){
$('#ff').form('submit',{
url: 'easyAdd.action',
onSubmit:function(){ return $('#ff').form('validate');},
success:function(){
close1();
}
});
$.messager.alert('add','添加信息成功!!!','info',function(){
$('#tt').datagrid({
url:'easyAction.action',
loadMsg:'更新數據中......'
});
displayMsg();
});
}
var id;
function getSelect(){
var select = $('#tt').datagrid('getSelected');
if(select){
$('#edit').window('open');
$('#ff').show();
$('#ff').appendTo('#ee');
$('#name').val(select.name);
$('#age').val(select.age);
$('#sex').val(select.sex);
$('#birthday').val(select.birthday);
$('#className').val(select.className);
id = select.id;
}else{
$.messager.alert('warning','請選擇一行數據','warning');
}
}
function edit(){
$('#ff').form('submit',{
url: 'easyUpdate.action?id='+id,
onSubmit:function(){ return $('#ff').form('validate');},
success:function(){
$.messager.alert('edit','修改信息成功!!!','info');
close2();
}
});
$('#tt').datagrid({
url:'easyAction.action',
loadMsg:'更新數據......'
});
}
function del(){
var selected = $('#tt').datagrid('getSelected');
if(selected){
$.messager.confirm('warning','確認刪除么?',function(id){
if(id){
id = selected.id;
$.ajax({
type:"POST",
url:"easyDel.action",
data:"id="+id,
dataType:"xml",
success:function callback(){}
});
$('#tt').datagrid('reload');
}
});
}else{
$.messager.alert('warning','請選擇一行數據','warning');
}
}
function query(){
var queryParams = $('#tt').datagrid('options').queryParams;
queryParams.queryWord = $('#qq').val();
$('#tt').datagrid({
url:'easyQuery.action'
});
displayMsg();
$('#query').window('close');
}
上述js代碼寫的有點臃腫，但是絕對能夠精簡的，只是時間關系和個人在js這塊開發較少。
后臺代碼較多，本人已經將源碼jquery_easyUI_demo.rar上傳到網盤中，提供下載地址http://u.115.com/file/f46d05cd01#Download有興趣的可以看看
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
