0

我有一个 mvc razo 应用程序。我想按需显示一个树视图并带有复选框。我尝试了 jquery-treeview，它显示了一个没有复选框的树视图。所以我尝试使用jquery的另一个插件aciTree。但它什么也没显示。

这是控制器 TreeView.cs

public virtual ActionResult Index()
    {

        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult GetCollectionWS(string root)
    {
        int? nodeId = (root == "source") ? (int?)null : Convert.ToInt32(root);
        Object[] liste = new Object[100];
        liste = DSClient.Views.Traitement.getTop(nodeId);
        List<testTree> nodes = new List<testTree>();
        for (int i = 0; (i < liste.Length && liste.ElementAt(i) != null);i++ )
        {
            bool leaf = false;
            nodes.Add(new testTree()
            {

                id = Convert.ToString(DSClient.Views.Traitement.GetNodeId(liste.ElementAt(i))),
                checkbox = true,
                label = liste.ElementAt(i).Handle,
                open = false,
                radio = false,
                hasChildren = true
            });
        }
        return Json(nodes);
    }

这是视图

<script type="text/javascript" src="js/jquery.aciPlugin.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/js /jquery.aciTree.core.js")">   </script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.aciTree.selectable.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.aciTree.checkbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.aciTree.radio.js")"></script>
     <div id="tree" class="aciTree"><div>
     <script> $(document).ready(function () {

                // init the tree
                $('#tree').aciTree({
                    jsonUrl: '@Url.Action("GetCollectionWS")',
                    checkbox: true,
                    checkboxName: 'checkbox1[]',


                });                   

              });

            </script>
           <script>
           $(function () {

                var log = $('.log div');

                 // write to log
                $('#tree,#tree-combined').on('acitree', function (event, api, item, eventName, options) {
                if (api.isItem(item)) {
                   log.prepend('<p>' + eventName + ' [' + api.getId(item) + ']</p>');
                  } else {
                 log.prepend('<p>' + eventName + ' [tree]</p>');
                     }
                  });

    $('.clear_log').click(function () {
        $('.log div').html('');
        return false;
    });

});
</script>

有人可以帮我吗？或者请给我有用的链接开源吗？当我在 post methode 上尝试断点时，我说没有返回到控制器，只有第一个方法被执行。

4

1 回答 1

1

您可以尝试为 jQuery dynatree 删除 aciTree 吗？

我分叉了现有的淘汰赛 + dynatree 以启用复选框。您应该能够通过 dynatree API 和 jQuery 本身来操作它们。

http://jsfiddle.net/richbryant/PWtjZ/

使用 ko 模板的 HTML 相当简单 -

<!-- ko if: initialized -->
<div data-bind="dynatree: {}">
  <ul style="display:none" data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>
</div>
<!-- /ko -->

<!-- ko ifnot: initialized -->
<span>Loading...</span>
<!-- /ko -->

<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>        
        <ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
    </li>
</script>

并且 js 变得有点复杂，因为很明显，它需要一些测试数据来运行。这里重要的一点是

ko.bindingHandlers.dynatree = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        setTimeout( function() { $(element).dynatree({checkbox: true})}, 0);
    }
};

希望有帮助。

于 2013-05-16T16:29:19.483 回答