基于easyui的CMS系统的小结

前言

这两天摸索了使用easyui完成一个小的页面，从数据库中读取一部分数据，以表格形式分页显示在前台。总体上easyui很方便的，但是有一些小的细节不注意的话会让你耽误一点时间。

1.使用步骤

1.加载js

	"js/jquery-easyui-1.4.4/themes/default/easyui.css">
	"js/jquery-easyui-1.4.4/themes/icon.css">
	"js/jquery-easyui-1.4.4/demo/demo.css">
	
	

2.注意

            我用红色标出的部分，由于我没有注意，在js前加了一个“/”反斜线，所以这些文件一直没有加载上，但是我用ctrl+鼠标，

可以定位到这些文件，我用的     是  myeclipse8.5，而且去掉斜线后，反而无法定位到制定文件了，貌似很矛盾，很纠结。

js，所在目录在webroot下。但是还是去掉斜线，否则部署后找不到这些js文件，至于原因不详。

下

下面个问题更神奇了，我定义了一个eaysui的table控件，一直显示不出来漂漂亮亮的格式，原因是我所加的eaysui的table在

我之前定义的普通table之中。一开始还是使不得删除之前的界面。一狠心删掉了。结果显示正常了。而且比以前更好看了。

3.定义组件

我定义的是datagrid也就是数据表格，先来一段代码

 
 class="easyui-datagrid" style="width:100%;height:100%"
				>
																																																			


下载ID
用户ID
用户昵称
资源名称
用户标签
下载次数
时间



		


		
class="easyui-dialog" style="background-color: #eee;padding:20px;">
		

    注意我加上红色的部分，就是一个声明。声明为一个数据表格，一个为对话框。展示下效果

还很不错的。有点意思了。但是数据是不会平白无故跑上去的，至少得加个url吧。还有添加，修改，删除在哪里加的？ 

好，继续上源代码

function createListData(){
	$('#listdata').datagrid({
			title:'文件下载列表' ,
	               iconCls:'icon-edit',//图标 
	               striped: true,
			/*url:"DownloadList!queryByPage.action",*/
			nowrap:"true",
			loadMsg:"数据正在加载，请稍候",
		       fitColumns:"true",
		       singleSelect:"false",
	                collapsible:false,//是否可折叠的 
	                fit: true,//自动大小 
	                remoteSort:false,  
	               idField:'fldId',
	                rownumbers:true,//行号 
			pagination:true,//分页
	 		border:true,
	 		onDblClickRow:function(rowIndex,rowData){
						openDetailsMsgDia(rowData);
			},
			/*onBeforeLoad:function(param){
				
			},*/
	        frozenColumns:[[ 
	            {field:'ck',checkbox:true
			} 
	        ]], 
	        toolbar: [{ 
	            text: '添加', 
	            iconCls: 'icon-add', 
	            handler: function() { 
	                openDialog("add_dialog","add"); 
	            } 
	        }, '-', { 
	            text: '修改', 
	            iconCls: 'icon-edit', 
	            handler: function() { 
	                openDialog("add_dialog","edit"); 
	            } 
	        }, '-',{ 
	            text: '删除', 
	            iconCls: 'icon-remove', 
	            handler: function(){ 
	                deleteRecord(); 
	            } 
	        }], 
	    }); 
	
	$("#listdata").datagrid('hideColumn', 'download_id');//设置隐藏域
	    //设置分页控件 
	    var p = $('#listdata').datagrid('getPager'); 
	    $(p).pagination({ 
	        pageSize: 5,//每页显示的记录条数，默认为10 
	        pageList: [5,10,15],//可以设置每页记录条数的列表 
	        beforePageText: '第',//页数文本框前显示的汉字 
	        afterPageText: '页    共 {pages} 页', 
	        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
			,onSelectPage:function(pageNumber,pageSize){
					getData(pageNumber,pageSize);
					
		        }
			
	    }); 
	getData(1,5);
}

这个js函数就是初始化datagrid的。

我捡重点的说一下 

1.url

	url:"DownloadList!queryByPage.action"

	加上这句，在datagrid初始化时，就会自动去执行这个url,也就是去执行这个action，后面可以通过&加参数

   至于数据如何传回来。以什么格式。一会说

2.分页实现

   pagination:true，这句话制定，这个table具有分页功能。

同时需要初始化分页

            var p = $('#listdata').datagrid('getPager'); 
	    $(p).pagination({ 
	        pageSize: 5,//每页显示的记录条数，默认为10 
	        pageList: [5,10,15],//可以设置每页记录条数的列表 
	        beforePageText: '第',//页数文本框前显示的汉字 
	        afterPageText: '页    共 {pages} 页', 
	        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
			,onSelectPage:function(pageNumber,pageSize){
					getData(pageNumber,pageSize);
					
		        }
			
	    }); 

listdata也就是datagrid数据表格的id.定义分页：

那么分页是否还需要做什么呢。需要后台的支持，也就是说，每一次更改页码，都要向后台传即将显示的页数，

以及每页的个数，同时，由于后台每次向前台只传送了一页的数据，那么前台如何知道总页数，总条数是多少呢

，同样后台需要告诉前台，总条数多少。由于每页个数由前台指定，所以后台不用传总页数。那么数据交换的格

式是什么。json

上后台代码：

		System.out.println("pageSize:"+pageSize+"pageNumber"+pageNumber);
		List list = downloadService.queryByPage(pageNumber, pageSize);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		PrintWriter out;
		try {
			//json
			out = response.getWriter();
				    JsonConfig jsonConfig = new JsonConfig();

			 // 设置javabean中日期转换时的格式
			 jsonConfig.registerJsonValueProcessor(Date.class,
			 new JsonDateValueProcessor("yyyy-MM-dd HH:mm:ss"));
			 // 获取json数组
			JSONArray jsonList = JSONArray.fromObject(list, jsonConfig);
			
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("total", downloadService.getCountsAll());
			jsonObject.put("rows", jsonList);
			//jsonObject.
			out.print(jsonObject);
			out.flush();
			out.close();
		} catch (IOException e) {
			// 
			e.printStackTrace();
		}

先看蓝色的部分：total指定总条数。rows指定 表格显示的数据
那么其他代码是干啥用的。可以看到其中有date.class 这个date就是java.util.date，为什么单独把他提出来，因为这个类在转换成json时，和其他的基础类，不一样

他可以分割成 年，时区，月，天，周，小时，等等非常麻烦的json格式 而我想要的只是简单的 yyyy-MM-dd HH:mm:ss .怎么办呢。json为我们提供了自定义解析的

方法。实现 JsonValueProcessor这个接口

package util;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Locale;
//import java.util.Arrays.ArrayList;
import java.util.Date;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.processors.JsonBeanProcessor;
import net.sf.json.processors.JsonValueProcessor;

import demo.entities.User;
import demo.entities.view.download;


 */public class JsonDateValueProcessor implements JsonValueProcessor  {
	 private String datePattern = "yyyy-MM-dd HH:mm:ss";// 日期格式

	 public JsonDateValueProcessor() {
	 super();
	 }

	 // 构造函数
	 public JsonDateValueProcessor(String format) {
	 super();
	 this.datePattern = format;
	 }

	 public Object processArrayValue(Object value, JsonConfig jsonConfig) {
	 // TODO Auto-generated method stub
	 return process(value);
	 }

	 public Object processObjectValue(String key, Object value,
	 JsonConfig jsonConfig) {
	 // TODO Auto-generated method stub
	 return process(value);
	 }

	 private Object process(Object value) {
	 try {
	 if (value instanceof Date) {
		 SimpleDateFormat sdf = new SimpleDateFormat(datePattern,
		 Locale.UK);
	 return sdf.format((Date) value);
	 }
	 return value == null ? "" : value.toString();
	 } catch (Exception e) {
	 return "";
	 }
	 }

	 public String getDatePattern() {
	 return datePattern;
	 }

	 public void setDatePattern(String datePaterns) {
	 this.datePattern = datePaterns;
	 }

	 public static void main(String[] args) {

	 ArrayList list = new ArrayList();
	 download download = new download();
	 download.setTime(new Date());
	 list.add(download);
	 JsonConfig jsonConfig = new JsonConfig();

	 // 设置javabean中日期转换时的格式
	 jsonConfig.registerJsonValueProcessor(Date.class,
	 new JsonDateValueProcessor("yyyy-MM-dd HH:mm:ss"));
	 // 获取json数组
	 JSONArray jsonArray = JSONArray.fromObject(list, jsonConfig);

	 System.out.println(jsonArray.toString());
	 }

	
	 }

通过这个自定义的类实现转换。这样date转化就更方便了，可以看到jsonArray直接可以将一个bean的list转化为json,

json的键名就是javabean的属性名称。实现原理是java反射机制。很简单有兴趣的可以去看看。

这样就可以通过respose.getWirter，输出到前台，ajax就可以接受了。注意：刚才我们第一步为每一列定义的属性名一定要和 json传回的

键值对的键名对应。否则不会显示。完成了吗？还没有。分页功能还没有完成。可以看到我的createListData()函数最后还有一个

getData()函数调用，而且貌似还有这么一句话

onSelectPage:function(pageNumber,pageSize){
					getData(pageNumber,pageSize);
					
		        }

这个函数是在页数改变时，easyui自动调用的，getdata（）是我们自定义的函数。没改变一下页码，我们都要向后台要数据

function getData(pageNumber,pageSize)
{
	$.ajax({
		dataType:'json',
		url:'DownloadList!queryByPage.action',
		data:{pageSize:pageSize,pageNumber:pageNumber},
		type:'post',
		success:function(data,status){
			$('#listdata').datagrid('loadData',data);
			$("#listdata").datagrid('reload');
		},
		error:function(data,status){
			 $.messager.alert('系统提示','对不起,登录超时请重新登录'+data+status,'error',function(){
				 /*location.href = '/index.jsp';*/
			 });
		 }
	});
}

我们是用ajax异步获取数据。
这个data中就有我们需要的从后台传回来的json。然后，loaddata加载，reload重新加载。显示给用户。如果失败则调用错误处理函数，

告诉用户出现什么错误。我加红的地方，是我们从前台向后台传json的格式。

为什么我要在createListData()处调用一遍getData()呢，是因为如果指定url,每一次加载，包括分页加载 无法指定页数，和每页个数，

所以放弃了url，而是采用，初始化的时候，调用getData(1,5),这个1指的是页数，5指的是每页的个数。而后每一次改编页码都是调

用onselectpages(),这个函数。这样就实现了分页功能。非常稳定，后台和前台充分解耦。我之前自定义的分页实现。很是麻烦，老

是出错。考虑很对逻辑。什么下一次传哪个页码，向前向后能不能翻页，跳转到指定页码怎么翻，好繁琐。前台界面很乱，后台的

逻辑与前台交叉。维护相当困难。一个url需要写好多次。哎呀，烦死个人了。我写完之后从来不敢看我写的代码，我害怕我又发现哪里有错误。 有个这个控件，再也不用担心分页了。

 3.实现双击记录 弹出对话框显示详细信息：

  

onDblClickRow:function(rowIndex,rowData){
						openDetailsMsgDia(rowData);
			},

初始化datagrid时指定了这个属性。当双击记录时调用自定义函数

function openDetailsMsgDia(rowData){
	//alert();
	$('#detailsMsg').html("

"+
						  "下载记录ID："+rowData.download_id+"

"+
						  "用户名："+rowData.username+"

"+
						  "用户ID："+rowData.user_id+"

"+
						  "文件名称："+rowData.resource_name+"

"+
						  "文件类别："+rowData.resource_label+"

"+
						  "下载次数："+rowData.resource_download_times+"

"+
						  "下载时间："+rowData.time+"
"+
						  "");
	//alert();
	//$.messager.alert($('#detailsMsg').html());
	
$('#detailsMsg').dialog('open');
//alert();}
 这个detailMsg就是前面定义的

class="easyui-dialog" style="background-color: #eee;padding:20px;">

这个div，通过

$('#detailsMsg').dialog('open');

弹出这个窗体。同时可以看到
onDblClickRow:function(rowIndex,rowData){
						openDetailsMsgDia(rowData);
			},
 这有两个参数，index,和rowData,分别代表单击的 记录的行号，和数据。rowData是数组，通过rowData,属性名，获取该行该属性列的数据。

然后就完了吗？没有。如何关闭，如何初始化这个dialog呢，你只是告诉他里面有啥东西，但是这个对话框是什么样子，在哪显示还需要我们定义

function createDetailsMsg()
{
	$('#detailsMsg').dialog({
		title:'详细信息',
		width:400,
		height:400,
		left: 250,
		top:10,
		collapsible:true,
		closed:true
		,buttons:[{
			text:'关闭',
			iconCls:'icon-cancel',
			handler:function(){
				$('#detailsMsg').dialog('close');
			}
		}]
	});
}

那么谁来执行这个初始化函数呢，由window.onload来执行。

window.onload = function(){

	createDetailsMsg();
	createListData();
}

把对控件的初始化放在这里面.

4.实现删除功能:

 

 toolbar: [{ 
	            text: '添加', 
	            iconCls: 'icon-add', 
	            handler: function() { 
	                openDialog("add_dialog","add"); 
	            } 
	        }, '-', { 
	            text: '修改', 
	            iconCls: 'icon-edit', 
	            handler: function() { 
	                openDialog("add_dialog","edit"); 
	            } 
	        }, '-',{ 
	            text: '删除', 
	            iconCls: 'icon-remove', 
	            handler: function(){ 
	                deleteRecord(); 
	            } 
	        }], 

细心地朋友会发现，我们还为这个数据表格定义了几个工具，增删改。就拿最简单的删除做一个例子吧。首先当用户单击删除时，会调用deleteRecord()

function deleteRecord()
{
	var row  = $("#listdata").datagrid('getSelected');
	/*for(var i=0;i

var row  = $("#listdata").datagrid('getSelected');

获取到用户点击的项的记录。目前只支持单行选择。

然后ajax异步删除，成功后告诉用户data.msg,这个msg同样是json的键名，data是程序员从后台传回的数据，data.msg，就是查找json中，键名为msg的数据。

失败调用失败处理函数

 $.messager.alert('系统提示','删除失败，回到登录界面','warning',function(){
							 location.href = '{项目名称}/index.jsp';
						 }*/);

2.技术没有尽头，步骤永远有后续！