后台代码：
[Area("Adnn1n")]
public class CategoryController : BaseController
{
private readonly DAL.Interface.ICategory dal;
public CategoryController(ICategory dal)
{
this.dal = dal;
}
public IActionResult Index()
{
List<Model.Category> listca = dal.GetList("");
ArrayList arr = TreeTool.GetCaJson(listca);
ViewBag.ztreejson = Newtonsoft.Json.JsonConvert.SerializeObject(arr);
return View();
}
[HttpPost]
public ActionResult Add(Model.Category m)
{
try
{
if (m.Id == 0)
{
dal.Add(m);
return Json(new { code = 0, msg = "新增成功！" });
}
else
{
dal.Update(m);
return Json(new { code = 0, msg = "编辑成功！" });
}
}
catch (Exception ex)
{
return Json(new { code = 1, msg = $"出错：{ex.Message}" });
}
}
public ActionResult Delete(string ids)
{
try
{
int success = 0;
string[] ss = ids.Split(',');
foreach (var item in ss)
{
int x;
if (int.TryParse(item, out x))
{
dal.Delete(x);
success++;
}
}
return Json(new { code = 0, msg = "成功删除" + success + "条记录！" });
}
catch (Exception ex)
{
return Json(new { code = 1, msg = $"出错：{ex.Message}" });
}
}
}
前台代码：
@{
ViewBag.Title = "新闻分类";
}
<link href="~/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/ztree/js/jquery.ztree.core.js"></script>
<table class="layui-table">
<tr>
<td style="vertical-align:top;">
<ul id="treeDemo" class="ztree"></ul>
</td>
<td>
<fieldset>
<legend>增加</legend>
<div class="layui-form-item">
<label class="layui-form-label">父级</label>
<div class="layui-input-block">
<div id="addpname" class="layui-input-inline"></div>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-xs" onclick="settop()">设为顶级</button>
</div>
</div>
<input id="addpid" type="hidden" value="0" />
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" id="addname" name="addname" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button onclick="add()" class="layui-btn" lay-submit lay-filter="formDemo">新增</button>
</div>
</div>
</fieldset>
<fieldset>
<legend>编辑</legend>
<div class="layui-form-item">
<label class="layui-form-label">父级ID</label>
<div class="layui-input-block">
<input type="text" id="modpid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" id="modname" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button onclick="mod()" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">编辑</button>
</div>
</div>
</fieldset>
<fieldset>
<legend>删除</legend>
<div class="layui-form-item">
<label class="layui-form-label">所选</label>
<div id="delname" class="layui-input-block">
</div>
<input type="hidden" id="delid" value="0" />
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button onclick="del()" class="layui-btn layui-btn-danger" lay-submit lay-filter="formDemo">删除</button>
</div>
</div>
</fieldset>
</td>
</tr>
</table>
<script>
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
callback: {
onClick: zTreeOnClick
}
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = @Html.Raw(ViewBag.ztreejson)
//[
// {
// name: "test1", open: true, children: [
// { name: "test1_1" }, { name: "test1_2" }]
// },
// {
// name: "test2", open: true, children: [
// { name: "test2_1" }, { name: "test2_2" }]
// }
//];
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//树结点点击
function zTreeOnClick(event, treeId, treeNode) {
console.log("id:" + treeNode.id + ",name:" + treeNode.name + ",pid:" + treeNode.pid + ",pname:" + treeNode.pname);
//新增区域里的父级是当前点击的节点，即要在当前点击的结点下添加分类
$("#addpid").val(treeNode.id);
$("#addpname").html(treeNode.caname);
//编辑区域
$('#modpid').val(treeNode.pid);
$('#modname').val(treeNode.caname);
//删除区域
$("#delname").html(treeNode.caname);
$("#delid").val(treeNode.id);
};
//设为顶级
function settop() {
$("#addpid").val(0);
$("#addpname").html('');
}
//新增
function add() {
var pid = $("#addpid").val();
var name = $('#addname').val();
if (name == "") {
alert("请输入要新增的分类名称。");
return;
}
var postdata = { Pid: pid, Caname: name };
var url = "/adnn1n/category/add";
$.post(url, postdata, function (data) {
alert(data.msg);
if (data.code == 0) {
location.reload();
}
})
}
//删除
function del() {
if (confirm('是否确认删除该分类？')) {
var id = $("#delid").val();
if (id == 0) {
alert("请选择要删除的分类。");
return;
}
var url = "/adnn1n/category/delete?ids=" + id;
$.get(url, function (data) {
alert(data.msg);
if (data.code == 0) {
location.reload();
}
})
}
}
//编辑
function mod() {
var id = $('#delid').val();
if (id == 0) {
alert("请选择要编辑的分类。");
return;
}
var name = $("#modname").val();
if (name == "") {
alert("请输入要编辑的分类名称。");
return;
}
var pid = $('#modpid').val();
if (pid == "") {
alert("请输入pid。");
return;
}
var postdata = { Id: id, Caname: name, Pid: pid };
var url = "/adnn1n/category/add";
$.post(url, postdata, function (data) {
alert(data.msg);
if (data.code == 0) {
location.reload();
}
})
}
</script>
标签：treeNode,name,val,代码,ztree,var,return,id,页面 From： https://www.cnblogs.com/niunan/p/17583466.html