问题描述
现在有个ext树 jsp页面如何提交树里的被选中的节点 checkvar 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(); }); jsp页面<%@ 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"><html><head><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 {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;background: url('/dtjcsy/pages/images/bgdefault.gif');overflow: hidden;}.style1 {height: 22px;}.td1 {height: 22;background-color: #b4d5f5;font-size: 14px;}.input1 {width: 155px;}.STYLE6 {width: 100;height: 22px;background-color: #B4D5F5;font-size: 14px;text-align: center;}--></style><script type="text/javascript"></script></head><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></html> 问题补充：myali88 写道
解决方案
引用我的意思 是 我选择了 然后 又取消了 结果是 取消后它还是传后台了 怎么会呢？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]); } } 这一段的逻辑就是如果选中就在form里面增加相应的input，如果取消选择就从form里面把input删除，那么最终form里面只包含选中的节点对应的input，提交到服务器也是只保护选择的。
解决方案二：
引用如 我点了子节点 父节点也选中了 或者点了父节点 所有的子节点都选中了 但是提交的 只是 我选的那个节点一个的id 是不是要改 父子节点通过当前node是可以访问到的，所以要让它们选中也没问题，只需要遍历一下。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]); } } } }, 引用选择checkbox后 再取消选择 节点id还是传到后台 每次都提交所有被选中的节点就好了吧。我不知道你为什么要把取消节点也提交到后台，如果只是为了判断哪些节点要删除的话，完全没必要，因为你完全可以先把原来的节点状态全部取消，然后再按提交上了的节点状态更新。如果是服务器端确实要知道哪个节点被取消，你也可以通过把提交上了的节点和已经保存的节点状态做一个对比，如果原来的节点中选中状态的节点不在提交上了的节点里面，那就说明它是从选中变成取消了。
解决方案三：
/*! * Ext JS Library 3.3.1 * Copyright(c) 2006-2010 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */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);});这个是我把extjs提供的例子,check-tree.html，改动了一下，页面上增加一个普通的form，上面增加checkchange和load监听做的，你可以试试。
解决方案四：
引用监听事件的问题是 只有在我点击选中了节点后它才添加到check里面 我从后台加载后 有些是已经选中的（可能会做修改） 这些id怎么收集 也可以监听事件啊！你可以监听TreeLoader的load事件，这个事件就是在请求的数据返回后的事件，你可以在这里获得默认选中的check，然后也同样加到form里面就可以了。
解决方案五：
获取tree节点选中的值，和楼上那个问题里，我的回答一样，采用监听事件的方式，有点变化的是，这里你可以把选中的值动态的添加到你下面的form的“checks”的input上，这样就提交了，不需要保存一个全局变量。
解决方案六：
http://www.iteye.com/problems/70730这个帖子回答了这个问题。你看看。