【Ztree】前台展示多级菜单，后台配置方法
第一步、前台HTML页面。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="feeClassification.aspx.cs" Inherits="Webs.pages.Parameter.feeClassification" %> <!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>费用分类</title>
<!-- IE兼容模式 -->
<!-- 引入css样式文件 -->
<link rel="stylesheet" type="text/css" href="/content/common/css/app.v2.css?verson=<%=VersionNo %>">
<link rel="stylesheet" type="text/css" href="/content/common/css/info.css?verson=<%=VersionNo %>">
<link href="/content/common/ztree/demo.css?verson=<%=VersionNo %>" rel="stylesheet" />
<link href="/content/common/ztree/zTreeStyle.css?verson=<%=VersionNo %>" rel="stylesheet" />
<!--[if lt IE 9]> <script src="/content/common/js/ie/html5shiv.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/respond.min.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/excanvas.js?verson=<%=VersionNo %>" cache="false"></script> <![endif]--> <%=headAppendHtmlJavaScript() %>
</head>
<body>
<div>
<div class="margin-bottom5" style="float:left;width:40%; border: 1px solid black;" id="divTable">
<input type="hidden" id="txtCode" />
<input type="hidden" id="txtFathCode" />
<table class="tableDefault" cellpadding="0" cellspacing="0" border="1">
<tr>
<th style="width: 30%;"><span>操 作</span></th>
<td>
<input class="btn btn-s-md btn-success" id="modify" type="button" onclick="Modify();" value="修改保存" />
<input class="btn btn-s-md btn-success" id="Add" type="button" onclick="AddAway();" value="新增保存" />
<input class="btn btn-s-md btn-success" id="Del" type="button" onclick="DelAway();" value="删除节点" />
</td>
</tr>
<tr>
<th><span>分类显示</span></th>
<td style="text-align: left;">
<span id="sify_name"></span>
</td>
</tr>
<tr>
<th><span>分类名称</span></th>
<td style="text-align: left;">
<input name="classify_Name" class="form-control" style="width: 40%;" type="text" id="classify_name" />
</td>
</tr>
<tr>
<th><span>排序数值</span></th>
<td style="text-align: left;">
<input name="order_value" class="form-control" style="width: 40%;" type="text" id="order_value" />
</td>
</tr>
<tr>
<th><span>助 记 码</span></th>
<td style="text-align: left;">
<input name="code_value" class="form-control" style="width: 40%;" type="text" id="code_value" />
</td>
</tr>
</table> </div>
<!-- 页面树 -->
<div class="zTreeDemoBackground right" id="ztreeId" style="width: 40%; height: auto">
<ul id="treeDemo" class="ztree" style="width: 40%; height: auto; float: right; margin-top: 5px;"></ul>
</div> </div>
<script src="/content/common/js/ajaxRequest.js?verson=<%=VersionNo %>" type="text/javascript"></script>
<script src="/content/common/ztree/jquery.ztree.core.js?verson=<%=VersionNo %>"></script>
<%=bodyAppendHtmlJavaScript() %>
<script type="text/javascript">
var zNodes, cropId;
var messageError = "";
var jsonObject = {};
var tree = [];
//ztree配置信息
var setting = {
view: {
showIcon: true,//是否展示树图片
dblClickExpand: false,
showLine: true,
selectedMulti: false,
fontCss: { background: "write" }
},
edit: {
enable: true,
editNameSelectAll: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: GetNodeAway,//节点点击事件
onExpand: GetNodeAway//节点展开折叠事件
}
};
//加载事件
$(function () {
//加载树信息
GetTreeData();
});
//处理接收数据
function GetTreeData() {
jsonPost("/wsService/PManagementHandler.ashx?type=GetFreeClassTree", jsonObject,
function (response) {
$.fn.zTree.init($("#treeDemo"), setting, response.data);
},
function () { });
}
//树图片回调事件
function showIconForTree(treeId, treeNode) {
return !treeNode.isParent;
};
//修改事件
function Modify() {
if (JudgeAway(0)) {
SaveFileDate($("#txtCode").val());
treeHandler(0);
} else { showErrorAlert(messageError); }
}
//新增事件
function AddAway() {
var lxid = 1;
if ($("#txtCode").val() == "") {
if (!confirm("确定是增加根节点菜单吗?")) return;
lxid = 2;
}
if (JudgeAway(1)) {
SaveFileDate("");
treeHandler(lxid);
} else {
showErrorAlert(messageError);
}
}
//新增--修改
function treeHandler(lxid) {
jsonPost("/wsService/PManagementHandler.ashx?type=UpdateFreeTreeNote", jsonObject,
function (response) {
if (response.code === 0) {
showSuccessAlert(lxid==0?"修改成功！":"新增成功！");
checkAway();
location.reload();
} else { showErrorAlert(response.message); }
}, function () {
});
}
//删除事件
function DelAway() {
if (JudgeAway(2)) {
if (confirm("删除节点信息，请慎重！")) {
if (confirm("确认要删除吗？")) {
jsonObject.deleteId = $("#txtCode").val();
jsonPost("/wsService/PManagementHandler.ashx?type=DeleteFreeTreeNote", jsonObject,
function (response) {
if (response.code === 0) {
showSuccessAlert("删除成功！");
checkAway();
location.reload();
} else { showErrorAlert(response.message); }
}, function () {
});
}
}
} else { showErrorAlert("请点击要删除的节点！") };
}
//保存前验证方法:0--修改；1：新增；2；删除
//删除不检验
function JudgeAway(lxid) {
if (lxid != 2) {
if (lxid != 1) {
messageError = "";
var value = $("#classify_name").val();
if (value == "") {
messageError = "分类名称不能为空";
messageError += "<br/>";
}
value = $("#order_value").val();
if (value == "") {
messageError = "排序数值不能为空";
messageError += "<br/>";
}
value = $("#code_value").val();
if (value == "") {
messageError = "助记码不能为空";
messageError += "<br/>";
}
return messageError.length === 0 ? true : false;
}
}
return true;
}
//保存内容填充方法
function SaveFileDate(zid) {
jsonObject = {};
var resultInformation = zid == "" ? $("#txtCode").val() + "^" : $("#txtFathCode").val() + "^";
resultInformation += zid == "" ? "^" : zid + "^";
resultInformation += $("#classify_name").val() + "^";
resultInformation += $("#code_value").val() + "^";
resultInformation += $("#order_value").val();
jsonObject.menuArray = resultInformation;
}
//节点点击事件
function GetNodeAway(event, treeId, nodes) {
var fileInfo = event.type == "click" ? true : false;
GetSonNode(nodes, fileInfo);
}
//获取节点信息
function GetSonNode(nodes, fileInfo) {
if (nodes.id != "" && nodes.id != null) {
if (nodes.isParent == true) {
//含有子节点信息
//非父节点(根据ID获取二级或三级菜单)
jsonObject.paramId = nodes.id;
jsonPost("/wsService/PManagementHandler.ashx?type=GetChildrenFreeClassTree", jsonObject,
function (response) {
GroupResultData(response.data, nodes, fileInfo);
}, function () { });
} else {
//不包含子节点信息所以直接更新展示内容
GroupResultData("", nodes, fileInfo);
}
}
}
//节点信息填充
function GroupResultData(dataArray, notes, fileInfo) {
//填充展示信息
if (fileInfo) {
$("#txtCode").val(notes.id);//子ID
$("#txtFathCode").val(notes.pId);//父ID
$("#sify_name").html(notes.SifyName);//分类显示
$("#classify_name").val(notes.name);//分类名称
$("#order_value").val(notes.OrderValue);//排序数值
$("#code_value").val(notes.CodeValue);//助 记 码
}
if (notes.isExpernt != true) {
if (dataArray !== "" && dataArray != null) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
notes.isExpernt = true;
//notes.children = dataArray;
dataArray.forEach(function (obj) {
obj.SifyName = "【" + notes.name + "；" + obj.name + "】";
zTree.addNodes(notes, obj);
});
}
}
}
//清空节点信息
function checkAway() {
//清空输入区数据
$("#txtCode").val("");
$("#txtFathCode").val("");
$("#sify_name").html("");
$("#classify_name").val("");
$("#order_value").val("");
$("#code_value").val("");
}
</script>
</body>
</html>
前台HTML页面
第二步、构建实体类。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace Webs.common
{
[Serializable]
//树节点识别信息模型
public class ZTree
{
#region ZTree唯一标识不可改变大小写
/// <summary>
///节点名称
/// </summary>
public string name { set; get; }
/// <summary>
/// 节点Id
/// </summary>
public string id { set; get; }
/// <summary>
/// 节点父ID
/// </summary>
public string pId { set; get; }
/// <summary>
/// 节点是否展开事件
/// </summary>
public bool open { set; get; }
/// <summary>
/// 是否是父节点标识
/// </summary>
public bool isParent { set; get; }
/// <summary>
/// 该节点是否包含子节点信息
/// </summary>
public List<ZTree> children { set; get; }
#endregion #region 自定义属性
/// <summary>
/// 分类展示名称
/// </summary>
public string SifyName { set; get; }
/// <summary>
/// 节点自有名称
/// </summary>
public string ClassifyName { set; get; }
/// <summary>
/// 排序值
/// </summary>
public int OrderValue { set; get; }
/// <summary>
/// 助计码
/// </summary>
public string CodeValue { set; get; }
/// <summary>
/// 是否已展开唯一标识
/// </summary>
public bool isExpernt { get; set; }
#endregion
}
}
ZTree Model
第三步、后台代码。
#region 费用分类
/// <summary>
/// 获取费用分类一级节点信息
/// </summary>
private void GetFreeClassTree()
{
try
{
string cParamId = stringWithFormId("paramId") == "null" ? "" : stringWithFormId("paramId");
List<ParamClassify> paramClassifyList = new List<ParamClassify>();
bool result = RemotingProxy.Param().GetParamClassifyList(cParamId, userInfo.UserId, ref paramClassifyList, ref Message);
var jsonParent = new ZTree() { id = "-1", ClassifyName = "根节点", open = true, name = "父节点" };
jsonParent.isParent = true;
jsonParent.children = new List<ZTree>();
foreach (var m in paramClassifyList)
{
var json = new ZTree();
json.pId = jsonParent.id;
json.id = m.CParamId;
json.SifyName = "根节点；" + m.VClassifyName;
json.ClassifyName = m.VClassifyName;
json.name = m.VClassifyName;
json.isParent = m.IsContainsChidrens;
json.children = new List<ZTree>();
json.CodeValue = m.VUnitMnem;
json.isParent = true;
json.OrderValue = m.NSortValue;
jsonParent.children.Add(json);
}
Response.Write(result
? jsonString(statusCode.success, Message, jsonParent)
: jsonString(statusCode.fail, Message));
}
catch (Exception ex)
{
CreatErrorTxt(ex.ToString());
Response.Write(jsonString(statusCode.fail, Error.DataError));
}
} /// <summary>
/// 获取费用分类其它节点信息
/// </summary>
private void GetChildrenFreeClassTree()
{
try
{
string cParamId = stringWithFormId("paramId");
List<ParamClassify> paramClassifyList = new List<ParamClassify>();
bool result = RemotingProxy.Param().GetParamClassifyList(cParamId, userInfo.UserId, ref paramClassifyList, ref Message);
var children = new List<ZTree>();
foreach (var m in paramClassifyList)
{
var json = new ZTree();
json.pId = cParamId;
json.id = m.CParamId;
json.ClassifyName = m.VClassifyName;
json.name = m.VClassifyName;
json.isParent = m.IsContainsChidrens;
json.children = new List<ZTree>();
json.CodeValue = m.VUnitMnem;
json.OrderValue = m.NSortValue;
children.Add(json);
}
Response.Write(result
? jsonString(statusCode.success, Message, children)
: jsonString(statusCode.fail, Message));
}
catch (Exception ex)
{
CreatErrorTxt(ex.ToString());
Response.Write(jsonString(statusCode.fail, Error.DataError));
}
} /// <summary>
/// 获取节点详细信息
/// </summary>
private void GetTreeNoteInformation()
{
try
{
string cParamId = stringWithFormId("paramId");
ParamClassify paramClassify = new ParamClassify();
bool result = RemotingProxy.Param().GetParamClassify(cParamId, userInfo.UserId, ref paramClassify, ref Message);
Response.Write(result
? jsonString(statusCode.success, Message, paramClassify)
: jsonString(statusCode.fail, Message));
}
catch (Exception ex)
{
CreatErrorTxt(ex.ToString());
Response.Write(jsonString(statusCode.fail, Error.DataError));
}
} /// <summary>
/// 新增修改节点信息
/// </summary>
private void UpdateFreeTreeNote()
{
try
{
string cParamId ="";
ParamClassify paramClassify = new ParamClassify();
string[] menuIdArray = stringWithFormId("menuArray").Split('^');
paramClassify.CParentParamId = menuIdArray[]=="-1"?"":menuIdArray[];//父级ID
paramClassify.CParamId = menuIdArray[];//自己ID
paramClassify.VClassifyName = menuIdArray[];//分类名称
paramClassify.VUnitMnem = menuIdArray[];//助记码
paramClassify.NSortValue = int.Parse(menuIdArray[]);//排序值
paramClassify.NDelflag = ;//是否删除
bool result = RemotingProxy.Param().UpdateParamClassify(paramClassify, userInfo.UserId, ref cParamId, ref Message);
Response.Write(result
? jsonString(statusCode.success, Message, paramClassify)
: jsonString(statusCode.fail, Message));
}
catch (Exception ex)
{
CreatErrorTxt(ex.ToString());
Response.Write(jsonString(statusCode.fail, Error.DataError));
}
} /// <summary>
/// 删除节点信息
/// </summary>
private void DeleteFreeTreeNote()
{
try
{
string deleteId = stringWithFormId("deleteId");
bool result = RemotingProxy.Param().DeleteParamClassify(deleteId, userInfo.UserId, ref Message);
Response.Write(result
? jsonString(statusCode.success, Message)
: jsonString(statusCode.fail, Message));
}
catch (Exception ex)
{
CreatErrorTxt(ex.ToString());
Response.Write(jsonString(statusCode.fail, Error.DataError));
}
}
#endregion
Handler
【Ztree】前台展示多级菜单，后台配置方法的更多相关文章
- 扇形多级菜单可配置Demo
预览效果 领导是想把这个做成复选框,所以做成了可以多选的... Demo下载:https://github.com/zhangzn3/arc-menu
- 同一sql表，在页面展示多级菜单
2.
- Vue2 实现树形菜单（多级菜单）功能模块
结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...
- 制作多级菜单hide（）与show（） toggle（）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 通用权限管理系统之权限菜单zTree树的展示及移动的处理方法
在通用权限管理系统中,有很多数据结构是有父子关系的,如组织机构,部门,权限菜单等,在展示的时候,大多数是通过zTree树的形式展现的,如下: 权限菜单展示 这种数据后台输出比较容易处理,参考如下获取某 ...
- Ci分开配置网站前台后台的方法
CodeIgniter 是一个简单快速的PHP MVC框架.EllisLab 的工作人员发布了 CodeIgniter.许多企业尝试体验过所有 PHP MVC 框架之后,CodeIgniter 都成为 ...
- 使用Fusioncharts实现后台处理进度的前台展示
本文要解决两个问题: 1.在ajax的数据交互中,如何获得后台的处理进度? 2.在前台界面中,如何使用图形化的方式展示后台处理进度? 关于第一个问题,不是本文的重点,简单说一下思路.因为HTTP协 ...
- zTree下拉菜单多级菜单多选实现
惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...
- C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
随机推荐
- app耗电优化之四 使用AlarmManager对任务进行合理安排
AlarmManager 是用来设定定时任务.即用来设定那个任务在什么时候开始执行.为什么和省电有关系?这个需要和AlarmManager的使用先说起.AlarmManager 实际上只起到一个定时发 ...
- Object-C 里面的animation动画效果,核心动画
#import "CoreAnimationViewController.h" @interface CoreAnimationViewController ()@property ...
- 【PHP】打印输出var_dump+echo+print_r
var_dump 判断一个变量的类型与长度如:<?$a = 1;$b = 't';echo var_dump($ta,$tb); // 结果为 int(123) string(3) " ...
- linux任务前后台执行
Linux任务前后台的切换 Shell支持作用控制,有以下命令实现前后台切换: 1. command& 让进程在后台运行 2. jobs 查看后台运行的进程 3. fg %n 让后台运行的进程 ...
- cesium 获取点击点的高程
var picklHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);picklHandler .setInputAct ...
- 我的"Hello World!"之旅
不知从何谈起,回想起三年前的自己,那会是高三:同时也是一个让无数骚年悸动的年代,那时候的我也在一个叫做“召唤师峡谷”神奇的地方闯荡了两年.那么,记忆又会回到2012年的元旦,伴随着几个好友,偷偷摸摸地 ...
- 简陋的 ASP.NET CORE 单页Web应用程序“框架”
我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...
- zabbix分布式监控的部署
zabbix是一个分布式监视,管理系统,基于server-clinet架构,可用于监视各种网络服务,服务器和网络机器等状态. server端基于C语言,web管理端Frontend则是基于PHPA制作 ...
- 细说 Java 的深拷贝和浅拷贝
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 未经允许,不得转载. 一.前言 任何变成语言中,其实都有浅拷贝和深拷贝的概念,Java 中也不例外.在对一个现 ...
- php+mysql事务处理例子详细分析实例下载
一.数据引擎innodb用begin,rollback,commit来实现提交事务处理,begin开始事务后出现错误就rollback事务回滚或者没有错误就commit提事务提交确认完成. start ...