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

来源：互联网发布：linux实现nat网关功能编辑：程序博客网时间：2024/04/30 16:17

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>

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

阅读全文

0 0