LayUI可編輯表格
阿新 • • 發佈:2018-11-10
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>