zTree

Posted 2021-10-29 xuan666

　　最近写了一个关于动态加载左侧菜单的小Demo，用来和大家分享下！

控制器

public JsonResult CanCaiDan()
        {
            List<CaiDan> list = bll.GetCaiDan();
            var linq = from s in list
                       select new
                       {
                           id = s.Id,
                          
                           pId = s.Pid,    //pId  中大小写不能变  要不然实现不了树形
                           name = s.Name,
                           url = s.Paths,
                           target = "Url"
                       };
            return Json(linq.ToList());
        }

视图

视图中需要添加的引用

<script src="~/Content/js/jquery.ztree.core.js"></script>
<link href="~/Content/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

 <title>Index</title>

 <table width="100%">
            <tr heigth="100px">
                <td style="background-color:blue;font-size:36px;" colspan="2" align="center">
                    八卦石诞生的地方
                </td>
            </tr>
            <tr>
                <td style="border:1px,solid">
                    <ul id="zTree" class="ztree">

                    </ul>
                </td>
                <td>
                    <iframe width="100%" height="500px" name="Url">
                        分手大师的
                    </iframe>
                </td>
            </tr>
        </table>

<script>
var setting = {
data: {
simpleData: {
enable: true
}
}
}
$(function () {
GetCaiDan();
})
function GetCaiDan() {
$.ajax({
url: "/CaiDan/CanCaiDan",
type: "post",
dataType: "json",
success: function (data) {
$.fn.zTree.init($("#zTree"), setting, data);
}
})
}
</script>