zTree -- jQuery 树插件的使用包括添加、编辑(MVC)

香酥小蛋挞

zTree -- jQuery 树插件网址:https://www.treejs.cn/v3/main.php#_zTreeInfo
自行下载所需要的文件
我自己写的一些具体示例：
使用的.netCore 6 后端使用的ORM框架SqlSugar的中的ToTreeAsync方法返回的需要的数据格式，如果没用SqlSugar可以自己写递归来完成

1. public async Task<ResultDto<List<DepartmentDto>>> GetZreeInfo(long pId)
2.         {
3.             try
4.             {
5.                 var tree = await _db.Queryable<DepartmentModel>().Select(x=>new DepartmentDto()).ToTreeAsync(it => it.children, it => it.Dep_Pid, 0);
7.                 return new ResultDto<List<DepartmentDto>>
8.                 {
9.                     code = 0,
10.                     data = tree,
11.                     msg = "",
12.                     count = tree.Count,
13.                 };
15.             }
16.             catch (Exception)
17.             {
19.                 throw;
20.             }
21.         }

复制代码

具体的一些文件的引用根据自己的实际情况去引用

接下来就是怎么去在MVC中去使用
首先是去写添加的时候

1.         <label >责任科室:</label>
2.         
3.             
4.                 <input type="text" id="selectedNode" name="Dep_Names" readonly >
5.             
6.             
7.                 <button type="button"  onclick="openTree()">选择</button>
8.             
9.         

复制代码

这段代码写在你的form表单中你需要的位置即可，注意标签中的name是你数据库中所定义的你需要添加的值的名称

1. [/code]最后根据中的代码具体的参考去完成
2. 接下来是编辑
3. 同样的去复制你的添加界面的代码 只不过我在这里使用到了 asp-for来进行数据回显，你可以根据你自己的方式去实现
4. [code]        
5.             <input type="text" id="selectedNodeId" asp-for="Dep_Ids" readonly >
6.             <input type="hidden" asp-for="Ope_Password" />
7.             <input type="hidden" asp-for="Ope_Id" />
8.             <button  lay-submit lay-filter="formDemo" id="formDemo">添加</button>
9.             <button type="reset" >重置</button>
10.         

复制代码

[code][/code]代码仅供参考，具体的实现可以参考上面的网址和代码。

来源:https://www.cnblogs.com/zkmblog/archive/2023/07/26/17572408.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！