layui toolbar 模板判断 删除事件

这篇博客展示了如何利用layui库进行HTML模板渲染,并创建一个表格视图。内容包括设置表格列、数据源,以及监听行工具事件来实现数据删除功能。通过表格渲染,可以动态展示数据列表,并提供了无数据时的提示信息。
摘要由CSDN通过智能技术生成
<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
  {{#  layui.each(d.list, function(index, item){ }} //d 指的是data d.list 指的是data里的数组
    <li>
      <span>{{ item.modname }}</span>
      <span>{{ item.alias }}:</span>
      <span>{{ item.site || '' }}</span>
    </li>
  {{#  }); }}
  {{#  if(d.list.length === 0){ }}
    无数据
  {{#  } }} 
  </ul>
</script>
 
//第二步:建立视图。用于呈现渲染结果。
<div>
	<table class="layui-hide" id="demo"  lay-filter="test"></table>
</div>
 
//第三步:渲染模版
  layui.use('table', function () {
                        var table = layui.table;
                        table.render({
                            elem: '#demo'
                            , url: ''
                            , cols: [[
                                {field: 'title', title: '需求标题', width: 156}
                                , {field: 'description', title: '需求内容', width: 288}
                                , {field: 'files', title: '需求附件', width: 256}
                                , {field: 'demand_price_range', title: '预算金额', width: 128}
                                , {field: 'intention', title: '意向人数', width: 96}
                                , {field: 'wealth', width: 124, title: '操作', toolbar: '#barDemo',}
                            ]]
                            , page: false,
                            data: res.data.rows

                        });
//监听行工具事件
            table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
				console.log(layEvent)
                layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    let url = api.delDemand;
                    let data = {
                        token:sessionStorage.getItem('token'),
                        id:layEvent
                    }
                    Ajax(url,data,function (res) {
                        console.log(res)
                        if (res.code == 1){
                            obj.del(); //删除对应行(tr)的DOM结构
                            layer.close(index);
                        }else {
                            layer.msg(res.msg);
                        }
                    })
                });
            });
                    });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值