0
点赞
收藏
分享

微信扫一扫

layui 数组表格重载/刷新/更新渲染(另类重载办法)

邯唐情感 2022-07-27 阅读 60


官方说明:​​https://www.layui.com/doc/modules/element.html#render​​

更新渲染

跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时element的相关功能将不会对其有效,你必须手工执行 element.init(type, filter)方法即可。注意:2.1.6 开始,可以用 element.render(type, filter); 方法替代

第一个参数:type,为表单的type类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表:

参数(type)值

描述

tab

重新对tab选项卡进行初始化渲染

nav

重新对导航进行渲染

breadcrumb

重新对面包屑进行渲染

progress

重新对进度条进行渲染

collapse

重新对折叠面板进行渲染

 


例子​​layui.code​​

  1. element.init(); //更新全部 2.1.6 可用 element.render() 方法替代
  2. element.render('nav'); //重新对导航进行渲染。注:layui 2.1.6 版本新增
  3. //……

第二个参数:filter,为元素的 lay-filter="" 的值。你可以借助该参数,完成指定元素的局部更新。

 

 

如果用layui官方的重载办法都不行,可以用下这个方法

layui 数组表格重载/刷新/更新渲染(另类重载办法)_表单

                    ptable=function(){ 
treeGrid.render({
id:tableId
,elem: '#'+tableId
//,height: '' //固定值
,idField:'id'
//,url:'__STATIC__/json/treegrid_data.json'
,url:'{:url('menujsondata')}'
,toolbar:'#toolbarDemo'
,cellMinWidth: 100
,treeId:'id'//树形id字段名称
,treeUpId:'pId'//树形父id字段名称
,treeShowName:'name'//以树形式显示的字段
,cols: [[
{type:'checkbox'}
,{width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
,templet: function(d){
var html='';
var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
return addBtn+delBtn;
}
}
,{field:'name', edit:'text',width:300, title: '水果名称'}
,{field:'id',width:100, title: 'id'}
,{field:'pId', title: 'pid'}
]]
,page:false
});

};

ptable();

引用:

layui 数组表格重载/刷新/更新渲染(另类重载办法)_字段_02

                        //执行重载
ptable()

举报

相关推荐

0 条评论