一、ComboGrid
扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。
这东西其实就是下拉框中出现一个datagrid
依赖关系
combo
datagrid
所谓的键盘导航支持。
//例一 html 方式直接配置
//例二 使用Javascript通过已经定义的或标签来创建数据表格下拉框。
$(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}
]]
});
});
//例三 自动完成功能
$(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
树控件使用
- 元素定义。标签能够定义分支和子节点。节点都定义在
- 列表内的
- 元素中。
以下显示的元素将被用作树节点嵌套在
- 元素中。
在给tree加图标的时候,遇到了加不上的问题,实测发现,这两句的顺序必须按下面这样, 反了不行。
//例一
Folder
Sub Folder 1
File 12
File 13
File 2
File 3
File21
//例二
用户管理
- 用户添加
- 用户维护
商品管理
- 商品添加
- 商品维护
订单管理
//例三 使用javascript方式加载
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方式加载
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数据来填充树并完成异步请求。
树控件读取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 类
classMenuInfo{
id
menuName
url
target
pic
parentId
...
}
classMenuInfo {
id,
text,//menuName
iconCls //pic
checked
state,
Mapattributes
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:" "});
}return false; //防止超链接提交
});
}
});
});
2) MenuAction
public class MenuAction extends BaseAction { //继承自 BaseAction (对request 进行了封装)
private MenuDao _menuDao=newMenuDao();private List menuList; //它是以json方式返回的(需要在strtus.xml中进行配置)//查询树菜单
publicString 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 classMenuDao {//根据菜单id查询子菜单
public List getMenuTree(intparentId) {
List menuList=new ArrayList();
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=newMenuInfo();
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=
""+rs.getString("menuName")+"";
m.setText(menuContent);
}
Map arrtibutes =new HashMap();
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);
}returnmenuList;
}//查询子菜单的个数
private int getSubMenuCount(intparentId) {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);
}returnresult;
}
}
4) 配置文件 tree_conf.xml
//关键,要继承 json-default ,要引 struts2-json-plugin-2.3.16.1.jar
menuList //root 是固定写法 ,menuList 是要返回的数据.它会自动的转成json类型(不用我们手工处理)
五、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]
});
});
//2) UserAction
public class UserAction extendsBaseAction{private UserDao _userDao=newUserDao();private Map jsonMap; //这个map ,是要返回的数据(会被自动转成json格式)//..对生应的 get set 方法//分页查询用户列表
publicString 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 userList=_userDao.getUserList(pageInfo);
jsonMap=new HashMap();
jsonMap.put("total", rowCount); //要这样处理
jsonMap.put("rows", userList); //要这样处理
return "manage_success";
}
...
}
//3) 配置文件 user-conf.xml
jsonMap //注意,这里返回的是 map,不是那个userList
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
