【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对象关 ...
随机推荐
- Objective-C NSFileManager的使用 各种文件操作
所有方法 都很简单,大概记录一下,写文件并没有是追加的方式而是简单的覆盖 //创建文件夹 - (BOOL)creatDir:(NSString*)newDirName at:(NSString*)di ...
- 【PHP】数据类型转换
PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: (int).(integer):转换成整形 (float).(double).(real):转换成浮点型 (string):转换成字符串 ...
- 【Mysql】MySQL与Oracle的大小写问题
转载来源:http://aofengblog.blog.163.com/blog/static/63170212010101065030136/ MySQL与Oracle在大小写处理上的区别: 1MY ...
- kibana 常用查询方法
下面直接通过实例演示常用的搜索方法 转义特殊字符 + - && || ! () {} [] ^" ~ * ? : \ 注意:以上字符当作值搜索的时候需要用 \ 转义 1.在任 ...
- js中常用的日期总结
js开发中经常用到日期,这里总结一下: /** * 获取当前日期 * 格式:2017-07-31 13:45:14 */ function getNowFormatDate() { var date ...
- 相对路径&绝对路径
粗浅理解: 1)绝对路径:带有访问协议的路径,就是带上http访问协议 2)相对路径: ①以带斜杠开头的相对路径: A)前台相对路径:以web服务器的根路径为参照路径,比如在jsp.HTML中写的路径 ...
- [js高手之路] es6系列教程 - var, let, const详解
function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.l ...
- 【head first python】学习计划
1 初识Python:人人都爱列表 2 共享你的代码:函数模块 3 文件与异常:处理错误 4 持久存储:数据保存到文件 5 推导数据:处理数据! 6 定制数据对象:打包代码与数据 7 Web开发:集成 ...
- Luogu P2966 [USACO09DEC]牛收费路径Cow Toll Paths
题目描述 Like everyone else, FJ is always thinking up ways to increase his revenue. To this end, he has ...
- CBO 基于成本的优化器[基础]
转载:CBO基于成本的优化器 ----------------------------------2013/10/02 CBO基于成本的优化器:让oracle获取所有执行计划的相关信息,通过对这些信息 ...