@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>

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 == - ? "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 == - ? null : channelListAll.Find(a => a.id == channel.parentId));

        dicList.Add(dic);

    }

    return Json(dicList);

}