一、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); //
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>