08_实战

一、列表

<!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("#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: "状态",
                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("请选择一条数据", { icon: 2 });
    return false;
  }
  layer.full(
    layer.open({
      title: "修改",
      type: 2,
      content: "./edit.html",
      maxmin: true,
      btn: ["确定", "关闭"],
      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">状态</label>
        <div class="layui-input-block">
          <select id="status"></select>
        </div>
      </div>
    </form>
  </body>
</html>

设置修改页面数据

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">关闭</option>';
  } else {
    var select =
      '<option value="1">开启</option><option value="0" selected>关闭</option>';
  }
  body.find("#status").html(select);
  var iframeWindow = layero.find("iframe")[0].contentWindow;
  iframeWindow.layui.form.render();
},

四、修改表格数据

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: "状态",
      templet: function (res) {
        if (res.status == 1) {
          return '<span style="color:green;">开启</span>';
        } else {
          return '<span style="color:red;">禁用</span>';
        }
      },
    },
  ],
],

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,837评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,551评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,417评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,448评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,524评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,554评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,569评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,316评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,766评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,077评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,240评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,912评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,560评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,176评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,425评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,114评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,114评论 2赞 352

08_实战

一、列表

二、添加

三、修改

四、修改表格数据

推荐阅读更多精彩内容