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如何设置表格可编辑的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1