根据上一讲的可以加载一棵大树,这讲讲下如果操作这颗大树

<link href="../../Scripts/JQuery-zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="../../Scripts/JQuery-zTree/js/jquery-1.4.4.min.js"></script>
<script src="../../Scripts/JQuery-zTree/js/jquery.ztree.all-3.5.min.js"></script>
<style type="text/css">
.ztree li span.button.add { margin-left: 2px; margin-right: -1px; background-position: -144px ; vertical-align: top; *vertical-align: middle; }
a { text-decoration: underline; }
</style>
<script type="text/javascript">
/*
动态数据测试部分开始 */
var log, className = "dark";
var treeID = "treeDemo";
var curDragNodes, autoExpandNode;
var newCount = ; //异步加载节点
var setting4 = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: null
}
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn,
removeTitle: "删除",
renameTitle: "编辑",
drag: {
autoExpandTrigger: true,
prev: dropPrev,
inner: dropInner,
next: dropNext
}
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
async: {
//异步加载
enable: true,
url: "/ZTree/AsyncGetNodes",
autoParam: ["id", "name", "pId"]
},
callback: {
/*节点获取与展开回调*/
beforeExpand: beforeExpand,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError,
/*编辑与删除回调*/
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename,
/*拖动回调*/
beforeDrag: beforeDrag,
beforeDrop: beforeDrop,
beforeDragOpen: beforeDragOpen,
onDrag: onDrag,
onDrop: onDrop,
onExpand: onExpand
}
};
function beforeEditName(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
var zTree = $.fn.zTree.getZTreeObj(treeID);
zTree.selectNode(treeNode);
return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗?");
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "" : "dark");
var zTree = $.fn.zTree.getZTreeObj(treeID);
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗?");
}
function beforeRename(treeId, treeNode, newName, isCancel) {
className = (className === "dark" ? "" : "dark");
if (newName.length == ) {
alert("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj(treeID);
setTimeout(function () { zTree.editName(treeNode) }, );
return false;
}
return true;
}
function onRemove(e, treeId, treeNode) {
$.ajax({
url: '/ZTree/AsyncDelNodes', //url action是方法的名称
data: { id: treeNode.id },
type: 'POST',
success: function (data) {
alert(data);
}
}); }
function onRename(e, treeId, treeNode, isCancel) {
alert("编辑了节点" + treeNode.id + " " + treeNode.name);
$.ajax({
url: '/ZTree/AsyncEditNodes', //url action是方法的名称
data: { id: treeNode.id, name: treeNode.name },
type: 'POST',
success: function (data) {
alert(data);
}
}); }
function showRemoveBtn(treeId, treeNode) {
//return !treeNode.isFirstNode;
return true;
}
function showRenameBtn(treeId, treeNode) {
// return treeNode.isLastNode;
return true;
}
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > ) 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(treeID);
zTree.addNodes(treeNode, {
id: ( + newCount), pId: treeNode.id, name: "new node" + newCount
});
$.ajax({
url: '/ZTree/AsyncAddNodes', //url action是方法的名称
data: { id: ( + newCount), pid: treeNode.id, name: "new node" + newCount },
type: 'POST',
success: function (data) {
//异常完成后,刷新父节点及下面所有子节点
zTree.reAsyncChildNodes(treeNode, "refresh");
}
});
newCount++;
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
function createTree() {
$.ajax({
url: '/ZTree/AsyncGetNodes', //url action是方法的名称
data: { id: },
type: 'Get',
dataType: "text", //可以是text,如果用text,返回的结果为字符串;如果需要json格式的,可是设置为json
success: function (data) {
$.fn.zTree.init($("#" + treeID), setting4, eval('(' + data + ')'));
},
error: function (msg) {
alert(" 数据加载失败!" + msg);
}
});
}
function beforeExpand(treeId, treeNode) {
if (!treeNode.isAjaxing) {
return true;
} else {
alert("zTree 正在下载数据中,请稍后展开节点。。。");
return false;
}
}
function onAsyncSuccess(event, treeId, treeNode, msg) { }
function onAsyncError() {
alert(" 数据加载失败");
}
$(document).ready(function () {
createTree();
}); function dropPrev(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i = , l = curDragNodes.length; i < l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
function dropInner(treeId, nodes, targetNode) { if (targetNode && targetNode.dropInner === false) {
return false;
} else {
for (var i = , l = curDragNodes.length; i < l; i++) {
if (!targetNode && curDragNodes[i].dropRoot === false) {
return false;
} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
return false;
}
}
}
return true;
}
function dropNext(treeId, nodes, targetNode) { var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i = , l = curDragNodes.length; i < l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
function beforeDrag(treeId, treeNodes) {
className = (className === "dark" ? "" : "dark");
for (var i = , l = treeNodes.length; i < l; i++) {
if (treeNodes[i].drag === false) {
curDragNodes = null;
return false;
} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
curDragNodes = null;
return false;
}
}
curDragNodes = treeNodes;
return true;
}
function beforeDragOpen(treeId, treeNode) {
autoExpandNode = treeNode;
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
className = (className === "dark" ? "" : "dark");
return true;
}
function onDrag(event, treeId, treeNodes) {
className = (className === "dark" ? "" : "dark");
}
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
className = (className === "dark" ? "" : "dark");
$.ajax({
url: '/ZTree/AsyncDragNodes', // url action是方法的名称
data: { id: treeNodes[].id, pid: targetNode.id, name: treeNodes[].name, moveType: moveType, isCopy: isCopy },
type: 'POST',
success: function (data) {
}
}); }
function onExpand(event, treeId, treeNode) {
if (treeNode === autoExpandNode) {
className = (className === "dark" ? "" : "dark");
}
}
</script> <div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>

上面对应的各种JS事件,对应mvc代码

   #region 对节点的操作
/// <summary>
/// 得到一级子节点
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public string AsyncGetNodes(int? id)
{
var model = irepository.GetEntities()
.Where(i => i.ParentID == id).OrderBy(i => i.Sortable); return model.ToJson();
}
/// <summary>
/// 添加节点
/// </summary>
/// <param name="id"></param>
/// <param name="name"></param>
/// <param name="pid"></param>
/// <returns></returns>
public string AsyncAddNodes(int id, string name, int pid)
{
try
{
//得到父对象,但设置它的isParent属性
irepository.Modify(i => new Category
{
ID = pid,
IsParent = true,
}); var entity = new Category
{
Name = name,
ParentID = pid,
CreateDate = DateTime.Now,
Level = ,
IsParent = false,
};
irepository.Add(entity); return entity.ID.ToString();
}
catch (Exception ex)
{ return ex.Message;
} }
/// <summary>
/// 编辑节点(重命名)
/// </summary>
/// <param name="id"></param>
/// <param name="name"></param>
/// <returns></returns>
public string AsyncEditNodes(int id, string name)
{
try
{
irepository.Modify(i => new Category
{
ID = id,
Name = name,
});
return "操作成功";
}
catch (Exception ex)
{ return ex.Message;
}
}
/// <summary>
/// 删除节点
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public string AsyncDelNodes(int id)
{
try
{
irepository.Remove(irepository.GetEntity(i => i.ID == id));
return "操作成功";
}
catch (Exception ex)
{
return ex.Message;
}
}
/// <summary>
/// 拖拽节点
/// </summary>
/// <param name="id"></param>
/// <param name="pid"></param>
/// <param name="sortable"></param>
/// <returns></returns>
public string AsyncDragNodes(
int id,
int pid,
string name,
string moveType,
bool isCopy)
{
try
{
var parent = irepository.GetEntity(i => i.ID == pid);
var parentSons = irepository.GetEntities(i => i.ParentID == pid);
var current = irepository.GetEntity(i => i.ID == id);
if (moveType == "inner")
parent.isParent = true;
else if (parentSons == null || parentSons.Count() == )
parent.isParent = false;
if (isCopy)//复制,前台目前不能实现
{
irepository.Add(new Category
{
ParentID = pid,
Name = name,
CreateDate = DateTime.Now,
});
}
else
{
if (moveType == "inner")
{
current.ParentID = pid;
irepository.Modify(current);
}
else
{
current.ParentID = parent.ParentID;//同级移动时,与目标节点父ID相同
current.Sortable = moveType == "next"
? parent.Sortable +
: parent.Sortable - ;
irepository.Modify(current);
}
}
irepository.Modify(parent);
return "操作成功";
}
catch (Exception ex)
{ return ex.Message;
}
}
#endregion

上面的代码只是对树结果做的最基本的操作,其中拖拽时的复制操作(按着ctrl键,拖拽节点),后台没有进行实现。

MVC小系列(十五)【MVC+ZTree实现对树的CURD及拖拽操作】的更多相关文章

  1. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

  2. MVC+ZTree实现对树的CURD及拖拽操作

    上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除节点,编辑 ...

  3. MVC小系列(五)【在过滤器里引入重定向】

    在过滤器里引入重定向 过滤器的引入:如果用户进行一个操作,但没有登录,可以在Post方法上加个过滤器以验证用户是否登录,如果登录成功,则继续进行操作,如果没有登录,则实现Url的重定向,进行登录页 授 ...

  4. MVC小系列(八)【改变Areas的FindView顺序】

    MVC小系列(八)[改变Areas的FindView顺序] 一般项目比较大的话,会根据模块建立Areas,这样结构清晰,也有利于路由的部署, 1 Areas下有自己的_LayOut模板,而如果希望所有 ...

  5. MVC小系列(七)【分部视图中的POST】

    MVC小系列(七)[分部视图中的POST] 在PartialView中进行表单提交的作用:1 这个表单不止一个地方用到,2 可能涉及到异步的提交问题 这两种情况都可能需要把表单建立在分部视图上, 使用 ...

  6. MVC小系列(九)【引入namespace】

    以前在页面引入一个namespace,可以这样: <%@ Import Namespace="Web.Helpers" %> 如果空间是所有页面都需要的,可以写进配置文 ...

  7. 学习ASP.NET Core Razor 编程系列十五——文件上传功能(三)

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  8. 聊聊MySQL的加锁规则《死磕MySQL系列 十五》

    大家好,我是咔咔 不期速成,日拱一卒 本期来聊聊MySQL的加锁规则,知道这些规则后可以判断SQL语句的加锁范围,同时也可以写出更好的SQL语句,防止幻读问题的产生,在能力范围内最大程度的提升MySQ ...

  9. MVC自学系列之三(MVC视图-Views)

    View的约定 1.根据约定,Views目录下包含着每一个与Controller同名但是没有像Controller后缀的文件夹:因此对于控制器HomeController就对应在views目录下有个目 ...

随机推荐

  1. java汉字转拼音以及得到首字母通用方法

    package oa.common.utils;   import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.piny ...

  2. Datatable转换成List实体对象列表 几个实例

    一, /// <summary> /// 将Datatable转换为List集合 /// </summary> /// <typeparam name="T&q ...

  3. [CODEVS1258]关路灯

    题目描述 Description 多瑞卡得到了一份有趣而高薪的工作.每天早晨他必须关掉他所在村庄的街灯.所有的街灯都被设置在一条直路的同一侧. 多瑞卡每晚到早晨5点钟都在晚会上,然后他开始关灯.开始时 ...

  4. node系列2

    文件操作 NodeJS能够操作文件.小至文件查找,大至代码编译,几乎没有一个前端工具不操作文件.换个角度讲,几乎也只需要一些数据处理逻辑,再加上一些文件操作,就能够编写出大多数前端工具,本章将介绍与之 ...

  5. HOG特征

    HOG(Histogram of gradient)统计图像局部区域的梯度方向信息来作为该局部图像区域的表征.HOG特征具有以下几个特点: (1)不具有旋转不变性(较大的方向变化),实际应用中不变性是 ...

  6. 除去重复记录distinct

    在查询数据库时候,可以使用distinct关键字过滤重复记录 例如 SELECT distinct ShiftID FROM [AdventureWorks].[HumanResources].[Em ...

  7. 【原创】MapReduce编程系列之表连接

    问题描述 需要连接的表如下:其中左边是child,右边是parent,我们要做的是找出grandchild和grandparent的对应关系,为此需要进行表的连接. Tom Lucy Tom Jim ...

  8. HW5.22

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  9. jqGrid 设置列宽

    在jqgrid显示出来之后,需要手动调整列宽. 1. 经过调查jqgrid本身不支持指定列宽,当然这个是说的的初始化完成后. 2. 经过调查手动是可以调整列宽,所以进行了事件的查看resizestop ...

  10. 问题-[VMware Workstation]断电后,重启电脑,之后就提示“内部错误”

    问题现象:突然断电后,重启电脑,再打开VMware Workstation,启动不了.之后就提示“内部错误”.问题原因:希望高人指点.问题处理:关闭VMware Workstation,在快捷方式上, ...