最近在做Layui的后台,发现Layui这个方案也不错,能够快速地在后台直接部署。相比还要配置webpack,Layui jquery体系开箱即用在一些单独的情况下还是挺不错的。最近整理一下现在梳理一下Table组件的用法。
Table组件可以采用官方提供的三种方式来获取数据。官方推荐js一种。这样定义一个table组件。定义一个id 和lay-filter
<table id="demo" lay-filter="test">table>
接下来,还要添加js字段让数据展示出来。
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
height: 315,
url: "{:url('admin/example/read')}", //数据接口
page: true, //开启分页
id: 'testReload',//数据搜索,这个过程会发送后端
cols: [[ //表头
{type:'checkbox',fixed: true},
{field: 'id', title: 'ID', width:80, sort: true,fixed: true},
{field: 'name', title: '姓名', width:80},
{field: 'sex', title: '性别', width:80, sort: true,templet:'{{ d.sex==0? "男":"女" }}'},
{field: 'telephone', title: '电话', width:80} ,
{field: 'email', title: '邮件', width: 177},
{field: 'leader', title: '法人', width: 80},
{field: 'create_time', title: '创建时间', width: 180, sort: true},
{fixed:'right',title:'操作',align:'center',toolbar:'#barDemo'}
]],
});
script>
Tabel组件采用js这个方案的时候,特别在表格需要经常编辑,删除等常规的操作,layui提供了一个模版操作方式。可以为此添加一个text/html 模版
在每一个字段列加上一个toolbar的字段,指定为工具栏,然后将定义的模版关联起来。
{fixed:'right',title:'操作',align:'center',toolbar:'#barDemo'}
<table id="demo" lay-filter="test">table>
<script type="text/html" id="barDemo">
class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
删除a>
script>
并且需要将text/html 作为一个模版使用。有趣的是,这个模版里面还需要对编辑操作加上事件处理。例如官方引入提供的lay-event=“edit” 编辑,lay-event =“del” 删除的含义。
有了表格中常规化的操作,编辑,删除接下来,还要处理这些行为。这个时候,需要使用layui的on方法进行事件监听。这个监听会对整个表格监听。根据事件不同的类型,然后对里面的行为进行分别处理。
//监听事件,填写lay-filter才能调度
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
} else if(obj.event === 'edit'){
}
});
然后根据点击里面的事情进行编辑,如弹窗,删除的逻辑等等。
//监听事件,填写lay-filter才能调度
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
deleteData([data.id],function(){
obj.del();
layer.close(index);
layer.msg('删除成功');
})
});
} else if(obj.event === 'edit'){
// layer.alert('编辑行:
'+ JSON.stringify(data))
//跳转
layer.open({
type: 2
,title: '编辑数据'
,content: "{:url('admin/example/edit_view')}"
,area: ['433px', '393px']
,btn: ['确定', '关闭']
,yes: function(index, layero){
var iframeWindow = window['layui-layer-iframe'+ index]
,submitID = 'LAY-user-back-submit'
,submit = layero.find('iframe').contents().find('#'+ submitID);
//监听提交
iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
var field = data.field; //获取提交的字段
//提交 Ajax 成功后,静态更新表格中的数据
//$.ajax({});
table.reload('LAY-user-front-submit'); //数据刷新
layer.close(index); //关闭弹层
});
submit.trigger('click');
},
success: function (layero, index) {
// alert(JSON.stringify(data));
//查询数据传递
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];
body.find("input[name='name']").val(data.name);
body.find("input[name='sex']").each(function(index,item){
if(index == data.sex)
{
$(this).prop("checked","checked");
}
});
body.find("input[name='telephone']").val(data.telephone);
body.find("input[name='email']").val(data.email);
body.find("input[name='leader']").val(data.leader);
iframeWin.layui.form.render();//渲染才行
}
});
}
});
Tabel需要进行批量删除选中的数据时候,Table组件提供了这个简单函数。很多时候,后台删除的时候需要指定对应id,于是在table选中的过程中提供了checkStatus的方法。然后获取到data值,再通过遍历循环一次,将选中的id 返回一个数组。
用于发送给后端删除使用。
//获取table选中的ID值
function getSelectIds(){
var checkStatus = table.checkStatus('testReload'),
data = checkStatus.data,
delList=[];
data.forEach(function(n,i){
delList.push(n.id);
});
return delList;
}
选择了对应的ID,有了这个组后,可以发送后端进行删除处理。
var $ = layui.$, active = {
batchdel:function(){
//处理批量删除
var checkData = getSelectIds();
if(checkData.length === 0){
return layer.msg('请选择数据');
}
layer.confirm('确定删除吗?', function(index) {
deleteData(checkData,function(){
table.reload('testReload');
layer.msg('已删除');
})});
}
}
//搜索类型
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//删除数据
function deleteData(idArr,callback){
$.post("{:url('admin/example/delete')}",{ids:idArr},function(data){
if(data.code == 0)
{
callback();
}else{
layer.msg(data.msg)
}
})
}
layui 有一个比较有趣的地方,在开始的时候一直看不懂,然后发现layui对按钮加以一个类型方式,并且这个类型方式可以很巧妙结合一个回调处理。从下面的代码可以看到 对按钮定义一个button data-type 的类型,这个类型看起来只是一个常规dataset属性,但借助了这个可以很巧妙和监听行为结合在一起。
class="demoTable">
监听行为使用,通过jq监听click时间,并且指明layui-btn这类按钮。对一些有类型声明的,可以调用call方法去完成一个函数调度。所以在这里也是设计得很巧妙。
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
layui 里面提供一个比较好用弹窗功能,这个弹窗组件使用的频率比较高,可以结合模版页面使用。使用的时候,先编辑一个表单页面。当需要从窗口传递过去的时候,这个时候就要在success 回调的时候 通过jq搜索子窗口的表单进行传递数值。
当中也遇到了一些比较坑的地方。例如radio 使用prop,而不是attr 方式对其赋值。
layer.open({
type: 2
,title: '编辑数据'
,content: "{:url('admin/example/edit_view')}"
,area: ['433px', '393px']
,btn: ['确定', '关闭']
,yes: function(index, layero){
var iframeWindow = window['layui-layer-iframe'+ index]
,submitID = 'LAY-user-back-submit'
,submit = layero.find('iframe').contents().find('#'+ submitID);
//监听提交
iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
var field = data.field; //获取提交的字段
table.reload('LAY-user-front-submit'); //数据刷新
layer.close(index); //关闭弹层
});
submit.trigger('click');
},
success: function (layero, index) {
// alert(JSON.stringify(data));
//查询数据传递
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];
body.find("input[name='name']").val(data.name);
body.find("input[name='sex']").each(function(index,item){
if(index == data.sex)
{
$(this).prop("checked","checked");
}
});
body.find("input[name='telephone']").val(data.telephone);
body.find("input[name='email']").val(data.email);
body.find("input[name='leader']").val(data.leader);
iframeWin.layui.form.render();
}
});
制作过程,赋予数据的时候 有一些小坑,需要在添加render。官方文档据说有提及,怪自己没详情看。
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];
由于这两句也在社区那里获取到,意为获取iframe 的窗口。总体来讲,完成一个table 的组件,需要经过很多js 编辑和 一些逻辑上的模版处理。所以这个流程先将其记录下来。并用于日后使用。