从JStree复选框列表创建HTML post表单的值

时间:2010-09-06 08:39:09

标签: jquery webforms checkbox jstree

我刚开始使用JQuery和Javascript,并调整嵌套的复选框输入集以利用jstree复选框行为。在意识到每个项目必须是由jstree代码识别的锚标记之后,我现在不确定如何从POST表单提交的项目生成值。以前它们是复选框输入,我希望能够保持这种方式,以便在关闭Javascript时表单仍然可以正常运行。在锚标记中包装输入导致每个项目有两个复选框,一个由JStree设置样式并由行为控制,另一个被忽略。我认为这不是方向。

将非常感激地收到有关如何实现这一目标的任何建议。

我使用以下配置代码启动JStree -

$(document).ready(function()
{
    $('.nested-category').jstree({ 
        ui: { theme_name : "checkbox" },
        plugins : ["checkbox", "themes", "html_data", "ui" ]
    });
}
);

这是JStree代码影响的表单的简化版本,但不能提交值。

<form method="post" action="">

<div class="nested-category">

<ul class="">
    <li><a href="#">group1</a>
        <ul>
            <li><a href="#">subgroup1</a>
                <ul>
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                </ul>
            </li>
            <li><a href="#">subgroup2</a>
                <ul>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                    <li><a href="#">item6</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">group2</a>
        <ul>
            <li><a href="#">subgroup3</a>
                <ul>
                    <li><a href="#">item7</a></li>
                    <li><a href="#">item8</a></li>
                    <li><a href="#">item9</a></li>
                </ul>
            </li>
            <li><a href="#">subgroup4</a>
                <ul>
                    <li><a href="#">item10</a></li>
                    <li><a href="#">item11</a></li>
                    <li><a href="#">item12</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

<input class="form-submit" type="submit" name="submit" value="submit">
</form>

2 个答案:

答案 0 :(得分:1)

我通过在每个锚标记内添加输入元素来解决这个问题,这些输入元素被一些额外的Javascript隐藏。当检查jsTree生成的输入时,jsTree脚本中的几行还会向输入添加“checked”,反之亦然,如果输入返回到选中的表单。如果Javascript被关闭,输入复选框在HTML表单中正常工作。如果有人想要进一步解释,我可以发布示例和对jsTree所做的更改。

我不怀疑这是解决问题的一种摇摇欲坠的方式,但这就是我目前处于未开发的网络开发状态的地方!

答案 1 :(得分:0)

就个人而言,我会使用AJAX。 $.post

给锚点一个ID,在jsTree中我确定有一个方法可以获得所有选择的ID