现在有个ext树 jsp页面如何提交树里的被选中的节点 check
[code="java"]
var check = [];
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = "/dtjcsy/pages/js/ext/resources/images/default/s.gif";
var Tree= Ext.tree;
var loader = new Ext.tree.TreeLoader;
var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
frame:false,
border:false,
useArrows:true,
checkModel:'cascade',
onlyLeafCheckable:false,
rootVisible:true,
bodyStyle:'background-color:#b4d5f5',
containerScroll: true,
listeners:{
checkchange:function(node,checked){
if(checked){
var id = node.attributes.id;
check.push(id);
}
}
},
loader: new Tree.TreeLoader({
dataUrl:'rightAction.action',
baseParams:{roleId:1},
baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }
})
});
var root =new Tree.AsyncTreeNode({
text:"可用权限列表",
draggable:false,
id:'0'
});
tree.setRootNode(root);
tree.render();
root.expand();
});
[/code]
jsp页面
[code="java"]
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>添加角色</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<SCRIPT type="text/javascript" src="../js/TreeCheckNodeUI.js"></SCRIPT>
<script type="text/javascript" src="exttree.js"></script>
<style type="text/css">
<body>
<form action="roleAction.action" id="form1" method="post">
<input type="hidden" name="rwm.submitFlag" value="add">
<input type="hidden" name="checks" id="checks" >
<table width="100%" cellpadding="0" cellspacing="1">
<tr>
<td height="23px" background="/dtjcsy/pages/images/tab_05.gif"
width="100%">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="15" width="100%"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="618" border="0" cellpadding="2" cellspacing="1"
align="center" bgcolor="#333333" height="364">
<tr>
<td height="28" align="center" bgcolor="#b4d5f5">
添加角色信息
</td>
</tr>
<tr>
<td bgcolor="#b4d5f5">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
bgcolor="#b4d5f5">
<tr>
<td width="40%" bordercolor="#333333">
<table width="40%" border="0" cellpadding="0"
cellspacing="0" height="408" >
<tr>
<td valign="top">
<table width="264" height="157">
<tr>
<td class="STYLE6" >
角色名称:
</td>
<td class="td1">
<input type="text" name="tbr.rolename" border="0" class="input1" />
</td>
</tr>
<tr>
<td class="STYLE6">
角色描述:
</td>
<td class="td1">
<textarea rows="4" cols="17" name="tbr.roledes"></textarea>
</td>
</tr></table>
</td></tr>
</table>
</td>
<td class="STYLE6">
<table border="0" cellspacing="0" cellpadding="0"
width="358" id="funTable" height="408" >
<tr>
<td valign="top">
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" align="center" bgcolor="#b4d5f5">
<input type="submit" value="确 定" />
<input type="reset" value="重 置"
onclick="form1.reset" />
<input type="button" value="取 消"
onclick="top.document.all('right').src='/dtjcsy/pages/sys/RoleMsg.jsp'">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
[/code]
[quote]
我的意思 是 我选择了 然后 又取消了 结果是 取消后它还是传后台了
[/quote]
怎么会呢？[code="java"]
if(checked){
Ext.DomHelper.append('example-form' , {tag: 'input', name: 'id', type : 'hidden' , value: id});
}else{
var inputs = Ext.DomQuery.jsSelect('input[value=' + id + ']' , 'example-form');
for(var i = 0 , len = inputs.length ; i < len ; i++) {
form.dom.removeChild(inputs[i]);
}
}
[/code]
这一段的逻辑就是如果选中就在form里面增加相应的input，如果取消选择就从form里面把input删除，那么最终form里面只包含选中的节点对应的input，提交到服务器也是只保护选择的。
[url]http://www.iteye.com/problems/70730[/url]这个帖子回答了这个问题。你看看。
获取tree节点选中的值，和楼上那个问题里，我的回答一样，采用监听事件的方式，有点变化的是，这里你可以把选中的值动态的添加到你下面的form的“checks”的input上，这样就提交了，不需要保存一个全局变量。
[quote]
监听事件的问题是 只有在我点击选中了节点后它才添加到check里面 我从后台加载后 有些是已经选中的（可能会做修改） 这些id怎么收集
[/quote]
也可以监听事件啊！你可以监听TreeLoader的load事件，这个事件就是在请求的数据返回后的事件，你可以在这里获得默认选中的check，然后也同样加到form里面就可以了。
[code="java"]
/*!
Ext.onReady(function(){
var form = Ext.get('example-form');
var tree = new Ext.tree.TreePanel({
renderTo:'tree-div',
title: 'My Task List',
height: 300,
width: 400,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
frame: true,
root: {
nodeType: 'async'
},
// auto create TreeLoader
loader : new Ext.tree.TreeLoader({
dataUrl:'check-nodes.json',
requestMethod : 'GET',
listeners : {
load : function(loader , node , response) {
//解析response，把选中的节点找出来，然后按checkchange里面的方式加到form里面去
}
}
}),
listeners: {
'checkchange': function(node, checked){
var id = node.attributes.id;
if(checked){
Ext.DomHelper.append('example-form' , {tag: 'input', name: 'id', type : 'hidden' , value: id});
}else{
var inputs = Ext.DomQuery.jsSelect('input[value=' + id + ']' , 'example-form');
for(var i = 0 , len = inputs.length ; i < len ; i++) {
form.dom.removeChild(inputs[i]);
}
}
}
},
buttons: [{
text: 'Get Completed Tasks',
handler: function(){
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show({
title: 'Completed Tasks',
msg: msg.length > 0 ? msg : 'None',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
});
tree.getRootNode().expand(true);
});
[/code]
这个是我把extjs提供的例子,check-tree.html，改动了一下，页面上增加一个普通的form，上面增加checkchange和load监听做的，你可以试试。
[quote]
如 我点了子节点 父节点也选中了 或者点了父节点 所有的子节点都选中了 但是提交的 只是 我选的那个节点一个的id 是不是要改
[/quote]
父子节点通过当前node是可以访问到的，所以要让它们选中也没问题，只需要遍历一下。
[code="java"]
listeners: {
'checkchange': function(node, checked){
var parentNode = node.parentNode , child = node.childNodes;
//这样父子节点不到获取到了吗？
var id = node.attributes.id;
if(checked){
Ext.DomHelper.append('example-form' , {tag: 'input', name: 'id', type : 'hidden' , value: id});
}else{
var inputs = Ext.DomQuery.jsSelect('input[value=' + id + ']' , 'example-form');
for(var i = 0 , len = inputs.length ; i < len ; i++) {
form.dom.removeChild(inputs[i]);
}
}
}
},
[/code]
[quote]
选择checkbox后 再取消选择 节点id还是传到后台
[/quote]
每次都提交所有被选中的节点就好了吧。我不知道你为什么要把取消节点也提交到后台，如果只是为了判断哪些节点要删除的话，完全没必要，因为你完全可以先把原来的节点状态全部取消，然后再按提交上了的节点状态更新。
如果是服务器端确实要知道哪个节点被取消，你也可以通过把提交上了的节点和已经保存的节点状态做一个对比，如果原来的节点中选中状态的节点不在提交上了的节点里面，那就说明它是从选中变成取消了。