EasyUI Combotree使用入门

  EasyUI Combotree是一个非常实用的插件，在我们的Web项目中有很多情景下可以使用到，例如我们经常要选择一个多级的类别菜单，就可以用到它。EasyUI有一个现成的DEMO，但我感觉不是怎么很实用，于是我在上面进行了修改，利用jquery+easyui+json3做了一个异步获取分类的DEMO，当页面加载后，我们不但完整加载分类数据，而且还能够初始化ComboTree的值（初始化功能在官方的例子中是没有的，需要自己开发），以适应项目的需要。下面我们来看看它在MVC中是如何使用的。

   思路：在View加载时，先利用Ajax异步获取Controller中的数据，然后初始化Combotree，最后设置它的初始值。

效果图

  1.引入脚本

  首先，我们引入Jquery,EasyUI的脚本，如下所示：  

  

 

  然后，我们引入一个叫做Json3的脚本库(这个库怎么用，请参考：https://blog.csdn.net/chenchunlin526/article/details/78850996)，因为ComboTree的数据源要求是Json数据，所以这里需要这个脚本用来解析加载的分类数据，如下所示：

   

    最后引入EasyUI的样式文件：

   

   

   

2.编写Controller

   首先，定义“分类”类：

public class Category

    {

        public string id { get; set; }

        public string text { get; set; }

        public Category[] children { get; set; }

    }

  然后，编写返回“分类”数据的Json方法：public ActionResult GetCategory()

        {

            Category category1 = new Category() { id="1",text= "技术文章",children=new Category[] { new Category() { id = "2", text = "NET Core" } } };

            Category category2 = new Category() { id = "3", text = "日常英语", children = new Category[] { new Category() { id = "4", text = "旅游英语" } } };

            JsonResult jsonResult = new JsonResult();

            jsonResult.Data = new object[] { category1,category2 };

            jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return jsonResult;

        }

切记这里要把JsonRequestBehavior设置为AllowGet，不然客户端获取不到数据。

3.编写View

Js: