将远程数据绑定到 kendo 树视图

Question

我试图 return 我从控制器操作方法获得的值到 kendo 树视图，以将模块名称 pupulate 为 kendo 树视图中的父节点。

public ActionResult LoadTreeView([DataSourceRequest] DataSourceRequest request)
    {
        using (var countryvar = new TGSFMSSys_UserEntities())
        {
            IQueryable<Module> module = countryvar.Modules;
            DataSourceResult result = module.ToDataSourceResult(request, value => new Module
            {
                ModuleId = value.ModuleId,
                ModuleName = value.ModuleName

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

下面是我创建的 kendo 树视图的 Javascript 代码

<script>
    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        check: onCheck,
        dataSource:
        {
            transport: {
                read: '/MapModuleTask/LoadTreeView'
            }
        },
        dataTextField: 'ModuleName'
    });
</script>

Answer 1

请尝试使用以下代码片段。

控制器：HomeController.cs

public JsonResult LoadTreeView(int? id)
{
    List<Module> modules = new List<Module>();

    int temp = id.GetValueOrDefault();

    modules.Add(new Module() { ModuleId = 1 + temp, ModuleName = "Name1_" + temp , hasChildren = false });
    modules.Add(new Module() { ModuleId = 2 + temp, ModuleName = "Name2_" + temp, hasChildren = true });

    return Json(modules, JsonRequestBehavior.AllowGet);
}

型号：

public class Module
{
    public int ModuleId { get; set; }
    public string ModuleName { get; set; }
    public Boolean hasChildren  { get; set; }
}

视图：

<div id="treeview"></div>
<script>

    var datasource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: function (options) {
                var id = options.data.ModuleId; 
                $.ajax({
                    url: '/Home/LoadTreeView',
                    dataType: "json",   
                    data: { id: id },
                    success: function (result) {
                         options.success(result);
                    },
                    error: function (result) {
                         options.error(result);
                    }
                });
            }
        },
        schema: {
            model: {
                id: "ModuleId",
                hasChildren: "hasChildren"
            }
        }
    });

    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        dataSource: datasource,
        dataTextField: 'ModuleName'
    });
</script>

如有任何疑问，请告诉我。