基于layui的树表格-treeGrid

person 匿名

发布日期: 2021-06-09 22:54:19 浏览量: 38
评分:
star star star star star star star star star_border star_border
*转载请注明来自write-bug.com

基于layui的树表格-treeGrid

1、插件js地址:

tree_table_treegrid_based_on_layui/testTreeGrid/web/design/extend/treeGrid.js

2、例子地址:

  1. 1、树状表格:tree_table_treegrid_based_on_layui/testTreeGrid/web/index.html
  2. 2、普通表格:tree_table_treegrid_based_on_layui/testTreeGrid/web/index_list.html

3、快速开始

详情参见demo

  • 这里是列表文本添加css样式

    这里输入代码

  • 引入treeGrid模块

    1. layui.config({
    2. base: 'design/extend/'
    3. }).extend({
    4. treeGrid:'treeGrid'
    5. }).use(['jquery','treeGrid','layer'], function(){
    6. // To do ...
    7. });

4、表格参数

参数名 类型 是否必填写 说明
limit number 【默认10】 ,即使不分页
id string 表格的id,很重要,比如addRow方法需要配置此参数才生效
elem string 表格的选择器
url string 获取数据的url地址
data JSON 与url的设置,二选一
cellMinWidth number 最小列宽
idField string id字段
treeId string 树形id字段名称
treeUpId string 树形父id字段名称
treeShowName string 以树形式显示的字段
heightRemove array 【默认[]】不计算的高度,表格设定的是固定高度,此项不生效
height string 【默认window高度的100%】,支持数值和百分比,以及full-差值
iconOpen boolean 是否显示图标【默认true】
isOpenDefault boolean 节点默认是展开还是折叠【默认true】
loading boolean 是否开启加载数据的动画【默认true】
method string 获取数据的方式,GET或者POST,【默认POST】
isPage boolean 是否开启分页,【默认false】

5、数据格式

注:以下字段皆为可选。与树形结构相关的字段,比如id、parentId、name可在表格参数中配置。

字段明 说明
lay_is_checked 选中状态(true,false)
lay_is_radio 单选状态(true,false)
lay_is_open 是否展开节点
lay_is_show 是否显示节点
children 下级,array
lay_is_row_check 行选中
lay_che_disabled 禁止多选(true,false)
lay_rad_disabled 禁止单选(true,false)
lay_icon_open 打开的图标
lay_icon_close 关闭的图标
lay_icon 叶子节点图标

方法

方法名 参数 描述
getDataMap tableId 获取列表数据
addRow tableId, index, data 添加一行数据
delRow tableId, data 删除一行数据
treeNodeOpen tableId, o, isOpen

6、 效果图:

折叠记忆

新增节点-

删除节点

删除多个节点

节点初始化隐藏、显示控制1

{“id”:”111”, “pId”:”1”, “name”:”苹果”,”lay_is_open”:false}

节点初始化隐藏、显示控制2

多选操作(选中父节点,子节点被选中;全部子节点被选中,父节点也被选中;自己看效果)

上传的附件 cloud_download treeGrid.zip ( 14.97mb, 1次下载 )

热门回复

eject