form提交js变量

现在有个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="确&nbsp;&nbsp;&nbsp;&nbsp;定" />
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="reset" value="重&nbsp;&nbsp;&nbsp;&nbsp;置"
                                    onclick="form1.reset" />
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="button" value="取&nbsp;&nbsp;&nbsp;&nbsp;消"
                                    onclick="top.document.all('right').src='/dtjcsy/pages/sys/RoleMsg.jsp'">
                            </td>

                        </tr>

                    </table>
                </td>
            </tr>

        </table>
    </form>
</body>

[/code]

6个回答

[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,提交到服务器也是只保护选择的。

获取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]
每次都提交所有被选中的节点就好了吧。我不知道你为什么要把取消节点也提交到后台,如果只是为了判断哪些节点要删除的话,完全没必要,因为你完全可以先把原来的节点状态全部取消,然后再按提交上了的节点状态更新。
如果是服务器端确实要知道哪个节点被取消,你也可以通过把提交上了的节点和已经保存的节点状态做一个对比,如果原来的节点中选中状态的节点不在提交上了的节点里面,那就说明它是从选中变成取消了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问