使用aciTree的MVC剃刀树视图

我有一个mvc razo应用程序。我想按需显示树形视图并带有checkbox.I尝试jquery-treeview显示树形视图没有复选框。所以我试图使用jQuery的其他插件aciTree。但它什么也没有显示。使用aciTree的MVC剃刀树视图

这是控制器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>

可以somone帮助我吗？或交我有用的链接开源吗？当我尝试后处理方法的断点时，我没有返回到控制器的remarque，只执行第一个方法。

来源

2013-04-27 Emna13

你可以尝试删除jQuery dynatree的aciTree吗？

我分出了一个现有的knockout + dynatree小提琴启用复选框。你应该可以通过dynatree API和jQuery本身来操作这些。

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

的HTML是相当简单的使用KO模板 -

<!-- 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变得有点复杂，因为很明显，它需要一些TESTDATA与运行。这里的重要一点是

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

希望有所帮助。

来源

2013-05-16 16:29:19

使用aciTree的MVC剃刀树视图

回答

相关问题