dtree渲染下拉树，layui集成dtree，dtree渲染下拉框

文档位置

dtree官方文档地址链接

渲染下拉树js dTreeUtil.js


/**** @param id 要渲染的dom* @param data 数据* @param none  无数据时显示   "暂时没有数据！"* @param checkbar 是否开启复选框* @param checkbarType  上下级联关系  半选、单向级联、独立、仅存一个* @returns {*}*/
function renderDtreeData(id,data,none,checkbar,checkbarType,select,height){var dtreeObj ;layui.extend({dtree: '/plugin/layui_ext/dtree/dtree'   //  路径}).use(['dtree'], function() {var dtree = layui.dtree;dtreeObj = dtree.render({elem: "#" + id,data: data,none: none,select : select,checkbar: checkbar,checkbarType: checkbarType, // 默认就是all，其他的值为： no-all  p-casc   self  onlymenubar: true,// width : "500px",height: height,menubarTips: {group: ["moveDown", "moveUp", "refresh", "searchNode"]}});// 绑定节点点击事件dtree.on("node("+id+")", function(obj){var nodeId = obj.param.nodeId;dtreeObj.clickNodeCheckbar(nodeId);// 点击节点选中复选框// console.log(obj.param)// var checkbarNodes = dtree.getCheckbarNodesParam("checkbarTreeNode");// layer.msg(JSON.stringify(checkbarNodes));});});return dtreeObj;}/*** 获取选中数据* @param id* @returns {*[]}*/
function getCheckbarNodesParam(id){var checkStr = [];layui.use(['dtree'], function() {var dtree = layui.dtree;checkStr = dtree.getCheckbarNodesParam(id);});return checkStr;
}/*** 数组转化为树形结构* @param list* @returns {*[]}*/
function arrayToDtree (arr, pid){var list = [];arr.map(item=>{console.log(1)if (item.parent == pid){var result = {id : item.id,  //节点ID（必填）title : item.name,  //节点名称（必填）parentId : item.parent,  //父节点ID（必填）checkArr : "0",  //复选框列表（开启复选框必填，默认是json数组。）checked : false, //是否选中（开启复选框，0-未选中，1-选中，2-半选。非必填）spread : true, //节点展开状态（v2.4.5_finally_beta版本新增。true：展开，false：不展开，布尔值，非必填）disabled : false,children : []};list.push(result);}});list.map(item=>{console.log(2)item.children = arrayToDtree(arr,item.id) ;})return list;
};

渲染dom

     <!-- 导入--><link rel="stylesheet" href="/plugin/layui_ext/dtree/dtree.css"><link rel="stylesheet" href="/plugin/layui_ext/dtree/font/dtreefont.css"><link rel="stylesheet" href="/plugin/layui/css/layui.css" media="all"><script src="/plugin/layui/layui.all.js"></script><script src="/js/dTreeUtil.js"></script><div class="layui-inline"><label class="layui-form-label">组织机构</label><div class="layui-input-inline" style="width: 398px;" ><ul id="organ_dtree" class="dtree" data-id="1"  ></ul></div></div><script>var organDtree ;//请求下拉数据  填充下拉树数据$.ajax({url : '/admin/organ/loadOrganDtree',type : 'get',data : {},success : function(res){if(res.status == '0'){list = res.data || [];organDtree = renderDtreeData("organ_dtree",list,"暂时没有数据！",true,"only",true,"800px");}}});//点击任意关闭下拉$("body").on("click", function(event){$("div[dtree-id][dtree-select]").removeClass("layui-form-selected");$("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");});var dtreeCheck =  getCheckbarNodesParam('organ_dtree'); //获取选中值var organId = "";if (dtreeCheck.length != 0){organId = dtreeCheck[0].nodeId ;}</script>

数据格式

data: [{"id": "4028820e68e4a48e0168e4d7772914e8","title": "广西壮族自治区","checkArr": "0","parentId": "0","iconClass": null,"last": null,"checked": null,"spread": true,"disabled": true,"children": [{"id": "a3a1704fddf3860934a44b59df6f4d6e","title": "1哈","checkArr": "0","parentId": "4028820e68e4a48e0168e4d7772914e8","iconClass": null,"last": null,"checked": null,"spread": true,"disabled": false,"children": [{"id": "e15f05c4af077d328dcabecd453c238e","title": "2哈","checkArr": "0","parentId": "a3a1704fddf3860934a44b59df6f4d6e","iconClass": null,"last": null,"checked": null,"spread": true,"disabled": false,"children": []},{"id": "fc946add55ab6e2673e85523e8c555ad","title": "3哈","checkArr": "0","parentId": "a3a1704fddf3860934a44b59df6f4d6e","iconClass": null,"last": null,"checked": null,"spread": true,"disabled": false,"children": []}]}]
}]

dtree渲染下拉树，layui集成dtree，dtree渲染下拉框相关推荐

dynamicCondition v3.0.6 插件新增下拉树编辑器
先看下效果: 点击查看demo页面使用步骤: 1.编辑html页面. <ul id="dynamicCondition" style="display:none; ...
vue-treeselect下拉树
最近遇到下拉树的需求,what?下拉框和树的结合?赶紧element-UI找一波,然而并没有找到这种组件,于是问了下度娘,发现好多人都是自己封装的下拉树组件,五花八门的功能,但是都不完善,还是决定用靠 ...
layui.dtree下拉树踩坑
提示:针对dtree版本v2.5.7 文章目录前言-下拉树实现描述一.单击选中bug 二.使用reload()重新加载数据(data方式) 三.实现reload,严格控制reload在init后, ...
dtree.js下拉树控件
dtree下拉树的一些基础用法 id Number 唯一的id pid Number 判定父节点的数字,根节点的值为 -1 name String 节点的文本标签 url String ...
xm-select下拉框，下拉树
使用案例先上图 layui中使用xm-select下拉选择树 1.引入js <script src="../static/res/bootstrap/js/jquery-3.4.1. ...
extjs tree下拉列表_使用ztree来代替Extjs的下拉树
[Struts2+Spring2.5+Hibernate3(JPA)+ExtJS3基本后台将ExtJS替换为3..2版本后发现下拉数有些异常:之前展开下来树的下级节点时,下拉菜单不会关掉.但是在3. ...
layui表格单元格添加下拉选择功能
layui表格单元格添加下拉选择功能 1.修改表头 2.更新数据 3.修改样式代码如下: <style>/*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格 ...
php 下拉树多项选择框,jQuery树形下拉框插件multipleTree升级
插件描述:tree是基于jqueryztree开发的树形下拉选择框插件,支持ie8+谷歌,火狐,360等浏览器(multipleTree升级版) 更新时间:2020-09-26 00:48:20 更新 ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...

dtree渲染下拉树，layui集成dtree，dtree渲染下拉框

文档位置

渲染下拉树js dTreeUtil.js

渲染dom

数据格式

dtree渲染下拉树，layui集成dtree，dtree渲染下拉框相关推荐

最新文章

热门文章