Toolbar工具条如何使用?它一般都是结合表格使用,通常来说,你只需要在表格的每一·行中添加上修改,删除,等类型的操作按钮,而tool的参数就会自动生成。先介绍一下toolbar的详细信息:toolbar是属于Sting,DOM,Boolean这三种类型,开启表格头部工具栏区域,他的参数支持这四种类型值:
- toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
- toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
- toolbar: true //仅开启工具栏,不显示左侧模板
- toolbar: 'default' //让工具栏左侧显示默认的内置模板
下面看个例子:
下述是toolbar对应的模板,它可以存放在页面的任意位置:
注意:属性layui-event=“”是模板的关键所在,值可以随意定义。
然后,我们可以借助table模块的工具条事件,完成以下操作功能
剖解流程:作为监听工具条,这里的tool是工具条事件名,test是table原始容器的属性lay-filter=”对应的值”,首先要获取当前行的数据,再获取lay-event对应的值,也可以是表头的event参数对应的值,获得当前行tr的DOM对象,然后就判断是查看,还是删除,或者是编辑,最后还要记得更新缓存对应的值
代码如下: