AJAXpost成功后如何调用Kendotreeview（服务器数据绑定类型）？

Question

这是我用来绑定的 Kendo 树视图

Html.Kendo().TreeView()
                .Name("TreeViewTemplateBiding")
                 .Events(events => events
            .Select("onSelect"))
                        .BindTo((IEnumerable<OrgChart.Models.NodeViewModel>)ViewBag.Tree, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
                           {
                               mappings.For<OrgChart.Models.NodeViewModel>(binding => binding.ItemDataBound((item, node) =>
                               {
                                   item.Id = node.Id;
                                   item.Text = node.Title;
                                   //item.Url = "/Organizational/Chart/" + node.Id;
                                   //item.Expanded = node.Expanded;
                               })
                       .Children(node => node.Children));
                           })
    )

而AJAX post用于获取onselect节点数据并发送给controller获取其子节点

<script>
function onSelect(e) {
    alert("hi");
    var data = this.text(e.node);
    alert(data);
     var a =  data.split("- ").pop(); 
    alert(a);
    $.ajax({
        url: '@Url.Action("Chart", "Organizational")',
        type: 'Post',
        dataType: 'json',
        data: { a : a },
        async: true,
        cache: false,
        success: function (data) {
            alert("sending");
            process(data);
        },
        error: function (data) {  }
    });
    $(document).ready(function () {
        treeview = $("#treeview").data("kendoTreeView");
    });
}
</script>

所以在成功posting之后我需要再次调用Kendo tree.

Answer 1

这不是一个确切的答案，但这是让 HierarchicalDataSource 为您做一些工作的一种方法。

注意：这是伪代码。没有验证的类型检查并拆分输入以获得 nodetype/nodeid.

简单树视图 Class

  public class TreeViewItem
    {
        //Collection item returned in he Hierarchical search
        public TreeViewItem()
        {
            CanSelect = true;
        }

        public string NodeID{get;set;}
        public string NodeText{ get; set; }        
        public bool HasChildren { get; set; }
        public bool CanSelect { get; set; }
        public string NodeImage { get; set; }
    }

控制器

//------------------------------------------------------------------------------------------------------
[OutputCache(NoStore = true, Duration = 0)]
 public ActionResult PerformHierarchicalSearch(string NodeID)
 {
     //This action returns the data as List<TreeViewItem> in json format to the browse view.
     //The view is configured as three treeviews that use the Kendo Hierarchical datasource
     //Requires a NodeID and HasChildren each time an item is expanded it returns a NodeID 
     //On the intial load NodeID is null so return all items for the root

    //When a treeview item is expanded it calls this action but this time the node ID will be in <ENTITY_ID>:<USER_TYPE> format ex: 10038:40
    //We split that out and determine what to load. For example all children of a selected parent.

    string[] kludge = NodeID.Split(':');
    int nodeID = Convert.ToInt32(kludge[0]);
    int nodeType = Convert.ToInt32(kludge[1]);

    List<TreeViewItem> items = new List<TreeViewItem>();

     switch (nodeType)
     {
         case 1:
             List<Type1> type1List = new Type1Controller().GetType1(nodeID).ToList();
             foreach (Type1 type1 in type1List)
                 items.Add(new TreeViewItem
                 {
                     NodeID = type1.TypeID.ToString() + ":1",
                     NodeText = type1.TypeName,
                     HasChildren = true,
                     NodeImage = "TYPE1"
                 });
             break;
         case 2:
             List<Type2> type1List = new Type2Controller().GetType2(nodeID).ToList();
             foreach (Type2 type1 in type2List)
                 items.Add(new TreeViewItem
                 {
                     NodeID = type2.TypeID.ToString() + ":2",
                     NodeText = type2.TypeName,
                     HasChildren = true,
                     NodeImage = "TYPE2"
                 });
             break;
     }
     if (items.Count == 0 )
         items.Add(new TreeViewItem { NodeID = Guid.NewGuid().ToString(), NodeText = "No Data", HasChildren = false, CanSelect = false, NodeImage = "" });

     return Json(items, JsonRequestBehavior.AllowGet);
 }
}

代码隐藏

<div id="treeview1" class="parentItem"></div>

<script id="treeview-navlink" type="text/kendo-ui-template">
    #if (item.CanSelect != 'null' && item.CanSelect==true)  { #
        <img src='@Url.Content("~/Images/Icons/16/Soft/")#: item.NodeImage #.png'+ alt='#: item.NodeImage #'/> <a href='\#' id= '#: item.NodeID #' class='entity-link' >#: item.NodeText #</a>    
    #}else{#
        <span class='dimText'>#: item.NodeText #</span>    
    #}# 
</script>



 <script type="text/javascript">

    var treeLoaded = false;

    ds1 = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: '@Url.Action("PerformHierarchicalSearch","Search")' ,
                dataType: "json",
                data: addData1
            }
        },
        schema: {
            model: {
                id: "NodeID",
                hasChildren: "HasChildren"
            }
        }
    });

    function addData1(d) {
        var treeview = $('#treeview1').data('kendoTreeView');
        if (treeLoaded === true)
            return { NodeID: d.NodeID};
        treeLoaded = true;
        return { };
    }


    $(document).ready(function () {

        $("#treeview1").kendoTreeView({
            dataSource: ds1,
            dataTextField: "NodeText",
            template: kendo.template($("#treeview-navlink").html())
        });
    });

</script>

AJAXpost成功后如何调用Kendotreeview（服务器数据绑定类型）？

How do I call Kendo treeview (server data binding type) after success of AJAX post?

javascript

asp.net-mvc

kendo-treeview