LayUI可编辑表格

最新推荐文章于 2024-11-07 13:53:31 发布

原创最新推荐文章于 2024-11-07 13:53:31 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

UI 专栏收录该内容

0 篇文章

订阅专栏

这篇博客详细介绍了如何利用LayUI框架创建可编辑的表格，包括数据的动态加载、单元格编辑功能以及保存数据的操作。通过实例代码解析，帮助读者掌握这一功能的应用。

damo1.json

{
  "code": 0,
  "msg": "",
  "count": 100,
  "data": [
    {
      "id": 10000,
      "username": "user-0",
      "sex": "女",
      "city": "昆明",
      "sign": "签名-0"
    },
    {
      "id": 10001,
      "username": "user-1",
      "sex": "男",
      "city": "楚雄",
      "sign": "签名-1"
    },
    {
      "id": 10002,
      "username": "user-2",
      "sex": "女",
      "city": "富源",
      "sign": "签名-2"
    },
    {
      "id": 10003,
      "username": "user-3",
      "sex": "女",
      "city": "富源",
      "sign": "签名-3"
    },
    {
      "id": 10004,
      "username": "user-4",
      "sex": "男",
      "city": "富源",
      "sign": "签名-4"
    },
    {
      "id": 10005,
      "username": "user-5",
      "sex": "女",
      "city": "长沙",
      "sign": "签名-5"
    },
    {
      "id": 10006,
      "username": "user-6",
      "sex": "女",
      "city": "桂林",
      "sign": "签名-6"
    },
    {
      "id": 10007,
      "username": "user-7",
      "sex": "男",
      "city": "长春",
      "sign": "签名-7"
    }
  ]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-table" lay-data="{url:'./demo1.json'}" >
    <thead>
        <tr>
            <th lay-data="{type:'checkbox'}">ID</th>
            <th lay-data="{field:'id', width:80, sort: true}">ID</th>
            <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
            <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
            <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
            <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
            <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
        </tr>
    </thead>
</table>
<script src="layui/layui.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table');
</script>

</body>
</html>