1. 程式人生 > >列表顯示功能的實現

列表顯示功能的實現

mat 控制器 lec 創建 arr 生日 button 數據類型 del

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.xmlfile屬性就是該文件的路徑。

在該文件中寫一個查詢的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文件

列表顯示功能的實現