• 首页 >前端框架 >Layui 教程

    layui如何设置表格可编辑

    本文环境:windows10、layui2.5.6,本文适用于所有品牌的电脑。

    在使用layUI的数据表格时,常用到的一些渲染和操作,如下所示:

    一、数据表格参数及使用

    1.1 图片

    templet 参数

    注意:a标签也差不多,就是 href=’’/xxx.html/id={{d.id}}"

    //	{{d.img}} 后台返的图片地址 "d"在layui中特指data,id为templ
    <script type="text/html" id="image">
            <img src='{{d.img}}' class="layui-table-link" style="height: 100%;display: block;">
     </script>

    1.2 操作 删除、编辑按钮

    lay-event=“xxx” toolbar: ‘#id’ 参数

    注意:lay-event=" xxx",后续操作就是用这个 ‘xxx’

    { field: 'wealth', title: '操作', toolbar: '#barDemo' }
    <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit" style="margin-left: 12%;">编辑</a>
            <a class=" layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    1.3 单元格编辑

    注意:edit: ‘text’ 现在只有text格式 具体看下面实例

    {field: 'num', title: '数量', width:80, sort: true,edit: 'text',},

    二、实例模板

    <body>
    	<table id="demo" lay-filter="test"></table>
    	<script type="text/html" id="image">
    	        <img src='{{d.img}}' class="layui-table-link" style="height: 100%;display: block;">
    	</script>
    	<script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit" style="
            margin-left: 12%;">编辑</a>
            <a class=" layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    	</script>
    </body>
    
    <script>
    layui.use(['table','layer'], function(){
      var table = layui.table,layer= layui.layer;
      table.render({
        elem: '#demo',
     // width:500,
     // height: 312,
     //contentType: 'application/x-www-form-urlencoded',//若是参数是表单格式的话
     //method:"post",//默认为post
        url: 'xxxx' ,//后台的数据接口
        where:{id:"1"},//传的参数
      //data:{},//可以是当前展示的,或者后台反的单独拿出来展示,用的时候注释url和where
        page: true, //开启分页
        limit:10,//一页10条数据
        limits: [5, 10], //下拉框页码值,一页多少条
        cellMinWidth: 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
        cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},//filed后为data里的k-v中的k;
          {field: 'num', title: '数量', width:80, sort: true,edit: 'text',},
          {field: 'img', title: '图片', width:80, sort: true,templet: '#image',}, //templet: '#image',这个就是自定义图片 “templet” value为id值,开始有介绍
          { field: 'wealth', title: '操作', toolbar: '#barDemo' }
        ]],
        parseData:function(res){
         //res 即为原始返回的数据
    	    return {
    		          code: res.code, //解析接口状态
    		          msg: res.msg, //解析提示文本
    		          count: res.count, //解析数据长度
    		          data: res.data //解析数据列表
    		 }
    	  },
    	  done: function (res) {
    	  //表格完成后
            console.log(res)
          },
      });
     //监听单元格编辑
      table.on('edit(test)', function(obj){
        var value = obj.value //得到修改后的值
        ,data = obj.data //得到所在行所有键值
        ,field = obj.field; //得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
      });
      //监听行工具事件(编辑删除)
      table.on('tool(test)', function (obj) {
        // var data = obj.data
        //console.log(obj)
        if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            obj.del()
            layer.close(index)
          })
        } else if (obj.event === 'edit') {
          console.log(obj)
          layer.open({
            title: '',
            content: '是否修改数据',
            btnAlign: 'c',
            btn: ['确认', '取消'],
            yes: function (index, layero) {
              layer.close(index)
            }
          })
        }
      })
    });
    </script>

    相关文章

    Layui表格行内动态编辑数据

    Layui表格行内动态编辑数据

    阅读(4939)评论(0)推荐()

    本文主要介绍经典前端框架 layui 中的动态表格数据操作,结合 JQuery 动态编辑单元格中的数据,具有一定的参考价值,感兴趣的可以了解一下

    WPS表格如何进行页面设置

    WPS表格如何进行页面设置

    阅读(4775)评论(0)推荐()

    在WPS中,页面设置几乎是必用的一项技能,每次编辑完成后,都要进行页面设置,然后打印输出。这里根据自己多年的经验,详细说一下一个WPS表格如何进行页面设置。