layui toolbar 模板判断删除事件

最新推荐文章于 2024-05-15 23:29:45 发布

Acitylion

最新推荐文章于 2024-05-15 23:29:45 发布

阅读量460

点赞数

分类专栏： layui get 技能

本文链接：https://blog.csdn.net/Acitylion/article/details/115128354

版权

get 技能同时被 2 个专栏收录

102 篇文章 2 订阅

订阅专栏

layui

14 篇文章 2 订阅

订阅专栏

这篇博客展示了如何利用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);
                        }
                    })
                });
            });
                    });