asp.net MVC使用treegrid——jqwidgets插件

jqwidgets官网 http://www.jqwidgets.com

官网是全英文的，暂时还不支持中文，但是本地化里面竟然有日文的，这让我很想不通。中国这么大的市场为啥不做?不说废话了，下面开始。
运行结果：


1.去官网下载jqwidgets插件，有免费版本的。下载好之后只要把“jqwidgets”这个文件夹拷贝到项目中去就行了，因为一般用到的就这个文件夹里的js。
2.在控制器里面新建视图，如下

public ActionResult jqxtree()
{
return View();
}

3.添加一个方法，用来读取数据，我这里是模拟的一些数据

public ActionResult GetTreeGridList()
{
List<Deparment> list = new List<Deparment>();

Deparment entity = new Deparment
{
ID = "1",
ParentID = "",
Name = "微软中国",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "2",
ParentID = "1",
Name = "技术部",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "3",
ParentID = "1",
Name = "销售部",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "4",
ParentID = "2",
Name = "技术部一组",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "5",
ParentID = "2",
Name = "技术部二组",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "6",
ParentID = "3",
Name = "销售一部",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "7",
ParentID = "3",
Name = "销售二部",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);
entity = new Deparment
{
ID = "8",
ParentID = "1",
Name = "客服部",
CreateTime = DateTime.Now.ToString("yyyy-MM-dd"),
ModifityTime = DateTime.Now.ToString("yyyy-MM-dd")
};
list.Add(entity);

var data = JsonConvert.SerializeObject(list);
return Content(data);
}

public class Deparment
{
public string ID { get; set; }
public string ParentID { get; set; }
public string Name { get; set; }
public string CreateTime { get; set; }

public string ModifityTime { get; set; }
}

这些数据都是模拟的，你在项目中肯定有一些方法读取数据，只要返回的是json就可以了。

4.到刚刚新建的jqxtree页面 ，引用文件

<link href="~/Content/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<link href="~/Content/jqwidgets/styles/jqx.metro.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/jqwidgets/jqxcore.js"></script>
<script src="~/Content/jqwidgets/jqxdata.js"></script>
<script src="~/Content/jqwidgets/jqxbuttons.js"></script>
<script src="~/Content/jqwidgets/jqxscrollbar.js"></script>
<script src="~/Content/jqwidgets/jqxdatatable.js"></script>
<script src="~/Content/jqwidgets/jqxtreegrid.js"></script>

4. body里面添加一个div

<div id="treeGrid">
</div>

5.在页面加载时读取数据

<script type="text/javascript">
$(function () {
// prepare the data
var source =
{
dataType: "json",
dataFields: [
{ name: 'ID', type: 'string' },
{ name: 'ParentID', type: 'string' },
{ name: 'Name', type: 'string' },
{ name: 'CreateTime', type: 'string' },
{ name: 'ModifityTime', type: 'string' }
],
hierarchy:
{
keyDataField: { name: 'ID' },  //自身ID
parentDataField: { name: 'ParentID' } //父ID  通过ID与ParentID来关联
},
id: 'ID',
url: '/Home/GetTreeGridList'//后台获取数据的方法
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: '100%',
height:600,
source: dataAdapter,
pageable: true, //是否分页
columnsResize: true, //允许改变列宽度
theme:'metro', //这边是主题，如果自己喜欢什么主题要引用主题样式，上面引用文件第二行，我这边用的是metro
ready: function () {
$("#treeGrid").jqxTreeGrid('expandAll'); //展开所有
},
columns: [
{ text: 'ID', dataField: 'ID', minWidth: 100, width: 200 },
{ text: 'ParentID', dataField: 'ParentID', width: 200 },
{ text: '名称', dataField: 'Name', width: 150 },
{ text: '创建时间', dataField: 'CreateTime', width: 300 },
{ text: '修改时间', dataField: 'ModifityTime', width: 300 }

]
});
})
</script>

然后运行就可以。要是有什么问题可以留言。