iOS树形展示树形图标

转载

mob6454cc74c0fc 2023-11-17 11:11:15

文章标签 iOS树形展示 json 数据 ico 文章分类 iOS 移动开发

树形图

开发工具与关键技术：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");
            };
        }

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

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

iOS树形展示树形图标_iOS树形展示