私信发送成功
Watch Star Fork

温山 / layui-treetableJavaScript

基于layui树形菜单写的树形列表(treetable) Layui v2.2.3
克隆/下载
温山 最后提交于 2017-12-11 10:25 更新 README.md
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md 4.47 KB

最新版本是基于layui v2.2.3, 附件中有layui v1.0.7

demo地址: https://shaojiepeng.github.io/layui-treetable/demo.html

https://shaojiepeng.github.io/layui-treetable/demo2.html

https://shaojiepeng.github.io/layui-treetable/demo3.html

2017.12.11 Updated

  1. 添加expredable参数: 设置展示treetable时是否展开,默认为false; 请参考demo.html
  2. treetable显示多列的方式,参考以下,field的值要跟数据格式中的一致
var layout = [
        {name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 40%'},
        {name: 'Url', field: 'url', headerClass: 'value_col', colClass: 'value_col', style: 'width: 30%'},
        {name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 30%', render: function(row) { return render(row)}}
    ];

#layui-treeGird

首先介绍一下layui,是一个模块化前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。

由于最近的项目中引进了layui,使用了树形菜单的内置模块,可是该功能并未完全满足需求。 layui是开源包,为满足需求,故基于layui-tree写了一个treetable.

#使用

  1. 页面元素
<div id="demo"></div>
  1. js代码
var layout = [
        {name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%'}
];
layui.use(['tree', 'layer', 'form'], function(){
              var layer = layui.layer, $ = layui.jquery;
              var form = layui.form();
          
              layui.treeGird({
                elem: '#demo',   //传入元素选择器
                nodes: [
                          {
                              "id": "1",
                              "name": "父节点1",
                              "children": [
                                  {
                                      "id": "11",
                                      "name": "子节点11"
                                  },
                                  {
                                      "id": "12",
                                      "name": "子节点12"
                                  }
                              ]
                          },
                          {
                              "id": "2",
                              "name": "父节点2",
                              "children": [
                                  {
                                      "id": "21",
                                      "name": "子节点21",
                                      "children": [
                                          {
                                              "id": "211",
                                              "name": "子节点211"
                                          }
                                      ]
                                  }
                              ]
                          }
                ],
                layout:layout
            });
        });

3.页面展示

输入图片说明

#方法 语法:layui.treeGird(options)

options是一个对象参数,可支持的key如下表 输入图片说明

#节点数据格式nodes nodes

#列表头元素layout layout

自定义的render

var layout = [
        {name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%'},
        {name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 20%', render: function(row) {
            return '<a class="layui-btn layui-btn-danger layui-btn-mini" onclick="del('+row.id+')"><i class="layui-icon">&#xe640;</i> 删除</a>';   //列渲染
        }},
];

效果如下: 输入图片说明

#总结 灵感来源layui,感谢layui的开源。

项目点评 ( 25 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close