@{
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. Unity Mecanim 动画系统

    1. Animator 组件 Controller:使用的Animator Controller文件. Avatar:使用的骨骼文件. Apply Root Motion:绑定该组件的GameObje ...

  2. python：一个轻松的递归逻辑

    #递归 age = 10 def dig(n): global age#函数dig引用全局变量age age += 2 n -= 1 if n != 1:#如果满足条件,则调用本身 dig(n) di ...

  3. Invoke and BeginInvoke(转载:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html)

    一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程序员众所周知的,我在此费点笔墨再次记录到自己的日志,以便日后提醒一下自己. 1 ...

  4. 如何了解一个Web项目

    一:学会如何读一个JavaWeb项目源代码 步骤:表结构->web.xml->mvc->db->spring ioc->log->代码 1.先了解项目数据库的表结构 ...

  5. jdk8中的StreamAPI

    1.实体类 package com.zy.model; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.D ...

  6. 循环结构之for循环

    循环结构之for循环(一) 在很多编程语言中都有一种直接.简单的循环,它的一般形式为: 它的执行过程如下: 第一步:执行表达式1,对循环变量做初始化: 第二步:判断表达式2,若其值为真(非0),则执行 ...

  7. Oracle Nested table、Record

    1.如何在PL/SQL中创建和使用Nested table;2.如何在PL/SQL中创建和使用Record; 1.如何在PL/SQL中创建和使用Nested table DECLARE /**创建一个 ...

  8. 开源项目spring-shiro-training思维导图

    写在前面 终于完成了一个开源项目的思维导图解读.选spring-shiro-training这个项目解读是因为它开源,然后涉及到了很多我们常用的技术,如缓存,权限,任务调度,ssm框架,Druid监控 ...

  9. tomcat端口作用

    <Server port="8005" shutdown="SHUTDOWN">   <Connector port="8080&q ...

  10. 2 Python之编程语言介绍及变量

    一: 编程语言介绍 1.机器语言 直接用二进制编程,直接控制硬件,需要掌握硬件的操作细节 优点:执行效率高 缺点:开发效率低 2 汇编语言: 用英文标签取代二级制指令去编写程序,直接控制硬件,需要掌握 ...