@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Content/jquery-3.1.1.js"></script>
<link href="~/Content/zTree-zTree_v3-master/zTree_v3/css/demo.css" rel="stylesheet" />
<link href="~/Content/zTree-zTree_v3-master/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree-zTree_v3-master/zTree_v3/js/jquery.ztree.core.js"></script>
</head>
<body>
<div style="float:left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div style="float:left">
<form id="form0">
<input type="hidden" name="Id" />
<p>
父级:<select name="PId">
<option value="0">--请选择--</option>
</select>
</p>
<p>
名称:<input type="text" name="Name" />
</p>
<p>
<input type="button" value="新增" onclick="add()" />&nbsp;
<input type="button" value="修改" onclick="update()" />&nbsp;
<input type="button" value="删除" onclick="del()" />&nbsp;
</p>
</form>
</div>
</body>
</html>
<script>
//父级Id
var PId = 0;
//setting配置
var setting = {
view: {
dblClickExpand: false,
showLine: false,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: onclick
}
};
//点击事件
function onclick(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
PId = nodes[0]["id"];
upd(PId);
}
//节点数组
var zNodes = [];
/*文档就绪，显示类型树*/
$(function () {
show();
$.ajax({
url: "/Addresses/QueryByPId?PId=0",//数据请求地址
type: "post",
dataType: "json",
success: function (d) {
console.log(d);
for (var i = 0; i < d.length; i++) {
var op = '<option value="' + d[i].Id + '">' + d[i].Name + '</option>'
$("[name=PId]").append(op);
}
}
})
});
//显示
function show() {
$.ajax({
url: "/Addresses/QueryByPId?PId=1",//数据请求地址
type: "post",
success: function (a) {
var data = JSON.parse(a);
zNodes = [];
for (var i = 0; i < data.length; i++) {
zNodes.push({ id: data[i]["Id"], pId: data[i]["PId"], name: data[i]["Name"] });
}
var t = $("#treeDemo");
t = $.fn.zTree.init(t, setting, zNodes);
},
error: function (e) {
console.log(e);
}
})
}
//新增
function add() {
$.ajax({
url: "/Addresses/Add",
type: "post",
data: $("#form0").serialize(),
success: function (d) {
console.log(d);
if (d > 0) {
alert("提交成功");
show();
$("[name=Name]").val("");
$("[name=PId]").val(0);
}
}
})
}
//返填
function upd(id) {
$.ajax({
url: "/Addresses/QueryById?Id="+id,//数据请求地址
type: "post",
dataType: "json",
success: function (d) {
console.log(d);
$("[name=Name]").val(d.Name);
$("[name=PId]").val(d.PId);
$("[name=Id]").val(d.Id);
}
})
}
//修改
function update() {
$.ajax({
url: "/Addresses/Update",
type: "post",
data: $("#form0").serialize(),
success: function (d) {
console.log(d);
if (d > 0) {
alert("提交成功");
show();
$("[name=Name]").val("");
$("[name=PId]").val(0);
$("[name=Id]").val("");
}
}
})
}
//删除
function del() {
if ($("[name=Id]").val() == "") {
alert("请选择要操作的数据");
return;
}
if (confirm("确认删除吗?")) {
$.ajax({
url: "/Addresses/Delete?Id=" + $("[name=Id]").val(),
type: "post",
success: function (d) {
console.log(d);
if (d > 0) {
alert("删除成功");
show();
$("[name=Name]").val("");
$("[name=PId]").val(0);
$("[name=Id]").val("");
}
}
})
}
}
</script>

zTree动态加载的更多相关文章

  1. zTree树插件动态加载

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全 ...

  2. C#动态加载树菜单

    在做权限系统的时候,需要有一个树形的菜单.下图就是一个树形菜单的样式 但问题是,我们可以实现写死的树形菜单.什么是写死的?就是在前台代码中写好要加载的树形菜单是什么样子的.但是我们权限系统的要求是动态 ...

  3. js动态加载css和js

    之前写了一个工具类点此链接里面含有这段代码,感觉用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjs ...

  4. geotrellis使用（二十三）动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  5. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  6. Ext动态加载Toolbar

    在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...

  7. Android动态加载框架汇总

    几种动态加载的比较 1.Tinker 用途:热修复 GitHub地址:https://github.com/Tencent/tinker/ 使用:http://www.jianshu.com/p/f6 ...

  8. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  9. html中的图像动态加载问题

    首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...

随机推荐

  1. setKeepAliveTimeout

    setKeepAliveTimeout 定期唤醒 间隔至少600秒唤醒,唤醒后执行的代码最多10秒要执行完成. 与setMinimumBackgroundFetchInterval的区别呢?perfo ...

  2. Elasticsearch-2.4.3的下载（图文详解）

    第一步:进入Elasticsearch的官网 https://www.elastic.co/ 第二步:点击downloads https://www.elastic.co/downloads 第三步: ...

  3. hadoop学习记录1 初始hadoop

    起因 因为工作需要用到,所以需要学习hadoop,所以记录这篇文章,主要分享自己快速搭建hadoop环境与运行一个demo 搭建环境 网上搭建hadoop环境的例子我看蛮多的.但是我看都比较复杂,要求 ...

  4. zt <Windows Image Acquisition (WIA)> from msdn

    Windows Image Acquisition (WIA)   Windows Image Acquisition (WIA) is the still image acquisition pla ...

  5. Python下载与安装

    Python目前已支持所有主流操作系统,在Linux,Unix,Mac系统上自带Python环境,一般默认装的是Python2版本,Windows系统上没有Pyhton环境,需要我们手动安装一下,过程 ...

  6. linux下in命令

    1.用法 : ln [option] source_file dist_file -f 建立时,将同档案名删除.               -i 删除前进行询问.               ln ...

  7. java核心知识点 --- 线程池ThreadPool

    线程池是多线程学习中需要重点掌握的. 系统启动一个新线程的成本是比较高的,因为它涉及与操作系统交互.在这种情形下,使用线程池可以很好的提高性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更应该考 ...

  8. linux: cmake（未完，待更新）

    参考: http://blog.csdn.net/netnote/article/details/4051620 http://blog.csdn.net/fan_hai_ping/article/d ...

  9. 混合开发Js bridge新秀-DSBridge iOS篇

    这个DSBridge 和我之前开发做的混合开发 用的方式 很相似,所以觉得很是不错,推荐给你大家. DSBridge-IOS:https://github.com/wendux/DSBridge-IO ...

  10. java的内部编码

    java运行时,内存中使用的字符编码是unicode. 在编译java程序时,若我们不指定源程序文件的编码格式,JDK首先获得操作系统的file.encoding参数(它保存的就是操作系统默认的编码格 ...