嗯,自己慢慢写的,其中也遇到过很多问题,一点点百度解决的,新增没写,因为我想把新增写在注册中。先来贴一下实现的效果图
简单来说一下这个界面:
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>