08_實戰(zhàn)

一、列表

<!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: "狀態(tài)", 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: "狀態(tài)", 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: ["確定", "關(guān)閉"],
                  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">狀態(tài)</label>
        <div class="layui-input-block">
          <select id="status">
            <option value="1" selected>開啟</option>
            <option value="0">關(guān)閉</option>
          </select>
        </div>
      </div>
    </form>
  </body>
</html>
  • 提交數(shù)據(jù)
    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("#pinyin").val(),
    status: body.find("#status").val(),
  };
  $.post(
    "http://admin.ouyangke.cn/index.php/api/Layui/city_add",
    data,
    function (res) {
      if (res.code > 0) {
        layer.msg("添加失敗", { icon: 2 });
      } else {
        layer.msg("添加成功", { icon: 1 });
        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: "狀態(tài)",
                style: "color:red;",
              },
            ],
          ],
          page: true,
          limit: 10,
          limits: [10, 20, 30],
        });
        layer.close(index);
      }
    },
    "json"
  );
},

三、修改

case "update":
  var data = table.checkStatus(obj.config.id).data;
  if (!data[0]) {
    layer.msg("請選擇一條數(shù)據(jù)", { icon: 2 });
    return false;
  }
  layer.full(
    layer.open({
      title: "修改",
      type: 2,
      content: "./edit.html",
      maxmin: true,
      btn: ["確定", "關(guān)閉"],
      yes: function (index, layero) {
        var body = layer.getChildFrame("body", index);
        console.log(body.find("#area_name").val());
        console.log(body.find("#area_ip_desc").val());
        console.log(body.find("#first_pinyin").val());
        console.log(body.find("#pinyin").val());
        console.log(body.find("#status").val());
      },
    })
  );
  break;
  • 修改頁面
<!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">狀態(tài)</label>
        <div class="layui-input-block">
          <select id="status"></select>
        </div>
      </div>
    </form>
  </body>
</html>
  • 設(shè)置修改頁面數(shù)據(jù)
success: function (layero, index) {
  var body = layer.getChildFrame("body", index);
  body.find("#area_name").val(data[0].area_name);
  body.find("#area_ip_desc").val(data[0].area_ip_desc);
  body.find("#first_pinyin").val(data[0].first_pinyin);
  body.find("#pinyin").val(data[0].pinyin);
  if (data[0].status == 1) {
    var select =
      '<option value="1" selected>開啟</option><option value="0">關(guān)閉</option>';
  } else {
    var select =
      '<option value="1">開啟</option><option value="0" selected>關(guān)閉</option>';
  }
  body.find("#status").html(select);
  var iframeWindow = layero.find("iframe")[0].contentWindow;
  iframeWindow.layui.form.render();
},

四、修改表格數(shù)據(jù)

  • templet 自定義列模板
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: "狀態(tài)",
      templet: function (res) {
        if (res.status == 1) {
          return '<span style="color:green;">開啟</span>';
        } else {
          return '<span style="color:red;">禁用</span>';
        }
      },
    },
  ],
],
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點這里 看全部問題和答案點這里 本文由我...
    自you是敏感詞閱讀 904評論 0贊 3
  • $HTML， HTTP，web綜合問題 1、前端需要注意哪些SEO 2、 的title和alt有什么區(qū)別 3、HT...
    Hebborn_hb閱讀 4,772評論 0贊 20
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,803評論 1贊 45
  • EasyWeb 前端開發(fā)文檔 1.簡介 基于jquery、layui的管理系統(tǒng)模板，單頁面、響應(yīng)式、支持mvvm、...
    蟹蟹愛吃蟹閱讀 2,133評論 0贊 1
  • $HTML， HTTP，web綜合問題 1、前端需要注意哪些SEO 3、HTTP的幾種請求方法用途 4、從瀏覽器地...
    peng凱閱讀 802評論 0贊 1

友情鏈接更多精彩內(nèi)容