EasyUI Combotree是一个非常实用的插件，在我们的Web项目中有很多情景下可以使用到，例如我们经常要选择一个多级的类别菜单，就可以用到它。EasyUI有一个现成的DEMO，但我感觉不是怎么很实用，于是我在上面进行了修改，利用jquery+easyui+json3做了一个异步获取分类的DEMO，当页面加载后，我们不但完整加载分类数据，而且还能够初始化ComboTree的值（初始化功能在官方的例子中是没有的，需要自己开发），以适应项目的需要。下面我们来看看它在MVC中是如何使用的。
思路：在View加载时，先利用Ajax异步获取Controller中的数据，然后初始化Combotree，最后设置它的初始值。
效果图
1.引入脚本
首先，我们引入Jquery,EasyUI的脚本，如下所示：
<script type="text/javascript" src="~/js/jquery.min.js"></script>
<script type="text/javascript" src="~/js/jquery.easyui.min.js"></script>
然后，我们引入一个叫做Json3的脚本库(这个库怎么用，请参考：https://blog.csdn.net/chenchunlin526/article/details/78850996)，因为ComboTree的数据源要求是Json数据，所以这里需要这个脚本用来解析加载的分类数据，如下所示：
<script type="text/javascript" src="~/js/json3.js"></script>
最后引入EasyUI的样式文件：
<link rel="stylesheet" type="text/css" href="~/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="~/themes/icon.css">
<link rel="stylesheet" type="text/css" href="~/css/demo.css">
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:
<script type="text/javascript">
$(
function () {
$.ajax({
url: "@Url.RouteUrl("GetCategory")", dataType: "json", success: function (data) { $('#cc').combotree('loadData', data);
//利用Json3将获取来的Json数据转换为字符串
var categorystr = JSON.stringify(data);
//利用Json3将上面的字符串转换为对象
var categoryobj = JSON.parse(categorystr);
var selectvalue = categoryobj[0].id;
var selecttext = categoryobj[0].text;
//初始化值
$('#cc').combotree('setValue', {
id: selectvalue,
text: selecttext
}); $("#categoryid").attr("value", selectvalue);
//为comboTree增加事件
var tree = $('#cc').combotree("tree");
tree.tree({
onSelect: function (node) { $("#categoryid").attr("value", node.id);
}
});
});
}//success function
});//ajax
Html:
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;" id="ccdiv">
<div style="margin-bottom:20px">
<input id="cc" class="easyui-combotree" style="width:100%">
</div>
</div>
上面就是EasyUI ComboTree的一个例子，希望这篇文章能够帮助到你，谢谢！
网友评论