一、ComboGrid
扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。
这东西其实就是下拉框中出现一个datagrid
依赖关系
combo
datagrid
所谓的键盘导航支持。
//例一 html 方式直接配置 <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;" data-options=" panelWidth:450, value:‘006‘, idField:‘id‘, textField:‘userName‘, url:‘UserServlet6‘, columns:[[ {field:‘userName‘,title:‘用户名‘,width:60}, {field:‘password‘,title:‘密码‘,width:100}, {field:‘note‘,title:‘备注‘,width:120}, {field:‘userId‘,title:‘用户账号‘,width:100} ]] "> </select>
//例二 使用javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。 <input id="cc" name="dept" value="01" /> $(function(){ $(‘#cc‘).combogrid({ panelWidth:450, value:‘006‘, idField:‘userId‘, textField:‘userName‘, url:‘UserServlet6‘, columns:[[ {field:‘userName‘,title:‘用户名‘,width:60}, {field:‘password‘,title:‘密码‘,width:100}, {field:‘note‘,title:‘备注‘,width:120}, {field:‘userId‘,title:‘用户账号‘,width:100} ]] }); });
//例三 自动完成功能 <input id="cc" name="dept" value="01" /> $(function(){ $(‘#cc‘).combogrid({ delay: 500, mode: ‘remote‘, url: ‘UserServlet6‘, //注意,在服务端,要接收q这个参数,再根据q进行模糊查询 idField: ‘id‘, textField: ‘userName‘, columns: [[ {field:‘userName‘,title:‘用户名‘,width:60}, {field:‘password‘,title:‘密码‘,width:100}, {field:‘note‘,title:‘备注‘,width:120}, {field:‘userId‘,title:‘用户账号‘,width:100} ]] }); });
二、 Tree
使用$.fn.tree.defaults重写默认值对象。
依赖关系
draggable
droppable
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。
以下显示的元素将被用作树节点嵌套在<ul>元素中。
在给tree加图标的时候,遇到了加不上的问题,实测发现,这两句的顺序必须按下面这样, 反了不行。
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/jquery-easyui-1.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/jquery-easyui-1.4/themes/icon.css">
//例一 <ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul>
//例二 <ul id="tt" class="easyui-tree"> <li> <span>用户管理</span> <ul> <li><span>用户添加</span></li> <li><span>用户维护</span></li> </ul> </li> <li> <span>商品管理</span> <ul> <li><span>商品添加</span></li> <li><span>商品维护</span></li> </ul> </li> <li> <span>订单管理</span> </li> </ul>
//例三 使用javascript方式加载 <ul id="tt"></ul> $(‘#tt‘).tree({ animate:true, checkbox:true, cascadeCheck:false, onlyLeafCheck:true, lines:true, dnd:true, url:‘tree_data1.json‘ }); [ { "id":1, "text":"用户管理", "children": [ {"id":"11","text":"用户添加"},{"id":"12","text":"用户维护"},{"id":"13","text":"用户删除"} ] }, { "id":2, "text":"商品管理", "children": [ {"id":"21","text":"商品添加"},{"id":"22","text":"商品维护"},{"id":"23","text":"商品删除"} ] } ]
//例四 使用javascript方式加载 <ul id="tt"></ul> $(‘#tt‘).tree({ animate:true, //加一个上渐渐收起或滑出的效果 checkbox:true, //cascadeCheck:false, //级联选择 onlyLeafCheck:true, //只在叶子结点显示勾选框 lines:true, dnd:true, //可移动 url:‘tree_data1.json‘ }); [ { "id":0, "text":"全部功能", "children": [ { "id":1, "text":"用户管理", "iconCls":"icon-save", //图标 "state":"closed", //关闭 "attributes":{ //给它加一些附加属性 "url":"/demo/book/abc", "price":100 }, "children": [ {"id":"11","text":"用户添加"},{"id":"12","text":"用户维护"},{"id":"13","text":"用户删除"} ] }, { "id":2, "text":"商品管理", "iconCls":"icon-remove", "state":"closed", "children": [ //勾选 {"id":"21","text":"商品添加","checked":true},{"id":"22","text":"商品维护"},{"id":"23","text":"商品删除"} ] } ] } ]
三、Tree 的常用方法
== getRoot
$("button").click(function(){
var rootNode=$("#tt").tree("getRoot");
alert(rootNode.text); //得到"全部功能" 四个字
console.info(rootNode);
});
== getChecked (state) //获取所有选中的节点。‘state‘可用值：‘checked‘,‘unchecked‘,‘indeterminate‘。如果‘state‘未指定，将返回‘checked‘节点
var nodes = $(‘#tt‘).tree(‘getChecked‘); // get checked nodes var nodes = $(‘#tt‘).tree(‘getChecked‘, ‘unchecked‘); // 获取未选择节点 var nodes = $(‘#tt‘).tree(‘getChecked‘, ‘indeterminate‘); // 获取不确定的节点
//例子 取出所有选中节点的 id 和 text $("button").click(function(){ var nodes = $(‘#tt‘).tree(‘getChecked‘); //只取选中节点 $.each(nodes,function(){ alert(this.text); alert(this.id); if(this.attributes){ alert(this.attributes.url); //demo/book/abc //注意,对于没有这些属性的结果,将报错 alert(this.attributes.price); //100 alert(this.attributes.jiangyou); } }) })
四、异步树控件
树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。
<ul class="easyui-tree" data-options="url:‘get_data.php‘"></ul>
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为‘id‘，通过URL发送到服务器上面检索子节点。
下面是从服务器端返回的数据。
[{ "id": 1, "text": "Node 1", "state": "closed", "children": [{ "id": 11, "text": "Node 11" },{ "id": 12, "text": "Node 12" }] },{ "id": 2, "text": "Node 2", "state": "closed" }]
重点:
每个节点都有如下属性
id： //节点ID,对加载远程数据很重要
text：显示的节点文本。
iconCls：显示的节点图标CSS类ID。
checked：该节点是否被选中。
state：节点状态，‘open‘ 或 ‘closed‘。
attributes：绑定该节点的自定义属性。
target：目标DOM对象
===对应的 MenuInfo 类
class MenuInfo{ id menuName url target pic parentId ... }
class MenuInfo { id, text, //menuName iconCls //pic checked state, Map<String,Object>attributes parentId }
easyui 的 tree + struts 见视频
1) 页面
$(function(){ $("#menuTree").tree({ //animate:true, //加一个上渐渐收起或滑出的效果 //checkbox:true, //cascadeCheck:false, //级联选择 //onlyLeafCheck:true, //只在叶子结点显示勾选框 lines:true, //dnd:true, //可移动 url:"menuAction_getMenuTree.action", onLoadSuccess:function(){ //$("#menuTree").tree("expandAll"); 展开全部结点 //指定展开第二个节点 var nodeList=$("#menuTree").tree("getRoots"); $("#menuTree").tree("expand",nodeList[1].target); //处理点击以后,显示选项卡 $("#menuTree a").click(function() { var href=$(this).attr("href"); var tabTitle =$(this).text(); //超链上的文本 var iconCls= $(this).attr("iconCls"); if($("#centerDiv").tabs("exists",tabTitle)){ $("#centerDiv").tabs("select",tabTitle); } else{ $("#centerDiv").tabs("add",{ title:tabTitle, closable:true, iconCls:iconCls, content:"<iframe style=‘border:0;width:100%;height:100%‘ src=‘"+href+"‘> </iframe>" }); } return false; //防止超链接提交 }); } }); });
2) MenuAction
public class MenuAction extends BaseAction { //继承自 BaseAction (对request 进行了封装) private MenuDao _menuDao=new MenuDao(); private List<MenuInfo> menuList; //它是以json方式返回的(需要在strtus.xml中进行配置) //查询树菜单 public String getMenuTree(){ String menuId =request.getParameter("id"); //这个id是 树控件自动传过来的 if(StrUtil.isNullOrEmpty(menuId)){ menuId="0"; } int parentId=Integer.parseInt(menuId); menuList= _menuDao.getMenuTree(parentId); System.out.println("menuList"+menuList.size()); return "menutree_success"; }
3) MenuDao
public class MenuDao { //根据菜单id查询子菜单 public List<MenuInfo> getMenuTree(int parentId) { List<MenuInfo> menuList=new ArrayList<MenuInfo>(); Connection conn =null; PreparedStatement stm=null; ResultSet rs=null; try { conn=DBUtil.getConn(); String sql="select * from menuInfo where parentid =?"; stm=conn.prepareStatement(sql); stm.setInt(1, parentId); rs=stm.executeQuery(); while(rs.next()){ MenuInfo m=new MenuInfo(); m.setId(rs.getInt("id")); m.setIconCls(rs.getString("iconCls")); m.setParentId(rs.getInt("parentId")); //做重点处理 if(getSubMenuCount(m.getId())>0){ m.setText(rs.getString("menuName")); m.setState("closed"); //重要 } else{ m.setState("open"); //重要 String menuContent=
"<a iconCls=‘"+m.getIconCls()+"‘ href=‘"+rs.getString("url")+"‘ >"+rs.getString("menuName")+"</a>"; m.setText(menuContent); } Map<String ,Object> arrtibutes =new HashMap<String, Object>(); arrtibutes.put("url", rs.getString("url")); arrtibutes.put("jiangyou", "aaabbbbcccc"); arrtibutes.put("wushu", "无数"); m.setAttributes(arrtibutes); menuList.add(m); } } catch (Exception e) { e.printStackTrace(); }finally{ DBUtil.close(rs, stm, conn); } return menuList; } //查询子菜单的个数 private int getSubMenuCount(int parentId) { int result=0; Connection conn=null; PreparedStatement stm=null; ResultSet rs=null; try { conn=DBUtil.getConn(); String sql="select count(*) from menuInfo where parentId=?"; stm=conn.prepareStatement(sql); stm.setInt(1, parentId); rs=stm.executeQuery(); if(rs.next()){ result=rs.getInt(1); } } catch (Exception e) { e.printStackTrace(); }finally{ DBUtil.close(rs, stm, conn); } return result; } }
4) 配置文件 tree_conf.xml
<package name="p_tree" namespace="" extends="json-default"> //关键,要继承 json-default ,要引 struts2-json-plugin-2.3.16.1.jar <action name="menuAction_*" class="cat.action.MenuAction" method="{1}"> <result name="menutree_success" type="json" > <param name="root">menuList</param> //root 是固定写法 ,menuList 是要返回的数据.它会自动的转成json类型(不用我们手工处理) </result> </action> </package>
五、datagrid 在struts 中的应用 (ajax)
导入 struts2-json-plugin-2.3.16.1.jar
//1) user_manage.jsp $(function(){ $(‘#table1‘).datagrid({ url:‘userAction_manage‘, columns:[[ {field:‘userName‘,title:‘用户名‘,width:100}, {field:‘password‘,title:‘密码‘,width:100}, {field:‘note‘,title:‘备注‘,width:100,align:‘right‘} ]] , pagination:true, pageSize:5, pageList:[5,10,15] }); }); <table id="table1"> </table>
//2) UserAction public class UserAction extends BaseAction{ private UserDao _userDao=new UserDao(); private Map<String,Object> jsonMap; //这个map ,是要返回的数据(会被自动转成json格式) //..对生应的 get set 方法 //分页查询用户列表 public String manage(){ int pageSize= Integer.parseInt(request.getParameter("rows")); int pageIndex=Integer.parseInt(request.getParameter("page")); int rowCount=_userDao.getUserCount(); PageInfo pageInfo =PageUtil.getPageInfo(pageSize, rowCount, pageIndex); List<UserInfo> userList=_userDao.getUserList(pageInfo); jsonMap=new HashMap<String,Object>(); jsonMap.put("total", rowCount); //要这样处理 jsonMap.put("rows", userList); //要这样处理 return "manage_success"; } ... }
//3) 配置文件 user-conf.xml <package name="p_user" namespace="" extends="json-default"> <action name="userAction_*" class="cat.action.UserAction" method="{1}"> <result name="manage_success" type="json" > <param name="root">jsonMap</param> //注意,这里返回的是 map,不是那个userList </result> </action> </package>