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>

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