你的位置:首页 > Java教程

[Java教程]zTree的使用2


前台代码:

@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" />');    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);}

View Code