获取table所有自定义内容数据 #1514

ty2014 · 2023-12-27T05:44:28Z

议题条件

我确认已查看官方使用文档：https://layui.dev ，但没有找到相关解决方案。
我确认已在 Issues 中搜索过类似的问题，但没有找到相关解决方案。
我已仔细阅读： 🍀 Layui Issue 贡献指南

议题类型

功能请求

使用版本

2.8.17

问题描述

渲染表格时自定义内容结构，获取数据时该自定义的内容获取不到

业务代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<div id="app">
    <button class="layui-btn">获取数据</button>
    <table class="layui-hide" id="ID-table-demo-data" lay-filter="ID-table-demo-data"></table>
</div>



<script src="layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        // 已知数据渲染
        var inst = table.render({
            elem: '#ID-table-demo-data',
            cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true},
                {title: '用户', width: 120,templet: function(d){return '<input type="number" name="username" class="layui-input attendance">'}},
                {field: 'sign', title: '签名', minWidth: 160},
                {field: 'sex', title: '性别', width: 80},
                {field: 'city', title: '城市', width: 100},
                {field: 'experience', title: '积分', width: 80, sort: true}
            ]],
            data: [
                { // 赋值已知数据
                "id": "10001",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "116"
            }, {
                "id": "10002",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12",
                "LAY_CHECKED": true
            }, {
                "id": "10003",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "65"
            }, {
                "id": "10004",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "777"
            }, {
                "id": "10005",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "86"
            }, {
                "id": "10006",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "12"
            }, {
                "id": "10007",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "16"
            }, {
                "id": "10008",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行",
                "experience": "106"
            }
            ],
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 5 // 每页默认显示的数量
        });

        layui.$('.layui-btn').click(function () {
            console.log(table.getData('ID-table-demo-data'))
        })


    });
</script>


</body>
</html>

截图补充

No response

浏览器

120.0.6099.110（正式版本）（64 位）

演示地址

No response

友好承诺

我承诺将本着相互尊重、理解和友善的态度进行交流，共同维护 Layui 良好的社区氛围。

The text was updated successfully, but these errors were encountered:

bxjt123 · 2023-12-27T06:22:49Z

参考文档-表格-实现多样化编辑

// 自定义字段用户需要有字段名 field: 'user'
done:function(){
  var options = this;
  table.getRowData = function(tableId, elem){
    var index = $(elem).closest('tr').data('index');
    return table.cache[tableId][index] || {};
  };
  $('input[name=username]').change(function () {
    var data = table.getRowData(options.id, this);
    data.user = $(this).val();
  });
}

bxjt123 added the usage 用法问题 label Dec 27, 2023

sentsim closed this as completed Jan 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

获取table所有自定义内容数据 #1514

获取table所有自定义内容数据 #1514

ty2014 commented Dec 27, 2023

bxjt123 commented Dec 27, 2023 •

edited

获取table所有自定义内容数据 #1514

获取table所有自定义内容数据 #1514

Comments

ty2014 commented Dec 27, 2023

议题条件

议题类型

使用版本

问题描述

业务代码

截图补充

浏览器

演示地址

友好承诺

bxjt123 commented Dec 27, 2023 • edited

bxjt123 commented Dec 27, 2023 •

edited