使用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剃刀樹視圖

回答

相關問題