.NET 树形菜单的实现
先上最终图
分为 h5的代码 js的代码 和后台代码
h5的代码内容 要把 树形菜单“画”出来
<div class="ibox-content">
<div class="row" id="listmain1">
<div class="form-group col-sm-12">
<label class="col-sm-3 control-label">区域菜单树</label>
<span class="col-sm-6 control-label" style="float: left;">
<asp:Label ID="lblName" runat="server" ForeColor="Red"></asp:Label>
<asp:Label runat="server">区域内容</asp:Label>
</span>
</div>
<div class="form-group col-sm-12 left">
<div class="col-sm-6" style="text-align: left; padding-left: 15%;">
<ul id="treeDemo" class="ztree" style="overflow-y: auto; overflow-x: hidden;">
</ul>
</div>
<div class="col-sm-6" style="text-align: left; padding-left: 10%; vertical-align: top;">
<div style='padding: 10px;'>
<a href='javascript:;' onclick="Add();"><i class="fa fa-plus"></i> 新增</a>
<a href='javascript:;' onclick="Edit();"><i class="fa fa-edit"></i> 修改</a>
<a href='javascript:;' onclick="javascript:DataRemove();"><i class="fa fa-trash"></i> 删除</a>
<a href='javascript:;' onclick="javascript:DataCut();"><i class="fa fa-cut"></i> 剪切</a>
</div>
<div id="Content" class="table-responsive" ></div>
</div>
</div>
</div>
<asp:HiddenField ID="hf1" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="h`f`Flag" runat="server" ClientIDMode="Static" />
</div>
然后就是js事件
需要引用两个js文件，请自行下载
<script type="text/javascript" src="../Scripts/Tree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../Scripts/Tree/js/jquery.ztree.core-3.5.js"></script>
然后就是对一些事件的实现的js代码
<script type="text/javascript">
var zNodes = [
{ id: 1, pId: 0, name: "父节点1", open: true },
{ id: 11, pId: 1, name: "子节点1" },
{ id: 12, pId: 1, name: "子节点2" },
{ id: 13, pId: 1, name: "子节点3" },
];
//定义树控件设置
var setting = {
callback: {
onClick: onClick
},
data: {
simpleData: {
enable: true
}
},
view: {
selectedMulti: false
}
};
$(document).ready(function () {
BindTree();
setWindowHight();
});
function BindTree() {
$.ajax({
type: "GET",
dataType: "json",
url: "Area_List.aspx?Type=tree_Demo",
success: function (date) {
$.fn.zTree.init($("#treeDemo"), setting, eval(date.value));
}
})
}
//设置相关窗体高度
function setWindowHight() {
var height = $(window).height();
var div = $("#listmain1");
var tree = $("#treedemo");
div.height(height - 60);
tree.height(height - 140);
}
//点击事件
function onClick(event, treeId, treeNode, clickFlag) {
$.ajax({
type: "GET",
url: "Area_List.aspx",
dataType: "html",
contentType: 'application/html;charset=utf-8',
data: "arid=" + treeNode.id + "&Type=Read" + "&time=" + new Date(),
beforeSend: function (XMLHttpRequest) {
$("#Content").html("<img src=../Images/jdt2.gif />");
},
success: function (retdata) {
$("#Content").html(retdata);
},
error: function () {
$("#Content").html("error");
}
});
}
//剪切
function DataCut() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getSelectedNodes()[0];
if (node != null) {
if (confirm("确认要剪切吗？")) {
layer.open({
type: 2,
title: '请选择要粘贴的结点',
shadeClose: true,
shade: 0.8,
maxmin: true,
area: ['600px', '400px'],
content: "SelectArea.aspx?arID=" + node.id + "&time=" + Date(),
end: function (index) {
if ($('#hf1').val() == "ok") {
alert("粘贴成功！");
window.location.reload(true);
}
else {
$("#Content").html("error");
}
},
});
}
}
else {
alert('请先选择一个结点！');
}
}
function Add() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getSelectedNodes()[0];
if (node != null) {
window.location.href = "Area_Add.aspx?from=treePage&arid=" + node.id + "&Areaname=" + node.name + "&ParentAreaID=" + node.region + "&time=" + new Date();
}
else {
window.location.href = "Area_Add.aspx?from=treePage&arid=0" + "&time=" + new Date();
}
return false;
}
function Edit() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getSelectedNodes()[0];
if (node != null) {
window.location.href = "Area_Edit.aspx?from=treePage&id=" + node.id + "&ParentAreaID=" + node.region + "&time=" + new Date() + "&SX=" + node.abbreviation;
}
else {
alert('请先选择一个结点！');
}
return false;
}
//删除
function DataRemove() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getSelectedNodes()[0];
if (node != null) {
if (confirm("确认要删除？")) {
$.ajax({
type: "GET",
url: "Area_List.aspx",
dataType: "html",
data: "arid=" + node.id + "&Type=Remove" + "&time=" + new Date(),
beforeSend: function (XMLHttpRequest) {
},
success: function (retdata) {
if (retdata.indexOf("OK") > -1) {
treeObj.removeNode(node);
$("#Content").html("");
alert('删除成功！');
}
else
alert(retdata);
},
error: function () {
alert('error！');
}
});
}
}
else {
alert('请先选择一个结点！');
}
}
</script>
接下来就是 后台代码的实现
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
switch (Request["Type"])
{
case "tree_Demo":
var result = DtToJson(null);
Response.Write(result);
Response.End();
break;
case "Read": //查看结点详情
Read();
break;
case "Remove": //删除结点
Response.Write(DataRemove(Request["arid"]));
break;
case "Cut": //剪切结点
ChangeFatherNode();
break;
default:
//string s = DtToJson(null);
//this.ClientScript.RegisterStartupScript(this.GetType(), "DZL", "<script>zNodes=" + s + "</script>");
break;
}
}
}
protected string DtToJson(string Type)
{
string result = string.Empty;
string ParentID = string.Empty;
switch (Type)
{
case null://首次传进来是空的
{
result += CreateParent();
break;
}
}
if (result.Length > 0)
result = "[\r\n" + result.Substring(1) + "\r\n]";
JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(new { value = result });
}
protected class AreaList
{
public int id { get; set; }
public string name { get; set; }
public string abbreviation { get; set; }
public string pinyin_Abbreviation { get; set; }
public int area_Type { get; set; }
public string parent_Area { get; set; }
public bool is_Provincial_Capital { get; set; }
public int Count { get; set; }
}
/// <summary>
/// 创建顶级节点
/// </summary>
/// <returns></returns>
protected string CreateParent()
{
using (new DataContextScope())
{
string parentNode = string.Empty;
string IsParent = string.Empty;
AreaManageBLL areabll = new AreaManageBLL();
var areas = areabll.getAllArea().Where(d => d.parent_Area == "-1");
foreach (var ar in areas)
{
IsParent = "false";
var menu = from q in areabll.getAllArea()
where q.parent_Area == ar.id.ToString()
select q;
if (menu.Count() > 0)
{
IsParent = "true";
}
parentNode += ",\r\n{id:'" + ar.id.ToString() + "',pId:'0',name:'" + ar.name
+ "',region:'" + ar.parent_Area + "',open:false,isParent:" + IsParent + "}";
var groupList = from q in areabll.List()
join child in areabll.List()
on q.id.ToString() equals child.parent_Area
group q by q.id into g
select new
{
g.Key,
Count = g.Count()
};
var AreaList = from q in areabll.List()
join g in groupList on q.id equals g.Key
into tempList
from gList in tempList.DefaultIfEmpty()
select new AreaList
{
id = q.id,
name = q.name,
abbreviation = q.abbreviation,
pinyin_Abbreviation = q.pinyin_Abbreviation,
area_Type = q.area_Type,
parent_Area = q.parent_Area,
is_Provincial_Capital = q.is_Provincial_Capital,
Count = gList == null ? 0 : gList.Count,
};
parentNode += CreateChild(AreaList, ar.id.ToString());
}
return parentNode;
}
}
/// <summary>
/// 创建子节点
/// </summary>
/// <param name="AreaManageList">数据筛选集合</param>
/// <param name="Parentorg_id">父节点ID</param>
/// <param name="parentNode">JSON拼接的节点信息</param>
protected string CreateChild(IQueryable<AreaList> AreaList, string Parentorg_id)
{
string IsParent = string.Empty;
string parentNode = string.Empty;
var ChildList = from q in AreaList
where q.parent_Area == Parentorg_id
orderby q.name
select q;
var theOrg_id = string.IsNullOrEmpty(Request["arid"]) ? "" : Request["arid"]; //传过来的结点ID
foreach (var child in ChildList)
{
if (child.id.ToString() != theOrg_id) //为了不显示这个菜单
{
IsParent = "false";
if (child.Count > 0)
IsParent = "true";
parentNode += ",\r\n{id:'" + child.id.ToString() + "',pId:'" + Parentorg_id + "',name:'"
+ child.name + "',region:'" + child.parent_Area + "',isParent:" + IsParent + "}";
parentNode += CreateChild(AreaList, child.id.ToString());
}
}
return parentNode;
}
public void Read()
{
string errinfo = string.Empty;
string tableHtml = string.Empty;
if (string.IsNullOrEmpty(Request["arid"]))
{
errinfo = "没有传递结ID！";
}
else
{
T_Area ar = new T_Area();
AreaManageBLL areaBll = new AreaManageBLL();
var area = areaBll.getAreaById(Request["arid"]);
if (area == null)
{
errinfo = "该组织信息不存在！";
}
else
{
var ParentAreaInfo = areaBll.getAreaById(area.parent_Area);
var name = "";
if (ParentAreaInfo != null)
{
name = ParentAreaInfo.name;
}
tableHtml = "<table class=\"table table-bordered table-striped\" style=\"\">";
tableHtml += "<tr><td>区域编码</td><td>" + area.area_Code + " </td></tr><tr><td>区域名称</td><td>" + area.name + " </td></tr><tr><td>区域缩写</td><td>" + area.pinyin_Abbreviation + " </td></tr>";
tableHtml += "<tr><td>区域拼音缩写</td><td>" + area.abbreviation + "</td></tr><tr><td>区域类型</td><td>" + DictionaryBll.GetObjectText("areaType", area.area_Type) + " </td></tr><tr><td>所属上级区域名称</td><td>" + name + " </td></tr>";
tableHtml += "<tr><td>是否省会</td><td>" + (area.is_Provincial_Capital == false ? "否" : "是") + " </td></tr>";
tableHtml += "</table>";
}
}
Response.Write(errinfo == "" ? tableHtml : errinfo);
Response.End();
}
/// <summary>
/// 删除
/// </summary>
protected string DataRemove(string ID)
{
AreaManageBLL areaBll = new AreaManageBLL();
string str = "";
var childList = areaBll.List().Where(p => p.parent_Area == ID);
if (childList.Count() > 0)
{
str = "该组织节点下存在子节点，请确保该节点下子节点为空，再删除该节点！";
}
else
{
var area = areaBll.getAreaById(ID);
area.status = 3;
areaBll.SaveArea(area);
str = "OK";
}
return str;
}
/// <summary>
/// 剪切
/// </summary>
protected void ChangeFatherNode()
{
string Status = string.Empty, Error = string.Empty;
if (!string.IsNullOrEmpty(Request["theOrgID"]) && !string.IsNullOrEmpty(Request["aimOrgID"]))
{
int ID = int.Parse(Request["theOrgID"]);
string NewParentorg_id = Request["aimOrgID"];
AreaManageBLL areabll = new AreaManageBLL();
var area = areabll.getAreaById(Request["theOrgID"]);
area.parent_Area = NewParentorg_id; //设置为新值
//Area_Edit ePage = new Area_Edit();
//area.area_Code = ePage.AddTraverseCode(area.parent_Area);
try
{
areabll.SaveArea(area);
Status = "Success";
}
catch (Exception ex)
{
Status = "Fail";
Error = ex.Message;
}
}
Response.Write("{\"Status\":" + Status + ",\"Error\":" + Error + "}");
}
还有一个新增编辑的方法 不在这里 页面需要单独画 到这其实就能实现基本的增删改查 还有剪切功能。
1543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
