无锡企业网站制作价格,厦门网站制作软件,网站上的站点地图链接是这么做的,网站建设设计有限公司采用 layui 树形组件#xff0c;版本#xff1a;V2.6.8。只需要更新layui版本#xff0c;不需要下载tableSelect。 原作者博客#xff1a;https://blog.csdn.net/m0_67402588/article/details/123526860。 从 官网 更新日志可以看到#xff0c;树形组件在2.5.7版本还在更新… 采用 layui 树形组件版本V2.6.8。只需要更新layui版本不需要下载tableSelect。 原作者博客https://blog.csdn.net/m0_67402588/article/details/123526860。 从 官网 更新日志可以看到树形组件在2.5.7版本还在更新且2.4.X版本这个功能还未增加直接下载最新版就不会出现不必要的错误啦。
效果展示 目录
一、引入css、js
二、js 需要的数据格式示范 js代码
三、下拉框回显以及禁用 一、引入css、js 样式部分可以自己调整。
link relstylesheet typetext/css href../../plugins/layui2.6.8/css/layui.css /
style typetext/css.layui-form-select dl { padding: 0; }.treeSelect.layui-form-select dl dd:hover{background-color:#fff;}.treeSelect.layui-form-select dl dd, .layui-form-select dl dt{padding-bottom: 10px;}
/stylescript src../../plugins/layui2.6.8/layui.js typetext/javascript charsetutf-8/scriptdiv classlayui-form-itemdiv classlayui-inline stylemargin-right: 0px;label classlayui-form-labelem classmust*/em上级菜单:/labeldiv classlayui-inlinediv classlayui-unselect layui-form-select treeSelectdiv classlayui-select-titlespan classlayui-input layui-unselect idtreeclass选择上级菜单/spaninput typehidden nameselectID classpreMenuIdi classlayui-edge styleright: 20px;/i/divdl classlayui-anim layui-anim-upbitddul idmeuntree/ul/dd/dl/div/div/div
/div
二、js 需要的数据格式示范
data2 [{title: 早餐,id: 1,children: [{title: 油条,id: 5},{title: 包子,id: 6},{title: 豆浆,id: 7}]},{title: 午餐,id: 2,checked: true,children: [{title: 藜蒿炒腊肉,id: 8},{title: 西湖醋鱼,id: 9},{title: 小白菜,id: 10},{title: 海带排骨汤,id: 11}]},{title: 晚餐,id: 3,children: [{title: 红烧肉,id: 12,fixed: true},{title: 番茄炒蛋,id: 13}]},{title: 夜宵,id: 4,children: [{title: 小龙虾,id: 14,checked: true},{title: 香辣蟹,id: 15,disabled: true},{title: 烤鱿鱼,id: 16}]}]; js代码
layui.use([form, layer, element, tree,util], function () {var form layui.form; var layer layui.layer;var element layui.element; var tree layui.tree, util layui.util;//初始化菜单树点击某一列赋值显示到input框上ajax.post(/web/user/role/elements, {token: sessionStorage.getItem(token)}, function(res){var treeData recureFn(res.list);treeData.unshift({id: 0,title: 无上级菜单,children: []})tree.render({elem: #meuntree,data: treeData,click: function(obj){// layer.msg(JSON.stringify(obj.data));var $select $(.layui-form-select);$select.removeClass(layui-form-selected).find(.layui-select-title span).html(obj.data.title).end().find(input:hidden[nameselectID]).val(obj.data.id);form.render();}})});//点击显示/隐藏树形下拉框$(.treeSelect).on(click, .layui-select-title, function (e) {$(this).parents(.treeSelect).toggleClass(layui-form-selected);layui.stope(e); }).on(click, dl ul span.layui-tree-iconClick, function (e) {layui.stope(e);//阻止事件冒泡即点击span小图标展开时不触发父级逻辑});//递归处理树形数组function recureFn( arr ){var result [];arr.map( item{ var option {title: item.menuName,id: item.id,children: recureFn( item.children )}// if( item.children.length!0 ) delete option.checked; //只给最底层添加checkedresult.push( option );}); return result; }})
三、下拉框回显以及禁用 修改时输入框显示默认值。
//输入框显示
var $select $(.layui-form-select.treeSelect);
$select.removeClass(layui-form-selected).find(.layui-select-title span).html(res.data.menuName).end().find(input:hidden[nameselectID]).val(res.data.id);//禁用
$(.layui-form-select.treeSelect).off(click); //解绑click事件
$(#treeclass).addClass(layui-disabled);
