zTree的使用2 - s0611163－IT工程師數位筆記本

文章出處

前臺代碼：

@using Models;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link type="text/css" href="~/Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-treeview/lib/jquery.cookie.js"></script>
<style type="text/css">
    a
    {
        text-decoration: none;
        color: #000;
    }
</style>
<script type="text/javascript">
    $(function () {
        loadTree();
    });//end $

    function loadTree(callback) {
        //ztree設置
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: null
                }
            },
            view: {
                selectedMulti: false
            },
            callback: {
                onClick: zTreeOnClick,
                onExpand: onExpand,
                onCollapse: onCollapse
            }
        };

        $.ajax({
            type: "POST",
            url: "/Admin/ChannelManage/GetData",
            success: function (data) {
                if (data && data.length != 0) {
                    $.fn.zTree.init($("#tree"), setting, data);
                    var treeObj = $.fn.zTree.getZTreeObj("tree");
                    var cookie = $.cookie("z_tree" + window.location);
                    if (cookie) {
                        z_tree = JSON.parse(cookie);
                        for (var i = 0; i < z_tree.length; i++) {
                            var node = treeObj.getNodeByParam('id', z_tree[i])
                            treeObj.expandNode(node, true, false)
                        }
                    }
                    if (callback) {
                        callback();
                    }
                }
            }
        });
    } //end loadTree

    function zTreeOnClick(event, treeId, treeNode) {
        $(".table-data").find("input").val("");
        $(".table-data").find("select").val("");
        $("#iconUrl").parent().html('<img alt="" src="" id="iconUrl" style="height: 100px;" />');
        if (!treeNode.isSite) {
            $("#site").val(treeNode.site.title);
            $("#title").val(treeNode.channel.title);
            if (treeNode.parentChannel) {
                $("#parentChannel").val(treeNode.parentChannel.title);
            }
            else {
                $("#parentChannel").val("無");
            }
            $("#listType").val(treeNode.channel.listType);
            $("#displayPos").val(treeNode.channel.displayPos);
            $("#sort").val(treeNode.channel.sort);
            $("#iconUrl").attr("src", treeNode.channel.iconUrl);
        }
    }

    function onExpand(event, treeId, treeNode) {
        var cookie = $.cookie("z_tree" + window.location);
        var z_tree = new Array();
        if (cookie) {
            z_tree = JSON.parse(cookie);
        }
        if ($.inArray(treeNode.id, z_tree) < 0) {
            z_tree.push(treeNode.id);
        }
        $.cookie("z_tree" + window.location, JSON.stringify(z_tree))
    }

    function onCollapse(event, treeId, treeNode) {
        var cookie = $.cookie("z_tree" + window.location);
        var z_tree = new Array();
        if (cookie) {
            z_tree = JSON.parse(cookie);
        }
        var index = $.inArray(treeNode.id, z_tree);
        z_tree.splice(index, 1);
        for (var i = 0; i < treeNode.children.length; i++) {
            index = $.inArray(treeNode.children[i].id, z_tree);
            if (index > -1) z_tree.splice(index, 1);
        }
        $.cookie("z_tree" + window.location, JSON.stringify(z_tree))
    }

    //添加
    function add() {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length == 0) {
            alert("請選中一個節點");
            return;
        }
        $.iDialog({
            title: '新增-欄目',
            height: "400px",
            width: "500px",
            content: "url:/Admin/ChannelManage/Add?isSite=" + nodes[0].isSite + "&pId=" + nodes[0].id.replace("site", "")
        });
    }

    //修改
    function edit() {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length == 0) {
            alert("請選中一個節點");
            return;
        }
        if (nodes[0].isSite) {
            alert("根節點是站點，不能修改");
            return;
        }
        $.iDialog({
            title: '修改-欄目',
            height: "500px",
            width: "500px",
            content: "url:/Admin/ChannelManage/Edit?id=" + nodes[0].id
        });
    }

    //刪除
    function del() {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length == 0) {
            alert("請選中一個節點");
            return;
        }
        if (nodes[0].isSite) {
            alert("根節點是站點，站點不能刪除");
            return;
        }
        if (confirm("確定刪除？")) {
            $.ajax({
                url: "/Admin/ChannelManage/Del",
                type: "POST",
                data: { id: nodes[0].id },
                success: function (data) {
                    if (data == "OK") {
                        alert("刪除成功");
                        treeObj.removeNode(nodes[0]);
                        $(".input-text").val("");
                        $(".table-data").find("select").val("");
                    } else {
                        alert("刪除失敗：" + data);
                    }
                }
            });
        }
    }

    //刷新
    function refresh() {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var nodes = treeObj.getSelectedNodes();
        var id = nodes[0].id;
        loadTree(function () {
            treeObj = $.fn.zTree.getZTreeObj("tree");
            nodes = treeObj.getNodesByParam("id", id);
            treeObj.selectNode(nodes[0]);
            treeObj.setting.callback.onClick(null, treeObj.setting.treeId, nodes[0]);
        });
    }
</script>
<div id="easyui-layout" class="easyui-layout" style="height: 450px;">
    <div data-options="region:'north',border:false" style="height: 35px;">
        <div class="toolbar">
            @if (ViewBag.addRights)
            {
                <a class="a-btn" href="javascript:void(0);" onclick="add()">
                    <img alt="" src="~/Content/images/add2.gif" />
                    添加欄目
                </a>
            }
            @if (ViewBag.editRights)
            {
                <a class="a-btn" href="javascript:void(0);" onclick="edit()">
                    <img alt="" src="~/Content/images/edit.gif" />
                    修改欄目
                </a>}
            @if (ViewBag.delRights)
            {
                <a class="a-btn" href="javascript:void(0);" onclick="del()">
                    <img alt="" src="~/Content/images/del2.gif" />
                    刪除
                </a>
            }
        </div>
    </div>
    <div id="west" data-options="region:'west'" style="width: 30%; border-left: 0; border-bottom: 0;">
        <div style="height: 100%; overflow: auto;">
            <div id="tree" class="ztree" style="padding-left: 5px;">
            </div>
        </div>
    </div>
    <div id="center" data-options="region:'center'" style="border-left: 0; border-bottom: 0;">
        <table class="table-data" cellpadding="0" cellspacing="0">
            <tr>
                <td class="td-title" style="width: 35%;">
                    <span>所屬站點：</span>
                </td>
                <td>
                    <input id="site" type="text" class="input-text"
                        disabled="disabled" style="width: 60%;" />
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <span>欄目名稱：</span>
                </td>
                <td>
                    <input id="title" type="text" class="input-text"
                        disabled="disabled" style="width: 60%;" />
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <span>父級欄目：</span>
                </td>
                <td>
                    <input id="parentChannel" type="text" class="input-text"
                        disabled="disabled" style="width: 60%;" />
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <span>欄目列表類型：</span>
                </td>
                <td>
                    <select class="select" id="listType" name="listType" disabled="disabled">
                        <option value=""></option>
                        <option value="1">文字列表</option>
                        <option value="2">圖片列表</option>
                        <option value="3">單篇文章</option>
                        <option value="4">頁面鏈接</option>
                        <option value="5">父級欄目</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <span>欄目顯示：</span>
                </td>
                <td>
                    <select class="select" id="displayPos" name="displayPos" disabled="disabled">
                        <option value=""></option>
                        <option value="1">頂部導航欄</option>
                        <option value="2">不顯示</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <span>排序：</span>
                </td>
                <td>
                    <input id="sort" type="text" class="input-text"
                        disabled="disabled" style="width: 40px;" />
                </td>
            </tr>
            <tr>
                <td class="td-title" style="border-bottom: solid 1px #ddd;">
                    <span>欄目圖標：</span>
                </td>
                <td style="border-bottom: solid 1px #ddd;">
                    <img alt="" src="" id="iconUrl" style="height: 100px;" />
                </td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
    $("#easyui-layout").height($(window).height());
</script>

View Code

后臺代碼：

public ActionResult GetData()
{
    List<cms_site_ext> siteListAll = m_SiteDal.GetListAll();
    List<cms_channel_ext> channelListAll = m_ChannelDal.GetListAll();
    List<Dictionary<string, object>> dicList = new List<Dictionary<string, object>>();

    foreach (cms_site_ext site in siteListAll)
    {
        Dictionary<string, object> dic = new Dictionary<string, object>();
        dic.Add("id", "site" + site.id.ToString());
        dic.Add("pId", null);
        dic.Add("name", site.title);
        dic.Add("open", "true");
        dic.Add("isSite", true); //自定義屬性
        dicList.Add(dic);
    }

    foreach (cms_channel_ext channel in channelListAll)
    {
        Dictionary<string, object> dic = new Dictionary<string, object>();
        dic.Add("id", channel.id.ToString());
        dic.Add("pId", channel.parentId == -1 ? "site" + channel.siteId.ToString() : channel.parentId.ToString());
        dic.Add("name", channel.title);
        dic.Add("isSite", false); //自定義屬性
        dic.Add("channel", channel);
        dic.Add("site", siteListAll.Find(a => a.id == channel.siteId));
        dic.Add("parentChannel", channel.parentId == -1 ? null : channelListAll.Find(a => a.id == channel.parentId));
        dicList.Add(dic);
    }

    return Json(dicList);
}