1.学生列表的实现:
a.首先新建一个与表对应的实体类,(增删改查操作都需要)
b.新建一个student_list.html网页,注意用前台框架easyui编写其中的网页。
首先需要在head中导包
然后编写body中的内容
其中需要有一个表格来用于显示从后台传来的学生信息列表
再编写Javascript中的内容
$(function(){
//该方法表示页面加载完成后就会执行该方法中的内容
});
因此,在页面加载完成后就会执行加载列表数据的方法,毕竟一个列表中要有数据
在加载数据列表的方法中是调用了封装的initDataGrid方法
在调用的该方法中有几个参数
选择器对象:即加载的学生列表的数据放在哪个里面
Url地址:即在前台显示列表需要调用后台查询学生列表的方法,该方法+.hebe
是否显示复选框
绑定主键:即一个表的ID,也是一个实体类中的ID属性
默认显示的当前页:自然显示的为第一页,因此为1
需要加载的数据:此处是一个数组
加载按钮时间:该按钮图片绑定了对应的按钮时间
因此在loadListTable()方法中就会定义封装方法的一系列属性
var url="getStudentList.hebe";
var columnArr=[
//批量删除选择框
{field:'ck', checkbox:'true'},
{field:'id',title:'id',hidden:true},
{field:'sno',title:'学号',width:'15%'},
{field:'name',title:'姓名',width:'15%'},
{field:'birthday',title:'生日',width:'15%',
//对日期进行格式化处理
formatter:function(value,row,index){
return formatDate(value, 1);
}
},
{field:'createtime',title:'创建时间',width:'15%',
//对时间进行格式化处理
formatter:function(value,row,index){
return formatDate(value,0);
}
},
{field:'sex',title:'性别',width:'15%',
//对性别进行判断处理
formatter:function(value,row,index){
if(value==1){
return "男";
}else{
return "女";
}
}
},
//部门编号中显示部门名字,此处sql语句是两张表的内关联查询
{field:'depname',title:'部门编号',width:'15%'},
{field:'opt',title:'操作',width:'10%',align:'center',resizable:false,
formatter:function(value,row,index){
var id = row["id"];
//用拼接方法
var str = "";
str +='<a class="viewcls" href="#" onclick="toInfo('+id+')" title="查看"></a>';
str += '<a class="editcls" href="#" onclick="toEdit('+id+')" title="修改"></a>';
str += '<a class="deletecls" onclick="toDelete(' + id + ')" title="删除"></a>';
return str;
//用数组拼接
/* var arr=[];
arr.push('<a clsss="viewcls" onclick="toInfo('+id+')" title="查看"></a>');
arr.push('<a class="editcls" onclick="toEdit('+ id +')" title="修改"></a>');
arr.push('<a class="deletecls" onclick="toDelete('+ id +')" title="删除"></a>');
return arr.join("");*/
}
}
];
//对应以上拼接方法显示操作按钮图片
var successFun=function(){
$('.viewcls').linkbutton({plain:true,iconCls:'icon-search'});
$('.editcls').linkbutton({plain:true,iconCls:'icon-edit'});
$('.deletecls').linkbutton({plain:true,iconCls:'icon-remove'});
};
C.编写子控制器getwaybeans.xml
d.编写对应的bean类
在bean包中新建一个StudentBean类,该需要继承BaseBean类,对student所有操作的后台方法都在该类中完成。
在该类中新建一个方法名为与getwaybeans.xml文件的name属性名一致的方法
e.在与实体类一样的目录名称下新建一个student.xml文件,该文件所在的包名为cn.com.goldsea.hebedemo.entity,该文件中存储的就是对student表进行操作的sal语句
hebedbl.xml中file属性就是该文件的路径。
在该文件中写一个查询的sql语句
其中需要注意的是:
Id属性为后台查看列表的方法中所调用的接口名,ro属性这是通过sql语句返回值所得到的数据类型
select s.id,s.sno, s.name, s.birthday, s.createtime, s.sex,d.depname
from t_student s, t_department d where s.depid = d.id
order by s.createtime desc
该查询语句是一个内联的语句,因为在student表中有一个外键是department表中的主键,在网页列表中需要显示该department表中的name名字,因此需要用内联结。
在此会需要在student实体类中需要加一个属性
该属性实际是department表中的字段,但因为需要显示在网页中所以放在一个实体类中。
以上一系列都是为实现列表显示而编写的,总结如下:
新建实体类——》编写HTML网页——》编写子控制器getwaybeans.xml——》编写对应的bean类——》新建student.xml文件