@{
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. AMF_OBJECT 数据结构浅析

    组织的比较散,主要是标记一下有关 AMF_OBJECT 数据组织结构.其标识嵌套结束则为 0x 00 00 09 原始数据结构已知: key=“0123456”: Value 的值是一个结构体如下: ...

  2. Mysql 性能优化 ( my.cnf )

    简介: Mysql 参数优化 一.Mysql 源码编译参数 shell > yum -y install gcc gcc-c++ make cmake ncurses-devel zlib-de ...

  3. jBPM4.4 eclipse插件安装

    一.工具下载     jBPM 图形化流程设计器采用eclipse做为平台,我们可以先到jBPM官方网站下jBPM4.4,地址:http://sourceforge.net/projects/jbpm ...

  4. 2.Hadoop集群搭建之Hadoop（包含HDFS和Yarn）安装

    前期准备 下载JDK 6.0以上版本 下载Hadoop 2.4.1 1. 安装JDK 因为Hadoop是Java开发的,所以需要安装JDK,建议JDK 6.0以上. 解压JDK tar -zxvf J ...

  5. Sqlserver中查找包含某一列的所有的表

    select cols.name,cols.id,objs.name,objs.id from syscolumns cols INNER JOIN sysobjects objs on cols.i ...

  6. Linux实战教学笔记24:SSH连接原理及ssh-key

    目录 第二十四节 SSH连接原理及ssh-key讲解 第1章 SSH服务 1.1 ssh介绍 1.2 知识小结 第2章 ssh结构 2.1 SSH加密技术 第3章 ssh服务认证类型 3.1 基于口令 ...

  7. JRE,JVM,JDK

    JRE,JVM,JDK的关系.JRE(Java Runtime Environment)java运行环境,我们可以把它看成是一个操作系统.也就是说JRE提供了Java执行的软件平台. JVM (Jav ...

  8. WebPack 从安装到闲置

    序言:各种技术在研究过程中常常会出现在实际工作中难以实施的情况,于是就慢慢闲置,但学毕竟还是必须要学学的,就看能用到多少,至少开拓了眼界,谨以此安慰下那些学完又闲置的技术~ 跑题结束,以下开始正式配置 ...

  9. 14. Longest Common Prefix 最长的公共字符串开头

    ［抄题］: Write a function to find the longest common prefix string amongst an array of strings. 在 " ...

  10. table 合并行和列

    table合并行列,以及拆分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...