首页 > 其他分享 >.Net6基于layui和ztree完成树形选择器添加和反填和修改

.Net6基于layui和ztree完成树形选择器添加和反填和修改

时间：2023-07-27 21:22:55浏览次数：68  
标签：name title layui 节点 ztree 科室 var nodes 选择器

以责任科室为例存储两个值ResponsibleDepartment和AoId，ResponsibleDepartment:是科室名称，AoId是科室Id

添加:

<div class="layui-form-item layui-form-text">
<label class="layui-form-label">责任科室</label>
<div class="layui-input-block">
@* <input type="text" name="ResponsibleDepartment" required lay-verify="required" placeholder="请输入责任科室" autocomplete="off" class="layui-input">*@
<div class="layui-inline">
<input type="text" id="selectedNode" name="ResponsibleDepartment" readonly class="layui-input">
</div>
<div class="layui-inline">
<button type="button" class="layui-btn layui-btn-primary" onclick="openTree()">选择</button>
</div>
</div>
</div>

<input type="text" id="selectedNodeId" name="AoId" readonly class="layui-input">

//引入

<script src="~/layui-v2.7.6/layui/layui.js"></script>
<link href="~/layui-v2.7.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<!-- 引入 ZTree 的相关文件 -->
<link href="~/lib/ztree_v3/css/ztreestyle/ztreestyle.css" rel="stylesheet" />
<script src="~/lib/ztree_v3/js/jquery-1.4.4.min.js"></script>
<script src="~/lib/ztree_v3/js/jquery.ztree.all.min.js"></script>
<script src="~/lib/ztree_v3/js/jquery.ztree.all.js"></script>

<!-- 树形选择器的弹层 -->
<script type="text/html" id="treeSelector">
<ul id="treeDemo" class="ztree"></ul>
</script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;

//// 构造责任科室树选择器的数据
//var treeData = [
// {
// name: '责任科室1',
// id: 1,
// title: '责任科室1', // 新增字段存储名称
// children: [
// { name: '子科室1', id: 11, title: '子科室1' },
// { name: '子科室2', id: 12, title: '子科室2' }
// ]
// },
// {
// name: '责任科室2',
// id: 2,
// title: '责任科室2',
// children: [
// { name: '子科室3', id: 21, title: '子科室3' },
// { name: '子科室4', id: 22, title: '子科室4' }
// ]
// }
//];
var treeData = [];
$.ajax({
url: '@Url.Action("GetAdministrativeOffice")',
type:'get',
async:false,
success:function(res){
treeData = res;
console.log(treeData);
}
})
// 打开责任科室树选择器
window.openTree = function () {
var index = layer.open({
type: 1,
title: '选择科室',
content: $('#treeSelector').html(),
area: ['300px', '400px'],
success: function (layero, index) {
// 渲染责任科室树选择器
var setting = {
view: {
dblClickExpand: false, // 禁止双击展开收起
showLine: true // 显示连接线
},
data: {
simpleData: {
enable: true,
idKey: 'aoId',
pIdKey: null,
rootPId: null
},
key: {
name: 'aoName', // 节点名称字段
title: 'aoName' // 新增节点名称字段
}
},
check: {
enable: true, // 开启多选功能
chkStyle: 'checkbox', // 设置选择框的样式为复选框
chkboxType: { y: 's', n: 's' } // 只在父节点和子节点之间设置关联关系，不关联父级
},
callback: {
onCheck: function (event, treeId, treeNode) {
var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTreeObj.getCheckedNodes(true);

var selectedNodeNames = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) { // 判断节点是否为父节点
selectedNodeNames.push(nodes[i].aoName); // 只将非父节点的值添加到数组中
}
}

$('#selectedNode').val(selectedNodeNames.join(', '));

var selectedNodeIds = []; // 存储选择的节点ID

for (var i = 0; i < nodes.length; i++) {
selectedNodeIds.push(nodes[i].aoId); // ID添加到数组中
}
$('#selectedNodeId').val(selectedNodeIds.join(', '));
}
}
};
$.fn.zTree.init($('#treeDemo'), setting, treeData);

}
});
};

});
</script>

反填和修改:

<div class="layui-form-item layui-form-text">
<label class="layui-form-label">责任科室</label>
<div class="layui-input-block">
<div class="layui-inline">
<input type="text" id="selectedNode" asp-for="ResponsibleDepartment" readonly class="layui-input">
</div>
<div class="layui-inline">
<button type="button" class="layui-btn layui-btn-primary" onclick="openTree()">选择</button>
</div>
</div>
</div>

<input type="text" id="selectedNodeId" asp-for="AoId" readonly class="layui-input">

//以上代码使用asp-for反填

//引入

<script src="~/layui-v2.7.6/layui/layui.js"></script>
<link href="~/layui-v2.7.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<!-- 引入 ZTree 的相关文件 -->
<link href="~/lib/ztree_v3/css/ztreestyle/ztreestyle.css" rel="stylesheet" />
<script src="~/lib/ztree_v3/js/jquery-1.4.4.min.js"></script>
<script src="~/lib/ztree_v3/js/jquery.ztree.all.min.js"></script>
<script src="~/lib/ztree_v3/js/jquery.ztree.all.js"></script>

<!-- 树形选择器的弹层 -->
<script type="text/html" id="treeSelector">
<ul id="treeDemo" class="ztree"></ul>
</script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;

//// 构造责任科室树选择器的数据
//var treeData = [
// {
// name: '责任科室1',
// id: 1,
// title: '责任科室1', // 新增字段存储名称
// children: [
// { name: '子科室1', id: 11, title: '子科室1' },
// { name: '子科室2', id: 12, title: '子科室2' }
// ]
// },
// {
// name: '责任科室2',
// id: 2,
// title: '责任科室2',
// children: [
// { name: '子科室3', id: 21, title: '子科室3' },
// { name: '子科室4', id: 22, title: '子科室4' }
// ]
// }
//];
var treeData = [];
$.ajax({
url: '@Url.Action("GetAdministrativeOffice")',
type:'get',
async:false,
success:function(res){
treeData = res;
}
})
// 打开责任科室树选择器
window.openTree = function () {
var index = layer.open({
type: 1,
title: '选择科室',
content: $('#treeSelector').html(),
area: ['300px', '400px'],
success: function (layero, index) {
// 渲染责任科室树选择器
var setting = {
view: {
dblClickExpand: false, // 禁止双击展开收起
showLine: true // 显示连接线
},
data: {
simpleData: {
enable: true,
idKey: 'aoId',
pIdKey: null,
rootPId: null
},
key: {
name: 'aoName', // 节点名称字段
title: 'aoName' // 新增节点名称字段
}
},
check: {
enable: true, // 开启多选功能
chkStyle: 'checkbox', // 设置选择框的样式为复选框
chkboxType: { y: 's', n: 's' } // 只在父节点和子节点之间设置关联关系，不关联父级
},
callback: {
onCheck: function (event, treeId, treeNode) {
var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTreeObj.getCheckedNodes(true);

var selectedNodeNames = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) { // 判断节点是否为父节点
selectedNodeNames.push(nodes[i].aoName); // 只将非父节点的值添加到数组中
}
}

$('#selectedNode').val(selectedNodeNames.join(', '));

var selectedNodeIds = []; // 存储选择的节点ID

for (var i = 0; i < nodes.length; i++) {
selectedNodeIds.push(nodes[i].aoId); // ID添加到数组中

}
$('#selectedNodeId').val(selectedNodeIds.join(', '));
}
}
};
$.fn.zTree.init($('#treeDemo'), setting, treeData);
//反填树的操作
//获取AoId的值
var AoId = $("#selectedNodeId").val();
console.log(AoId);
//转化为数组
var selectedNodeIds = AoId.split(",");
//获取责任科室树的 zTree 对象
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
//设置为选中状态
for (var i = 0; i < selectedNodeIds.length; i++) {
var node = zTreeObj.getNodeByParam("aoId", selectedNodeIds[i], null);
zTreeObj.checkNode(node, true, false); //设置为选中状态
}
// 更新已选择的节点名称
var nodes = zTreeObj.getCheckedNodes(true);
var selectedNodeNames = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) {
selectedNodeNames.push(nodes[i].aoName);
}
}

$('#selectedNode').val(selectedNodeNames.join(', '));

// 更新已选择的节点ID
var selectedNodeId = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) {
selectedNodeId.push(nodes[i].aoId);
}
}
$('#selectedNodeId').val(selectedNodeId.join(', '));
}
});
};
});
</script>

标签：name,title,layui,节点,ztree,科室,var,nodes,选择器
From： https://www.cnblogs.com/buzhilichou/p/17586066.html

相关文章

  • Vue2的/deep/深度选择器失效了？
    /deep/在Vue2样式中的问题。太长不看：不要在VueSFC以外的地方使用/deep/。对于Vue3，请使用最新的:deep()伪类选择器。什么是/deep//deep/是Vue2中一个重要的样式选择器，可以用于选择封装好的组件内部的样式。如果直接在Vue组件上设置class属性，该属性只附加于子......
  • ztree分类页面代码
    ztree分类页面代码    后台代码：[Area("Adnn1n")]publicclassCategoryController:BaseController{privatereadonlyDAL.Interface.ICategorydal;publicCategoryController(ICategorydal){this.dal=......
  • zTree -- jQuery 树插件的使用包括添加、编辑(MVC)
    zTree--jQuery树插件网址:https://www.treejs.cn/v3/main.php#_zTreeInfo自行下载所需要的文件我自己写的一些具体示例：使用的.netCore6后端使用的ORM框架SqlSugar的中的ToTreeAsync方法返回的需要的数据格式，如果没用SqlSugar可以自己写递归来完成publicasyncTask<Resul......
  • css3新特性笔记之“选择器” .
    http://www.blueidea.com/tech/web/2009/6930_2.asp选择器属性选择器   匹配包含以特定的值开头的属性的元素     匹配包含以特定的值结尾的属性的元素     匹配包含含有特定的值的属性的元素  (1)[att^="value"]匹配包含以特定的值开头的属性的元素(2)[att$......
  • layui 表单提交
    新手小白，使用layui的时候，表单如何像普通表单那样提交呢？如下：只需要在回调函数里返回true,并且在form表单正常添加action和method属性就行！如果返回false;将会拦截 阻止默认form跳转，此时可以在函数里通过ajax进行数据交互 <formclass="layui-form"action="${basepat......
  • [爬虫]1.2.2 CSS选择器
    CSS(CascadingStyleSheets)是一种样式表语言，用于描述HTML元素的样式。CSS选择器是CSS规则的一部分，它决定了CSS规则应用于哪些元素。在网络爬虫的开发中，我们经常使用CSS选择器来定位和选取HTML元素。以下是一些常见的CSS选择器：1.元素选择器元素选择器选择所有给定的HTML元......
  • element-ui 周、月、季、年的日期时间选择器
    日常做项目中经常会遇到根据周、月、季度、年的日期时间选择器，切换不同的时间时选择器也做出相对应的变化，并且获取相对的开始时间和结束时间。效果如下:  1.先创建子组件--季度的日期选择器 1<template>2<divclass="time_quarter">3<markstyle="posi......
  • vue组件封装 - 选择器远程搜索下拉列表
    <!--*component:人员选择-远程搜索下拉列表*time:2023/7/19*author:zx*使用方式*importPersonSelectfrom"@/components/Dialog/personSelect.vue";*components:{PersonSelect}*<person-selectv-model="test"/>--><......
  • bootstrap时间 选择器
    $('#dateFrom').datetimepicker({language:'zh-CN',format:'yyyy-mm-dd',//显示格式todayHighlight:1,//今天高亮minView:2,//设置只显示到月份startView:2,autoclose:true,//选择后自动关闭clearBtn:true,//清除按钮endDat......
  • css 选择器
    更多选择器示例参考：https://www.w3school.com.cn/cssref/css_selectors.asp<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css选择器</title><!--1.样式可以规定在单个的HTML元素中......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99