• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Layui 实战

Data: 2018-09-29 20:06:03Form: JournalClick: 14

# 实战

# 一、列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <script type="text/javascript" src="./layui/layui.js"></script>
  </head>
  <body>
    <script type="text/html" id="toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
      </div>
    </script>
    <table id="demo" lay-filter="test"></table>
    <script>
      layui.use("table", function () {
        var table = layui.table;
        table.render({
          toolbar: "#toolbar",
          elem: "#demo",
          url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
          where: {
            id: 0,
            status: 1,
          },
          cols: [
            [
              { type: "radio" },
              { field: "area_id", title: "ID", width: 120, sort: true },
              { field: "area_name", title: "城市名", unresize: true },
              { field: "area_ip_desc", title: "归属", align: "right" },
              { field: "first_pinyin", title: "拼音" },
              { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
              { field: "status", title: "状态", style: "color:red;" },
            ],
          ],
          page: true,
          limit: 10,
          limits: [10, 20, 30],
        });
        table.on("row(test)", function (obj) {
          obj.tr.find("div.layui-unselect.layui-form-radio")[0].click(); //单选
        });
        table.on("toolbar(test)", function (obj) {
          console.log(obj.event);
          switch (obj.event) {
            case "add":
              layer.msg("添加");
              break;
            case "update":
              layer.msg("编辑");
              break;
            case "delete":
              layer.msg("删除");
              break;
          }
        });
      });
    </script>
  </body>
</html>

# 二、添加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <script type="text/javascript" src="./layui/layui.js"></script>
  </head>
  <body>
    <script type="text/html" id="toolbar">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
      </div>
    </script>
    <table id="demo" lay-filter="test"></table>
    <script>
      layui.use("table", function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        table.render({
          toolbar: "#toolbar",
          elem: "#demo",
          url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
          where: {
            id: 0,
            status: 1,
          },
          cols: [
            [
              { type: "radio" },
              { field: "area_id", title: "ID", width: 120 },
              { field: "area_name", title: "城市名" },
              { field: "area_ip_desc", title: "归属", align: "right" },
              { field: "first_pinyin", title: "拼音" },
              { field: "pinyin", title: "首字母" },
              { field: "status", title: "状态", style: "color:red;" },
            ],
          ],
          page: true,
          limit: 10,
          limits: [10, 20, 30],
        });
        table.on("toolbar(test)", function (obj) {
          switch (obj.event) {
            case "add":
              layer.full(
                layer.open({
                  title: "添加",
                  type: 2,
                  content: "./add.html",
                  maxmin: true,
                  btn: ["确定", "关闭"],
                  yes: function (index, layero) {},
                })
              );
              break;
            case "update":
              layer.msg("编辑");
              break;
            case "delete":
              layer.msg("删除");
              break;
          }
        });
      });
    </script>
  </body>
</html>
  • 添加表单
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <script type="text/javascript" src="./layui/layui.js"></script>
  </head>
  <body>
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">城市名</label>
        <div class="layui-input-block">
          <input
            type="text"
            class="layui-input"
            id="area_name"
            placeholder="请输入城市名"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">归属</label>
        <div class="layui-input-block">
          <input
            type="text"
            class="layui-input"
            id="area_ip_desc"
            placeholder="请输入归属"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">拼音</label>
        <div class="layui-input-block">
          <input
            type="text"
            class="layui-input"
            id="first_pinyin"
            placeholder="请输入拼音"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">首字母</label>
        <div class="layui-input-block">
          <input
            type="text"
            class="layui-input"
            id="pinyin"
            placeholder="请输入首字母"
          />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <select id="status">
            <option value="1" selected>开启</option>
            <option value="0">关闭</option>
          </select>
        </div>
      </div>
    </form>
  </body>
</html>
  • 提交数据
    • getChildFrame 获取 iframe 页的 DOM
yes: function (index, layero) {
  var body = layer.getChildFrame("body", index);
  var data = {
    area_name: body.find("#area_name").val(),
    area_ip_desc: body.find("#area_ip_desc").val(),
    first_pinyin: body.find("#first_pinyin").val(),
    pinyin: body.find(
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>