一，首先理解ztree插件原理和作用，链接http://www.ztree.me/v3/demo.php#_305 下载ztree增删改的方法
如下代码：
<title>实现无限级树状结构并动态添加增删改功能</title>
<link href="../BootStrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="../BootStrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<script src="../BootStrap/js/jquery-2.0.2.min.js"></script>
<script src="../BootStrap/js/bootstrap.min.js"></script>
<script src="../BootStrap/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="../BootStrap/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="../BootStrap/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../BootStrap/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../BootStrap/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../BootStrap/zTree/js/jquery.ztree.exedit-3.5.js"></script>
<script>
var setting = {
async: {
enable: true,//开启异步加载处理
dataFilter: filter//用于对 Ajax 返回数据进行预处理的函数
},
view: {
expandSpeed: "",//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。
addHoverDom: addHoverDom,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
removeHoverDom: removeHoverDom,//设置鼠标移到节点上，在后面显示一个按钮
selectedMulti: false// 禁止多点同时选中的功能
},
edit: {
enable: true//设置 zTree 进入编辑状态
},
data: {
simpleData: {
enable: true//使用简单 Array 格式的数据
}
},
callback: {
beforeRemove: beforeRemove,//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
beforeRename: beforeRename//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
}
};
//修改异步获取到的节点name属性
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
//删除节点信息
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return ("确认删除 节点 -- " + treeNode.name + " 吗？")
}
//修改节点信息
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
alert("节点名称不能为空.");
return false;
}
var treeInfo = treeNode.id;
}
//添加新的节点
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
return confirm("确认为 " + treeNode.name + " 添加子节点吗？")
});
};
//设置鼠标移到节点上，在后面显示一个按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
var zNodes = [
<%=tree%>
];
//加载显示
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>二.这是最终实现效果图如图所示：
三.前台具体代码实现：
<title>实现无限级树状结构并动态添加增删改功能</title>
<link href="../BootStrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="../BootStrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<script src="../BootStrap/js/jquery-2.0.2.min.js"></script>
<script src="../BootStrap/js/bootstrap.min.js"></script>
<script src="../BootStrap/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="../BootStrap/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="../BootStrap/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../BootStrap/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../BootStrap/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../BootStrap/zTree/js/jquery.ztree.exedit-3.5.js"></script>
<script>
var setting = {
async: {
enable: true,//开启异步加载处理
dataFilter: filter//用于对 Ajax 返回数据进行预处理的函数
},
view: {
expandSpeed: "",//zTree 节点展开、折叠时的动画速度，设置方法同 JQuery 动画效果中 speed 参数。
addHoverDom: addHoverDom,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
removeHoverDom: removeHoverDom,//设置鼠标移到节点上，在后面显示一个按钮
selectedMulti: false// 禁止多点同时选中的功能
},
edit: {
enable: true//设置 zTree 进入编辑状态
},
data: {
simpleData: {
enable: true//使用简单 Array 格式的数据
}
},
callback: {
beforeRemove: beforeRemove,//用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
beforeRename: beforeRename//用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
}
};
//修改异步获取到的节点name属性
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
//删除节点信息
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return ("确认删除 节点 -- " + treeNode.name + " 吗？")
}
//修改节点信息
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
alert("节点名称不能为空.");
return false;
}
var treeInfo = treeNode.id;
}
//添加新的节点
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
return confirm("确认为 " + treeNode.name + " 添加子节点吗？")
});
};
//设置鼠标移到节点上，在后面显示一个按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
var zNodes = [
<%=tree%>
];
//加载显示
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
ajax调用实现：
using Boss.DAL;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class System_Ajax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentType = "text/plain";
// 在完全处理之后再发送到请求客户端
Response.BufferOutput = true;
// 在服务器端不缓存页
Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
// 设置任何代理服务器不缓存页
Response.AddHeader("pragma", "no-cache");
// 设置请求的客户端浏览器不缓存页
Response.AddHeader("cache-control", "");
Response.CacheControl = "no-cache";
string action = Request["action"];
string result = "";
// 根据Action执行操作
switch (action)
{
//case "GetItemData":
// result = GetItemData();
// break;
case "ReName":
result = ReName();
break;
case "Remove":
result = Remove();
break;
case "Insert":
result = InsertNode();
break;
default:
break;
}
Response.Write(result);
}
/// <summary>
/// 添加
/// </summary>
/// <returns></returns>
private string InsertNode()
{
string flag = "false";
string _Pid = Request["_Pid"].ToString();
// string _Pid = Request["_Pid"].ToString().Split('_')[1].ToString();
SysDataAndSQLClass ds = new SysDataAndSQLClass();
string SQL = " insert into Sys_Tree(PID,ClassID,Title,describe,URL) values(" + _Pid + " ,1, 'newNode',' ', '#')";
int s = Convert.ToInt32(Boss.DAL.SysDataAndSQLClass.ExecTier(SQL, "default"));
if (s > 0)
{
flag = "success";
}
return flag;
}
/// <summary>
/// 删除
/// </summary>
/// <returns></returns>
private string Remove()
{
string flag = "false";
string _id = Request["_tid"].ToString();//.Split('_')[1].ToString();
SysDataAndSQLClass ds = new SysDataAndSQLClass();
string sqlstr = "Update Sys_Tree set IsValid=0 where ID=" + _id + " and IsValid=1";
int s = Convert.ToInt32(Boss.DAL.SysDataAndSQLClass.ExecTier(sqlstr, "default"));
if (s > 0)
{
flag = "success";
}
return flag;
}
/// <summary>
/// 修改
/// </summary>
/// <returns></returns>
private string ReName()
{
string flag = "false";
string _id = Request["_tid"].ToString();//.Split('_')[1].ToString();
string _newname = Request["_newname"];
SysDataAndSQLClass ds = new SysDataAndSQLClass();
string sqlstr = "Update Sys_Tree set Title='" + _newname + "' where ID=" + _id + " and IsValid=1";
int s = Convert.ToInt32(Boss.DAL.SysDataAndSQLClass.ExecTier(sqlstr, "default"));
if (s > 0)
{
flag = "success";
}
return flag;
}
}
四.后台代码具体实现：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;
using Boss.DAL;
public partial class System_Sys_TreeList : System.Web.UI.Page
{
public string tree, TopClass;
protected void Page_Load(object sender, EventArgs e)
{
//取得传过来的TopClassid从而判断要读取哪些功能菜单
//TopClass = Request.QueryString["id"].ToString();
//TopClass = "0";
if (!IsPostBack)
{
bindMenu();//获取父级ID
}
// getStrXml();
_GetXml();
}
#region 获取父级菜单
/// <summary>
/// 读取一级菜单
/// </summary>
private void bindMenu()
{
//" + TopClass + "
SysDataAndSQLClass ds = new SysDataAndSQLClass();//读取一级菜单
DataTable dt = ds.ExecSQLDataTable("select id,title from Sys_Tree WHERE pid=0 And IsValid=1 ORDER BY id ASC", "default");
ddlMenuF.Items.Clear();
ddlMenuF.Items.Add(new ListItem("-顶级-", "0"));
for (int i = 0; i < dt.Rows.Count; i++)
{
ddlMenuF.Items.Add(new ListItem(dt.Rows[i]["title"].ToString(), dt.Rows[i]["ID"].ToString()));
}
ddlMenuT.Items.Add(new ListItem("请选择", "0"));
ddlMenuTh.Items.Add(new ListItem("请选择", "0"));
}
/// <summary>
/// ///读取二级菜单
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlMenuF_SelectedIndexChanged(object sender, EventArgs e)
{
string id = ddlMenuF.SelectedValue;
ddlMenuT.Items.Clear();
ddlMenuTh.Items.Clear();
ddlMenuT.Items.Add(new ListItem("请选择", "0"));
ddlMenuTh.Items.Add(new ListItem("请选择", "0"));
if (id != "0")
{
SysDataAndSQLClass ds = new SysDataAndSQLClass();//读取二级菜单
DataTable dt = ds.ExecSQLDataTable("select id,title from Sys_Tree WHERE pid=" + id + " And IsValid=1 ORDER BY id ASC", "default");
for (int i = 0; i < dt.Rows.Count; i++)
{
ddlMenuT.Items.Add(new ListItem(dt.Rows[i]["title"].ToString(), dt.Rows[i]["ID"].ToString()));
}
}
ddlMenuTh.Visible = true;
}
/// <summary>
/// //读取三级菜单;
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ddlMenuT_SelectedIndexChanged(object sender, EventArgs e)
{
string id = ddlMenuT.SelectedValue;
ddlMenuTh.Items.Clear();
ddlMenuTh.Items.Add(new ListItem("请选择", "0"));
if (id != "0")
{
SysDataAndSQLClass ds = new SysDataAndSQLClass();
DataTable dt = ds.ExecSQLDataTable("select id,title from Sys_Tree WHERE pid=" + id + " And IsValid=1 ORDER BY id ASC", "default");
for (int i = 0; i < dt.Rows.Count; i++)
{
ddlMenuTh.Items.Add(new ListItem(dt.Rows[i]["title"].ToString(), dt.Rows[i]["ID"].ToString()));
}
if (dt.Rows.Count == 0)
{
ddlMenuTh.Visible = false;
}
else
{
ddlMenuTh.Visible = true;
}
}
}
#endregion
#region 获取菜单树
protected void _GetXml()
{
//" + TopClass + "
string _xml = "";
string _tag = "";
SysDataAndSQLClass ds = new SysDataAndSQLClass();
string sqlstr = "select id,pid,title,url from Sys_Tree where pid=0 And IsValid=1 ORDER BY id ASC ";
DataTable dt = ds.ExecSQLDataTable(sqlstr, "default");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
_xml += "{\nid:\"" + dt.Rows[i]["ID"].ToString() + "\",pId:\"" + dt.Rows[i]["PID"].ToString() + "\", name: \"" + dt.Rows[i]["title"].ToString() + "\", open: true,\n";
_xml += "children: [\n";
_tag = _GetTag(dt.Rows[i]["id"].ToString()).ToString();
_xml += _tag + " \n ]\n},";
}
_xml += "";
tree = _xml;
}
}
protected string _GetTag(string _mid)
{
string _xml = "";
SysDataAndSQLClass ds = new SysDataAndSQLClass();
string sqlstr = "select id,pid,title,url from Sys_Tree where pid=" + _mid + " And IsValid=1 ORDER BY id ASC ";
DataTable dt = ds.ExecSQLDataTable(sqlstr, "default");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
string sql = "select id,title,url from Sys_Tree where pid=" + dt.Rows[i]["id"].ToString() + " And IsValid=1 ORDER BY id ASC ";
DataTable dt_sql = ds.ExecSQLDataTable(sql, "default");
if (dt_sql.Rows.Count > 0)
{
_xml += "{\nid:\"" + dt.Rows[i]["ID"].ToString() + "\",pId:\"" + dt.Rows[i]["PID"].ToString() + "\", name: \"" + dt.Rows[i]["title"].ToString() + "\", open: true,\n";
_xml += "children: [\n";
_xml += _GetTag(dt.Rows[i]["id"].ToString()).ToString() + " \n ]\n},";
}
else
{
_xml += " { id:\"" + dt.Rows[i]["ID"].ToString() + "\",pId:\"" + dt.Rows[i]["PID"].ToString() + "\",name:\"" + dt.Rows[i]["title"].ToString() + "\"},";//新方法
}
}
}
return _xml;
}
#endregion
/// <summary>
/// 添加树
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ButtonAddSys_IBmenuTree_Click(object sender, EventArgs e)
{
string PID = ddlMenuF.Text;
if (ddlMenuTh.SelectedValue != "0")//第三项不为空时,父级菜单ID为三级菜单的ＩＤ
{
PID = ddlMenuTh.Text;
}
else
{
if (ddlMenuT.SelectedValue != "0")//第三项不为空时且第二项不为空时,父级菜单ID为二级菜单的ＩＤ
{
PID = ddlMenuT.Text;
}
else
{
PID = ddlMenuF.Text;//第三项不为空时且第二项为空时,父级菜单ID为一级或顶级菜单的ＩＤ
}
}
if (PID == "0")
{
PID = TopClass.ToString();
}
string title = txttitle.Text;
string URL = txtURL.Text;
string OrderBy = txtOrderBy.Text;
string SysbrandID = "";
string CreateLoginId = Session["UserName"].ToString();
//为存储过程调用准备参数
string tabName = "Sys_Tree";
string columns = "PID,title,URL,SysbrandID";//(父表主键),Pid
string values = "'" + PID + "','" + title + "','" + URL + "','" + SysbrandID + "'";//(父表主键值),'" + Pid + "'
//执行存储过程调用类
int i = Boss.DAL.SysDataAndSQLClass.Sys_IB_Insert(tabName, columns, values, "default");
if (i == 0)
{
//写日志
int ilog = Convert.ToInt32(SysCommonClass.InsertSysLog("Insert", "TableName:" + tabName, "Columns:" + columns + " |Values:" + values).ToString());
//调用执行写系统日志
AddMSN.Text = "添加成功!";
_GetXml();
}
}
}
感谢关注，希望各位博友能够多多交流指正
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
