【.net core】【watercloud】树形组件combotree导入及调用

源码下载:combotree: 基于layui及zTree的树下拉框组件

链接中提供了组件的基本使用方法

框架修改内容

1.文件导入(路径可更具自身情况自行设定)

解压后将文件夹放在图示路径下,修改文件夹名称为combotree

2.设置路径(设置layui use组件的路径,设置后可直接在use 中使用combotree进行组件调用)

修改文件:\WaterCloud.Web\wwwroot\js\lay-config.js 内容,增加图示标记内容

3.修改组件源文件(解决组件重复引用错误)

修改文件:\WaterCloud.Web\wwwroot\js\lay-module\combotree\combotree.js 内容,按照以下方式

源文件内容(去除extend部分):

4.调用

html:

html 复制代码
<div id="elementid"></div>

js:

组件加载

javascript 复制代码
combotree.render({
    elem: '#elementid'
    , placeholder: '请选择'
    , isMultiple: false    // 是否多选,默认是单选
    , yChkboxType: 'ps'    // 参考zTree该参数
    , nChkboxType: 'ps'    // 参考zTree该参数
    , expandLevel: '2'     // 默认展开的层级
    , ajaxUrl: '/your/treedata/apipath'    // 取得树数据的url
    , readonly: false      // 是否只读模式
    //, layVerify: 'required' // 是否是必选项目
    , initValue: ''//用于回显
});

方法:

javascript 复制代码
combotree.getValue('elementid')//获取组件值
combotree.setValue('elementid',value)//设置组件值

注意:setValue时需要确保组件已初始化完成,否则会报找不到组件的错误,一般处理回显在初始化同时处理数据,使用initValue,其他情况设置值的暂未研究

相关推荐
武藤一雄1 天前
C#常见面试题100问 (第一弹)
windows·microsoft·面试·c#·.net·.netcore
猹叉叉(学习版)4 天前
【ASP.NET CORE】 14. RabbitMQ、洋葱架构
笔记·后端·架构·c#·rabbitmq·asp.net·.netcore
Murphy20235 天前
.NetCore项目使用EF Core操作SQL Server
.netcore
码界奇点6 天前
基于.NET Core的CMS内容管理系统设计与实现
c++·毕业设计·.netcore·源代码管理
猹叉叉(学习版)6 天前
【ASP.NET CORE】 13. DDD初步实现
笔记·后端·架构·c#·asp.net·.netcore
武藤一雄6 天前
WPF Command 设计思想与实现剖析
windows·微软·c#·.net·wpf·.netcore
武藤一雄6 天前
WPF 资源解析:StaticResource & DynamicResource 实战指南
微软·c#·.net·wpf·.netcore
武藤一雄6 天前
WPF UI 开发深度指南:资源 (Resources)、样式 (Style) 与触发器 (Trigger) 全解析
ui·c#·.net·wpf·.netcore·avalonia
吹牛不交税6 天前
vue3项目部署到阿里云Alibaba Cloud Linux3系统的docker
docker·容器·.netcore
猹叉叉(学习版)7 天前
【ASP.NET CORE】 12. DDD基本概念
笔记·后端·架构·c#·asp.net·.netcore