列表显示功能的实现

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'});
};