列表显示功能的实现

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文件