树形图

树形图

开发工具与关键技术：JS

作者：赵纯雨

班级：1803
撰写时间：2019.7.2
 

再本次的项目当中，我们认识一个新知识，树形图，他是能从表中去添加商品，查看数据等快速操作，他的数据是能传递到数据库的，而数据库他也能接收得到，再数据库里添加数据，数据库数据可以直接传送到页面数据里，在树形图里面，点击商品，可以添加商品等等，可以进行基本的增删查改的，在页面里面，单击这个树形图，在旁边的表格数据里面就可以查看你要查找的数据，可以查看商品信息等数据查询，在刚开始做的时候，我拿到一份树形图的原始代码和插件而zTreeDemo文件这个里面有详细的文档和代码，然后，在项目里面，把他框架设计好，

把这个ID放在你准备把这个树形图放在哪个框架里面，再把代码输入进去，

 @*给树形图一个id放在要放的<div>中*@

 <div class="layui-col-sm3ztree"id="sxt"style="height:300px;background:white;"></div>

代码写完了之后，然后直接引入CSS和JS，如下列所示：

    <link href="~/Content/CSS/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

    <link href="~/Content/assets/css/style.min.css" rel="stylesheet" />

<script src="~/Plugins/jquery.ztree.core.js"></script>

这些就是树形图必要的插件，不引入的话树形图是用不了的，框架设计好，然后直接引入代码，如下：

控制器代码：

public JsonResult Get_TreeView()

        {

            List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();

            List<TreeVo> treeList = new List<TreeVo>();

 

            var Parts = (from tbParts in myModel.D_CategoryManagement

                         select new TreeVo

                         {

                             pid = tbParts.S_C_CategoryManagementID,

                             id = tbParts.CategoryManagementID,                                 

                             name = tbParts.CategoryName,

                         }).ToList();

            for (int i = 0; i < Parts.Count; i++)

            {

                TreeVo tree = new TreeVo();

                tree.pid = Parts[i].pid;

                tree.id = Parts[i].id;

                tree.name = Parts[i].name.ToString();

                treeList.Add(tree);

            }

 

            foreach (var model in treeList)

            {

                Dictionary<string, object> jsonobj = new Dictionary<string, object>();

                jsonobj.Add("pId", model.pid);

                jsonobj.Add("id", model.id);

                jsonobj.Add("name", model.name);

                jsonlist.Add(jsonobj);

            }

            return Json(jsonlist, JsonRequestBehavior.AllowGet);

        }

视图代码：

<style>

 Css代码 .ztree {

     margin: 0;

     height: 65%;

     width: 255px;

     background: white;

     overflow-x: auto;

     overflow-y: scroll;

     border: 1px solid #dcdcdc;

        }

#sxt li a .ico_open, #sxt li a .ico_close, #sxt li a .ico_docu {

      background: url(/Plugins/treeImag/one.png) 0 0 no-repeat;

    }

</style>

<script>

        //配置树形参数

        var setting = {data: {

                simpleData: {enable: true}},

            callback: {//onClick: SetIcon }};

        $(function () {

            $.ajaxSettings.async = false;

            //加载树形

            $.ajax({

                type: "post",

url: "/InformationMaintenance/BasicInformationMaintenance/Get_TreeView",（这个URL就是你控制器里面的区域名和控制器名称，后面的那个视图名称都可以用这个方法名，我在上面已经写到过这个方法名了,如果你路径错了，是看不到效果的，一片空白）

                success: function (data) {

                    $.fn.zTree.init($("#sxt"), setting, data);

                }

            });

            SetIcon();

        });

        //给树形图不同层次加上不同的图片

        function SetIcon() {

            var treeObj = $.fn.zTree.getZTreeObj("sxt");//树形

            var two = treeObj.getNodesByParam("level", 1, null);

            for (var i = 0; i < two.length; i++) {

                $(two[i]).attr("icon", "/Plugins/treeImag/two.png");

            };

            var two = treeObj.getNodesByParam("level", 2, null);

            for (var i = 0; i < two.length; i++) {

                $(two[i]).attr("icon", "/Plugins/treeImag/three.png");

            };

            var two = treeObj.getNodesByParam("level", 3, null);

            for (var i = 0; i < two.length; i++) {

                $(two[i]).attr("icon", "/Plugins/treeImag/four.png");

            };

        }

这个图片就是你树形图上面需要的图片，也必须要引入到，不然也是看不到效果的，以上代码就是基本的样式，下面就来看他的效果图：

这个是系统的树形图如下图所示：

然后再引入我上面说的CSS插件和JS插件，就基本上可以有了树形图的基本样式，如图：

因为这个图中的服装、鞋子和内衣，他们是头部，然后再按照系统给定的数据再把你需要的数据一一对应输入就可以了，就可以进行基本的添加了，但是只能在数据库里面进行添加，我还没在页面上做好新增，如下图所示：

以上就是树形图的基本代码和操作咯！！！