基于easyui的CMS系统的小结

Posted 2022-12-06 yuhaiqiang_123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于easyui的CMS系统的小结相关的知识，希望对你有一定的参考价值。

前言

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

1.使用步骤

1.加载js

<span style="white-space:pre">	</span><link rel="stylesheet" type="text/css" href=<span style="color:#ff0000;">"js</span>/jquery-easyui-1.4.4/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href=<span style="color:#ff0000;">"js</span>/jquery-easyui-1.4.4/themes/icon.css">
	<link rel="stylesheet" type="text/css" href=<span style="color:#ff0000;">"</span><span style="background-color: rgb(192, 192, 192);"><span style="color:#ff0000;">js</span>/</span>jquery-easyui-1.4.4/demo/demo.css">
	<script type="text/javascript" src="<span style="color:#ff0000;">js/</span>jquery-easyui-1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="<span style="color:#ff0000;">js/</span>jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

2.注意

我用红色标出的部分，由于我没有注意，在js前加了一个“/”反斜线，所以这些文件一直没有加载上，但是我用ctrl+鼠标，可以定位到这些文件，我用的是 myeclipse8.5，而且去掉斜线后，反而无法定位到制定文件了，貌似很矛盾，很纠结。 js，所在目录在webroot下。但是还是去掉斜线，否则部署后找不到这些js文件，至于原因不详。下下面个问题更神奇了，我定义了一个eaysui的table控件，一直显示不出来漂漂亮亮的格式，原因是我所加的eaysui的table在我之前定义的普通table之中。一开始还是使不得删除之前的界面。一狠心删掉了。结果显示正常了。而且比以前更好看了。

3.定义组件

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

 <div><span style="white-space: pre;"> <table id="listdata" title="My Users" <span style="color:#ff0000;"><strong><em>class="easyui-datagrid"</em></strong></span> style="width:100%;height:100%"
<span>				</span>>
<span>			</span><thead>
<span>				</span><tr>
<span>					</span><th field="download_id">下载ID</th>
<span>					</span><th field="user_id" width="10%">用户ID</th>
<span>					</span><th field="username" width="15%">用户昵称</th>
<span>					</span><th field="resource_name" width="30%">资源名称</th>
<span>					</span><th field="resource_label" width="15%">用户标签</th>
<span>					</span><th field="resource_download_times" width="5%">下载次数</th>
<span>					</span><th field="time" width="25%">时间</th>
<span>				</span></tr>
<span>			</span></thead>
<span>		</span></table>
<span>		</span><!-- <div id="toolbar">
<span>			</span><a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
<span>			</span><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
<span>			</span><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
<span>		</span></div> -->


<span>		</span><div id="detailsMsg" <span style="color:#ff0000;"><strong><em>class="easyui-dialog" </em></strong></span>style="background-color: #eee;padding:20px;">
<span>		</span></div>
</span></div><div><span style="white-space: pre;">
</span></div>

注意我加上红色的部分，就是一个声明。声明为一个数据表格，一个为对话框。展示下效果
还很不错的。有点意思了。但是数据是不会平白无故跑上去的，至少得加个url吧。还有添加，修改，删除在哪里加的？ 好，继续上源代码

function createListData()
	$('#listdata').datagrid(
			title:'文件下载列表' ,
	               iconCls:'icon-edit',//图标 
	               striped: true,
			<span style="color:#ff0000;"><strong><em>/*url:"DownloadList!queryByPage.action",*/</em></strong></span>
			nowrap:"true",
			loadMsg:"数据正在加载，请稍候",
		       fitColumns:"true",
		       singleSelect:"false",
	                collapsible:false,//是否可折叠的 
	                fit: true,//自动大小 
	                remoteSort:false,  
	               idField:'fldId',
	                rownumbers:true,//行号 
			pagination:true,<em><strong><span style="color:#ff0000;">//分页</span></strong></em>
	 		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 条记录'
			,<span style="color:#ff0000;">onSelectPage:function(pageNumber,pageSize)
					getData(pageNumber,pageSize);
					
		        </span>
			
	    ); 
	<span style="color:#ff0000;">getData(1,5);</span>

这个js函数就是初始化datagrid的。我捡重点的说一下

1.url

<span style="color:#ff0000;"><strong><em><span style="white-space:pre">	</span>url:"DownloadList!queryByPage.action"</em></strong></span>

<span style="color:#ff0000;"><strong><em><span style="white-space:pre">	</span>加上这句，在datagrid初始化时，就会自动去执行这个url,也就是去执行这个action，后面可以通过&加参数</em></strong></span>

<em><span style="color:#ff0000;">   </span>至于数据如何传回来。以什么格式。一会说</em>

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 条记录'
			,<span style="color:#ff0000;">onSelectPage:function(pageNumber,pageSize)
					getData(pageNumber,pageSize);
					
		        </span>
			
	    );

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

那么分页是否还需要做什么呢。需要后台的支持，也就是说，每一次更改页码，都要向后台传即将显示的页数，以及每页的个数，同时，由于后台每次向前台只传送了一页的数据，那么前台如何知道总页数，总条数是多少呢，同样后台需要告诉前台，总条数多少。由于每页个数由前台指定，所以后台不用传总页数。那么数据交换的格式是什么。json
上后台代码：

<span style="white-space:pre">		</span>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();
			<span style="white-space:pre">	</span>    <span style="font-size:24px;color:#ff0000;">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();
			</span><span style="font-size:24px;color:#3333ff;">jsonObject.put("total", downloadService.getCountsAll());
			jsonObject.put("rows", jsonList);</span><span style="font-size:24px;color:#ff0000;">
			//jsonObject.
			out.print(jsonObject);</span>
			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) 
	<span style="color:#ff0000;"> 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 "";
	 </span>
	 

	 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()函数调用，而且貌似还有这么一句话

<span style="color:#ff0000;">onSelectPage:function(pageNumber,pageSize)
					getData(pageNumber,pageSize);
					
		        </span>

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

function getData(pageNumber,pageSize)

	$.ajax(
		dataType:'json',
		url:'DownloadList!queryByPage.action',
		<span style="color:#ff0000;">data:pageSize:pageSize,pageNumber:pageNumber,</span>
		type:'post',
		success:function(data,status)
			<span style="color:#ff0000;">$('#listdata').datagrid('loadData',data);
			$("#listdata").datagrid('reload');</span>
		,
		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("<br><br><font size='3' color='black'>"+
						  "下载记录ID："+rowData.download_id+"<br><br>"+
						  "用户名："+rowData.username+"<br><br>"+
						  "用户ID："+rowData.user_id+"<br><br>"+
						  "文件名称："+rowData.resource_name+"<br><br>"+
						  "文件类别："+rowData.resource_label+"<br><br>"+
						  "下载次数："+rowData.resource_download_times+"<br><br>"+
						  "下载时间："+rowData.time+"<br>"+
						  "</font>");
	//alert();
	//$.messager.alert($('#detailsMsg').html());
	<pre name="code" class="html">$('#detailsMsg').dialog('open');

//alert();

这个detailMsg就是前面定义的 <div id="detailsMsg" class="easyui-dialog" style="background-color: #eee;padding:20px;"> </div> 这个div，通过

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

弹出这个窗体。同时可以看到<pre name="code" class="html">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',
			<span style="color:#ff0000;">handler:function()
				$('#detailsMsg').dialog('close');
			</span>
		]
	);

那么谁来执行这个初始化函数呢，由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', 
	           <span style="color:#ff0000;"> handler: function() 
	                deleteRecord(); 
	             </span>
	        ],

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

</pre><div><pre name="code" class="html">function deleteRecord()

	<span style="color:#ff0000;">var row  = $("#listdata").datagrid('getSelected');</span>
	/*for(var i=0;i<hasSelectedRows.length-1;i++)
		idList += hasSelectedRows[i].download_id+",";
	
	idList += hasSelectedRows[hasSelectedRows.length-1].download_id;*/
	
	if(row)
		var download_id = row.download_id;
		$.messager.confirm('系统提示','你确定要删除这一条记录吗',function(btn)
			if(btn)
				$.ajax(
					dataType:'json',
					url:'DownloadList!deleteRecord.action',
					data:download_id: download_id,
					type:'post',
					success:function(data,status)
						$.messager.alert('系统提示',data.msg,'info');
						$("#tt2").datagrid('reload');
					,
					error:function(data,status)
						
						 $.messager.alert('系统提示',data.msg+status,'warning'/*,function()
							 location.href = '/index.jsp';
						 */);
					 
				);
			
		);
		else
			$.messager.alert('系统提示','请选择要删除的用户','warning');

<span style="color:#ff0000;">var row  = $("#listdata").datagrid('getSelected');</span>

获取到用户点击的项的记录。目前只支持单行选择。然后ajax异步删除，成功后告诉用户data.msg,这个msg同样是json的键名，data是程序员从后台传回的数据，data.msg，就是查找json中，键名为msg的数据。失败调用失败处理函数

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

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

以上是关于基于easyui的CMS系统的小结的主要内容，如果未能解决你的问题，请参考以下文章

easyui tabs 操作

easyui的datagrid分页写法小结

八年工作小结，以及读书笔记的序

EasyUI问题小结（不定期更新·······）

jquery easyui treegrid使用小结二

国外比较好的几个的Php开源建站平台小结