@{
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. Alternative PHP Cache ( APC )

    简介: Alternative PHP Cache (APC) 是一个开放自由的PHP opcode 缓存.它的目标是提供一个自由.开放和健全的框架用于缓存和优化 PHP 的中间代码,加快 PHP 执 ...

  2. 运行django项目出现Invalid HTTP_HOST header: '192.168.1.111:8000'. You may need to add '192.168.1.111' to ALLOWED_HOSTS

    Request Method: GET Request URL: http://202.201.38.70:8000/angular Django Version: 1.11.3 Exception ...

  3. MYSQL的随机查询的实现方法

    的确是那么回事. MYSQL的随机抽取实现方法.举个例子,要从tablename表中随机提取一条记录,大家一般的写法就是:SELECT * FROM tablename ORDER BY RAND() ...

  4. 78. Subsets 求所有子集（有重复就continue）

    ［抄题］: Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The ...

  5. 三个参数，对mysql存储限制的影响

    1.max_allowed_packet  这个参数会影响单此插入或读取的包的大小,一般和blob字段共用,但要注意一点是这个参数好像是分服务端与客户端的,如果想输出大字段的内容,则在用客户端链接服务 ...

  6. ElasticSearch删除type

    ElasticSearch版本5.X删除type操作 # index_name是index / type_name是type curl -XPOST -u user 'localhost:9200/i ...

  7. JMS 之 Active MQ 的消息传输

    本文使用Active MQ5.6 一.消息协商器(Message Broker) broke:消息的交换器,就是对消息进行管理的容器.ActiveMQ 可以创建多个 Broker,客户端与Active ...

  8. git 进阶操作

    1.blame git blame +文件名,可以查看到某个文件每一行最近一次是由谁编辑修改的.-L 22,33 选项可以制定 2.bisect 开始git bisect:   $ git bisec ...

  9. 选项“6”对 /langversion 无效；必须是 ISO-1、ISO-2、3、4、5 或 Default

    部署MVC的时候,因为服务器.NET版本是4.5.1,所以在vs将.NET版本降到4.5.1的时候发布报错. 原因:C#6降到C#5导致 解决办法:修改web.config配置 ,编译选项改为comp ...

  10. 样条曲线catmull rom转bezier

    b0,..,b3是贝塞尔,c-1, c2是catmull rom控制点 [b0] = 1 [ 0 6 0 0] [c_1] [b1] - [-1 6 1 0] [c0] [b2] 6 [ 0 1 6 ...