easyui入门
一、什么是easyui
- easyui是基于jQuery、Angular.、Vue和React的用户界面组件的集合。
- easyui提供了构建现代交互式javascript应用程序的基本功能。
- 使用easyui,您不需要编写许多javascript代码,通常通过编写一些HTML标记来定义用户界面。
- 完整的HTML5网页框架。
- 使用easyui开发你的产品时可以大量节省你的时间和规模。
- easyui使用非常简单但功能非常强大。
二、jQuery EasyUI有以下特点:
1、基于jquery用户界面插件的集合
2、为一些当前用于交互的js应用提供必要的功能
3、EasyUI支持两种渲染方式分别为javascript方式(如:$(’#p’).panel({…}))和html标记方式(如:class=“easyui-panel”)
4、支持HTML5(通过data-options属性)
5、开发产品时可节省时间和资源
6、简单,但很强大
7、支持扩展,可根据自己的需求扩展控件
8、目前各项不足正以版本递增的方式不断完善
代码演示:
用到的src文件:
导入jquery-easyui-1.5.1:
Dao包:
MenuDao.Java:
1、查询数据库所有数据用于easyui的tree树形展示(但是直接得来的数据格式easyui不识别)
2、递归查询节点集合,形成子父节点关系,具备层次结构
3、转格式
package com.qiuwenfan.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.qiuwenfan.entity.TreeNode;
import com.qiuwenfan.util.JsonBaseDao;
import com.qiuwenfan.util.JsonUtils;
import com.qiuwenfan.util.PageBean;
import com.qiuwenfan.util.StringUtils;
/**
* 1、查询数据库所有数据用于easyui的tree树形展示(但是直接得来的数据格式easyui不识别)
* 2、递归查询节点集合,形成子父节点关系,具备层次结构
* 3、转格式
* @author qiuwenfan
*
*/
public class MenuDao extends JsonBaseDao {
/**
* List<TreeNode>加上ObjcetMapper可以转换成easyui的tree控件识别的json串
* @param map
* @param pageBean
* @return
* @throws Exception
*/
public List<TreeNode> listTreeNode(Map<String, String[]> map, PageBean pageBean) throws Exception{
List<Map<String, Object>> listMenu = this.listMenu(map, null);
List<TreeNode> listTreeNode = new ArrayList<TreeNode>();
this.listMapToListTreeNode(listMenu, listTreeNode);
return listTreeNode;
}
/**
* List<Map<String,Object>>
* ->【{Menuid:001,Menuname:学生管理,children:[]},{Menuid:001,Menuname:学生管理}】 ————多条数据
* 接下来要递归查询子节点的集合存入当前节点
*
* @param map
* @param pageBean
* @return
* @throws Exception
*/
public List<Map<String,Object>> listMenu(Map<String, String[]> map, PageBean pageBean) throws Exception{
String sql = "select * from t_easyui_menu where true ";
String id = JsonUtils.getParamVal(map, "Menuid");
if(StringUtils.isNotBlank(id)) {
sql += " and parentid="+id;
}else {
sql += " and parentid=-1";
}
return super.executeQuery(sql, pageBean);
}
/**
* 需要将后台数据库查出来的数据格式转换成前台easyUI所识别的数据
* @param map
* @param treeNode
* @throws Exception
*/
public void mapToTreeNode(Map<String,Object> map, TreeNode treeNode) throws Exception {
treeNode.