@{
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()" />
<input type="button" value="修改" onclick="update()" />
<input type="button" value="删除" onclick="del()" />
</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>