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>

誰か助けてくれませんか?または、便利なリンクのオープン ソースを投稿してください。ポストメソッドでブレークポイントを試すと、コントローラーに返されないことがわかります。最初のメソッドのみが実行されます。

4

1 に答える 1

1

aciTree for jQuery 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 に答える