嗯，自己慢慢写的，其中也遇到过很多问题，一点点百度解决的，新增没写，因为我想把新增写在注册中。先来贴一下实现的效果图
简单来说一下这个界面：
1、页面加载时，默认查询整张表的数据，添加查询条件后，就会根据添加的条件查询对应的数据，点击返回，页面又回到刚加载成功时的那个状态。
2、编辑和删除的按钮，我没弄在toolbar上，点击编辑，会自动弹出编辑框，编辑框里会显示你选中的这条记录的多有数据，编辑完保存，页面数据会自动更新，点击删除按钮，数据也会自动更新。
3、表格的下边其实还有分页，只是我没截图出来，分页功能也是已经实现好的。
4、至于id，我没有用 idField:‘id’,而是在表格里隐藏了，如果你想用 idField属性的话，你就自己修改呗，反正也不难。
5、代码里贴有注解，我只发实现功能的代码，因为我思考了一下，还是不能把代码完完全全都贴出来，我怕你们自己不去思考。我觉得代码复制、借鉴的同时，最重要的是你看懂代码，修改代码、学会使用的这个过程，因为只有花费了时间和努力，你才能真正印象深刻。
6、我也是刚用这个，做这个页面也是为了练练手，代码之所以发出来，一是为了和大家分享，二是我准备接着改，把删除功能都放在toolbar里面，顺便添加复选框，根据选中的复选框来对数据进行操作。
7、只有一个bug，就是查询所有数据时，如果页面的page>1时，你再操作条件查询的话，page仍是大于1.什么意思呢?就是假如你当前页面为5，共5页，没页显示5条记录，这时操作条件查询（假设满足条件的一共只有5条），点击查询按钮，它的当前页面依旧在第5页，但查询出来的数据却在第一页，你要自己多次点击上一页才能看到依据条件查询出来的数据（这个问题后期已经解决，只需要在搜索函数中首先改变datagrid的url就可以解决）
8、简单说一下后台用的是ssh，这个一时半会说不完，感兴趣的去学一下。
<script type="text/javascript">
$(function(){
$('#getadmin').datagrid({
title:'管理员信息列表',
width:1070,
height:440,
url:'admin/adminlist.action',
columns:[[
{
field:'id',
title:'序号',
width:100,
align:'center',
hidden:true
},{
field:'account',
title:'用户名',
width:200 ,
formatter:function(value,data,index){
return '<span title='+value+'>'+value+'</span>'
},
align:'center'
},{
field:'name',
title:'姓名',
width:100 ,
formatter:function(value,data,index){
return '<span title='+value+'>'+value+'</span>'
},
align:'center'
}, {
field:'password',
title:'密码',
width:100 ,
formatter:function(value,data,index){
return '<span title='+value+'>'+value+'</span>'
},
align:'center'
}, {
field:'sex',
title:'性别',
width:100 ,
formatter:function(value,row,index){
if(row.sex==1){
return "男";
}else{
return "女";
}
},align:'center'
}, {
field:'phone',
title:'手机号',
width:200 ,
formatter:function(value,data,index){
return '<span title='+value+'>'+value+'</span>'
},
align:'center'
},{
field:'itemid',
title:'操作',
width:200,
formatter:function(value,data,index){
var str = '<a οnclick="edit('+index+')" class="easyui-linkbutton" rel="external nofollow" name="edit" iconCls="icon-edit"></a> <a οnclick="del('+index+')" class="easyui-linkbutton" rel="external nofollow" name="delete" iconCls="icon-cancel"></a>';
return str;
},
align:'center'
}
]] ,
pagination:true, //True底部显示分栏页
rownumbers:true, //True显示行号的列
pageNumber:1, //初始化页码
pageSize:10, //初始化页码尺寸
pageList:[10,20,30] ,//初始化页面尺寸的选择列表
striped:true, //True把行条纹化（奇偶行使用不同背景颜色）
fitColumns:true,
onLoadSuccess:function(data){ //
$('a[name="edit"]').linkbutton({
plain:true ,
text: '编辑'
});
$('a[name="delete"]').linkbutton({
plain:true ,
text:'删除'
});
}
});
/* $("#research").css("display","none");//隐藏搜索文本框 */
});
//编辑
function edit(index){
var rows = $('#getadmin').datagrid('getRows');
var row = rows[index];
$('#win').window({
left:300,
top:50,
width:300,
height:200,
closed:false,//窗口显示
modal:true //定义成模态，
});
$('#id').val(row.id);
$('#name').val(row.name);
$('#account').val(row.account);
$('#phone').val(row.phone);
$("input[type='radio'][value="+row.sex+"]").attr("checked",true);
$('#password').val(row.password);
}
//删除
function del(index){
var rows = $('#getadmin').datagrid('getRows');//获得所有行
var row = rows[index];
var id = row.id;
$.messager.confirm('消息提示','确认删除该条数据?',function(r){
if (r){
$.ajax({
type:'post',
url:"admin/delete.action",
dadaType:"text",
data:{"id":id},
success:function(data){
$('#getadmin').datagrid('reload');
$.messager.show({
title:'系统消息',
msg:'删除成功！',
timeout:2000,
showType:'slide'
})
},
error:function(data){
$.messager.show({
title:'系统消息',
msg:'删除失败！',
timeout:2000,
showType:'slide'
})
}
});
}
});
}
//取消修改
function closed(){
$('#win').window('close'); //修改窗口隐藏
}
//保存修改
function save(){
var id = $('#id').val(); //获取文本框的值
var name = $('#name').val();
var account = $('#account').val();
var phone = $('#phone').val();
var sex = $("input[type='radio']:checked").val();
var password = $('#password').val();
$.ajax({
type:'post',
url:"admin/upd.action",
dadaType:"text",
data:{
"id":id,
"name":name,
"account":account,
"phone":phone,
"sex":sex,
"password":password
},
success:function(data){
$('#win').window('close');
$('#getadmin').datagrid('reload');
$.messager.show({
title:'系统消息',
msg:'修改成功！',
timeout:2000,
showType:'slide'
})
},
error:function(data){
$.messager.show({
title:'系统消息',
msg:'修改失败！',
timeout:2000,
showType:'slide'
})
}
});
}
//搜索
function research(){
var account = $("#account1").val();
var name = $("#name1").val();
var phone = $("#phone1").val();
$.post("${pageContext.request.contextPath}/admin/search.action",
{"name":name,"account":account,"phone":phone},
function(ons){
var json = JSON.parse(ons);
$('#getadmin').datagrid('loadData',json);
}
)
}
//返回
function back(){
var account = $("#account1").val("");
var name = $("#name1").val("");
var phone = $("#phone1").val("");
research();
}
</script>
