easyui高级控件02

最新推荐文章于 2019-07-31 15:10:17 发布

原创最新推荐文章于 2019-07-31 15:10:17 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在JSP中利用EasyUI库创建数据表格(datagrid)及对话框(dialog)，包括设置按钮及其事件处理，实现数据展示、编辑功能，并通过前后端交互完成数据的动态加载与修改。

1、datagrid控件
在上一篇博客中的基础上，在jsp文件夹内新增
在这里插入图片描述
代码如下
userManage类

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>人员信息管理界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/public/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/public/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/userManage.js"></script>
</head>
<body>
展示数据
<table id="dg"></table>
 
</body>
</html>

json

{"total":28,"rows":[
	{"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

这里因为我们连接的是t_easyui_user_version2，表，表如下所示在这里插入图片描述
所以新增的文件内就要以表的列名来命名
userManage.js类

$(function(){
	$('#dg').datagrid({    
	    url:'datagrid_data1.json',    
	    fit:true,
	    fitColumns:true,
	    pagination:true,
	    columns:[[    
	        {field:'uid',title:'id',width:100},    
	        {field:'uname',title:'用户名称',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'}    
	    ]]  ,
	    	toolbar: [{
	    		iconCls: 'icon-add',
	    		handler: function(){alert('增加按钮')}
	    	},'-',{
	    		iconCls: 'icon-edit',
	    		handler: function(){alert('编辑按钮')}
	    	},'-',{
	    		iconCls: 'icon-remove',
	    		handler: function(){alert('移除按钮')}
	    	}]
	});  
})

这里我们是增加了按钮以及按钮所对应的方法，行填充列填充以及分页条
效果展示
在这里插入图片描述

2、dialog控件
修改回显绑值，在userManage.js页面所编写

iconCls: 'icon-edit',
	    		handler: function(){
	    			$('#dd').dialog('open')
	    			var row= $('#dg').datagrid('getSelected');
	    			if(row){
	    				//数据回显   get_date.php是回填的数据
		    			$("#ff").form('load',row)
	    			}
	    			
	    		}

效果
在这里插入图片描述
添加的按钮

<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="ok()">保存</a>
<a href="#" class="easyui-linkbutton">关闭</a>
</div>

把按钮放在底部

buttons:'#bb'

效果如下
在这里插入图片描述
点击保存需要向后台发送请求，所要的方法

//向后端发送请求
function ok(){
	alert('ok');
	$('#ff').form('submit', {    
	    url:'...url',    
	    success:function(data){    
	        alert(data)    
	    }    
	});  
}

上面是前端的代码，

后端：数据表格加载以及修改方法
UserAction类编写：

package com.hutao.web;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.hutao.dao.UserDao;
import com.hutao.entity.TreeNode;
import com.hutao.util.PageBean;
import com.hutao.util.ResponseUtil;
import com.zking.framework.ActionSupport;

public class UserAction extends ActionSupport {

	private UserDao u=new UserDao();
	public String login(HttpServletRequest req, HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException {
		Map<String,Object> map=null;
		try {
			try {
                map=this.u.list(req.getParameterMap(),null).get(0);
			} catch (Exception e) {
				req.setAttribute("msg","这傻逼不存在");
				return "login";
			}
			if (map!=null && map.size() > 0) {
				StringBuilder sb=new StringBuilder();
					List<Map<String,Object>> menIdArr=this.u.listMenu(req.getParameterMap(),null);
				for (Map<String, Object> m : menIdArr) {
				sb.append(","+m.get("menuId"));
				}
				req.setAttribute("menuIds", sb.substring(1));
				return "index";
				}else {
					req.setAttribute("msg","这傻逼不存在");
					return "login";
				}
		} catch (Exception e) {
			}
		return "login";
	}
	
	//数据表格加载
public String list(HttpServletRequest req, HttpServletResponse resp) throws InstantiationException, IllegalAccessException, SQLException{
	PageBean pageBean=new PageBean();
	ObjectMapper om=new ObjectMapper();
	pageBean.setRequest(req);
	try {
		List<Map<String, Object>> list = this.u.list(req.getParameterMap(), pageBean);
		Map<String,Object> map=new HashMap<String,Object>();
		map.put("total",pageBean.getTotal());
		map.put("rows", list);
		ResponseUtil.write(resp,om.writeValueAsString(map));
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return null;
}
//修改方法
public String edit(HttpServletRequest req, HttpServletResponse resp) throws JsonProcessingException, Exception{
	try {
		int code = this.u.edit(req.getParameterMap());
		ObjectMapper om=new ObjectMapper();
		Map<String,Object> map=new HashMap<String,Object>();
		map.put("code",code);
		ResponseUtil.write(resp,om.writeValueAsString(map));
	} catch (NoSuchFieldException | SecurityException | IllegalArgumentException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return null;
}
}

效果
在这里插入图片描述
点击保存

就变成王五aa啦