欧洲亚洲天堂精品好看,先锋AV三上悠亚

一、頁(yè)面元素

1、常規(guī)用法

class="layui-table"

<table class="layui-table">
  <colgroup>
    <col width="150" />
    <col width="200" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>技能</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>滅絕師太</td>
      <td>HTML、CSS、PHP</td>
    </tr>
    <tr>
      <td>2</td>
      <td>西門(mén)大官人</td>
      <td>PHP、ThinkPHP、Laravel</td>
    </tr>
    <tr>
      <td>3</td>
      <td>天蓬</td>
      <td>HTML、CSS、JavaScript</td>
    </tr>
    <tr>
      <td>4</td>
      <td>歐陽(yáng)克</td>
      <td>PHP、ThinkPHP、小程序</td>
    </tr>
  </tbody>
</table>

2、其他風(fēng)格

行邊框風(fēng)格

<table class="layui-table" lay-skin="line"></table>

列邊框風(fēng)格

<table class="layui-table" lay-skin="row"></table>

無(wú)邊框風(fēng)格

<table class="layui-table" lay-skin="nob"></table>

3、尺寸

小尺寸

<table class="layui-table" lay-size="sm"></table>

大尺寸

<table class="layui-table" lay-size="lg"></table>

4、隔行背景

<table class="layui-table" lay-even></table>

屬性名	說(shuō)明
lay-even	用于開(kāi)啟隔行背景，可與其它屬性一起使用
lay-skin="屬性值"	邊框風(fēng)格，若使用默認(rèn)風(fēng)格不設(shè)置該屬性即可
lay-size="屬性值"	尺寸，若使用默認(rèn)尺寸不設(shè)置該屬性即可

二、表格渲染

方式	機(jī)制	適用場(chǎng)景
方法渲染	用 `JS` 方法的配置完成渲染	（推薦）無(wú)需寫(xiě)過(guò)多的 `HTML`，在 `JS` 中指定原始元素，再設(shè)定各項(xiàng)參數(shù)即可。
自動(dòng)渲染	`HTML` 配置，自動(dòng)渲染	無(wú)需寫(xiě)過(guò)多 `JS`，可專(zhuān)注于 `HTML` 表頭部分
轉(zhuǎn)換靜態(tài)表格	轉(zhuǎn)化一段已有的表格元素	無(wú)需配置數(shù)據(jù)接口，在 `JS` 中指定表格元素，并簡(jiǎn)單地給表頭加上自定義屬性即可

1、方法渲染

<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      cols: [
        [
          //表頭
          { field: "area_id", title: "ID" },
          { field: "area_name", title: "城市名" },
          { field: "area_ip_desc", title: "歸屬" },
          { field: "first_pinyin", title: "拼音" },
          { field: "pinyin", title: "首字母" },
          { field: "status", title: "狀態(tài)" },
        ],
      ],
      data: [
        {
          area_id: 110000,
          area_name: "北京",
          area_ip_desc: "中國(guó),北京",
          first_pinyin: "Beijing",
          pinyin: "B",
          status: 1,
        },
        {
          area_id: 120000,
          area_name: "天津",
          area_ip_desc: "中國(guó),天津",
          first_pinyin: "Tianjin",
          pinyin: "T",
          status: 1,
        },
        {
          area_id: 130000,
          area_name: "河北省",
          area_ip_desc: "中國(guó),河北省",
          first_pinyin: "Hebei",
          pinyin: "H",
          status: 1,
        },
        {
          area_id: 140000,
          area_name: "山西省",
          area_ip_desc: "中國(guó),山西省",
          first_pinyin: "Shanxi",
          pinyin: "S",
          status: 1,
        },
        {
          area_id: 150000,
          area_name: "內(nèi)蒙古自治區(qū)",
          area_ip_desc: "中國(guó),內(nèi)蒙古自治區(qū)",
          first_pinyin: "Inner Mongolia",
          pinyin: "I",
          status: 1,
        },
        {
          area_id: 210000,
          area_name: "遼寧省",
          area_ip_desc: "中國(guó),遼寧省",
          first_pinyin: "Liaoning",
          pinyin: "L",
          status: 1,
        },
        {
          area_id: 220000,
          area_name: "吉林省",
          area_ip_desc: "中國(guó),吉林省",
          first_pinyin: "Jilin",
          pinyin: "J",
          status: 1,
        },
        {
          area_id: 230000,
          area_name: "黑龍江省",
          area_ip_desc: "中國(guó),黑龍江省",
          first_pinyin: "Heilongjiang",
          pinyin: "H",
          status: 1,
        },
        {
          area_id: 310000,
          area_name: "上海",
          area_ip_desc: "中國(guó),上海",
          first_pinyin: "Shanghai",
          pinyin: "S",
          status: 1,
        },
        {
          area_id: 320000,
          area_name: "江蘇省",
          area_ip_desc: "中國(guó),江蘇省",
          first_pinyin: "Jiangsu",
          pinyin: "J",
          status: 1,
        },
      ],
    });
  });
</script>

2、基礎(chǔ)參數(shù)

參數(shù)	類(lèi)型	說(shuō)明
elem	String/DOM	指定原始 `table` 容器的選擇器或 `DOM`，方法渲染方式必填
width	Number	設(shè)定容器寬度
height	Number/String	設(shè)定容器高度：1、不填寫(xiě) 2、固定值 3、full-差值
cellMinWidth	Number	常規(guī)單元格的最小寬度（默認(rèn)：60）
skin	Boolean/String	表格風(fēng)格：line （行邊框風(fēng)格）、row （列邊框風(fēng)格）、nob （無(wú)邊框風(fēng)格）
even	Boolean	隔行背景
size	String	尺寸：sm （小尺寸）、lg （大尺寸）

<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      cols: [
        [
          //表頭
          { field: "area_id", title: "ID" },
          { field: "area_name", title: "城市名" },
          { field: "area_ip_desc", title: "歸屬" },
          { field: "first_pinyin", title: "拼音" },
          { field: "pinyin", title: "首字母" },
          { field: "status", title: "狀態(tài)" },
        ],
      ],
      data: [
        {
          area_id: 110000,
          area_name: "北京",
          area_ip_desc: "中國(guó),北京",
          first_pinyin: "Beijing",
          pinyin: "B",
          status: 1,
        },
        {
          area_id: 120000,
          area_name: "天津",
          area_ip_desc: "中國(guó),天津",
          first_pinyin: "Tianjin",
          pinyin: "T",
          status: 1,
        }
      ],
      width: 500,
      height: 300,
      cellMinWidth: 120,
      skin: "nob",
      even: true,
      size: "lg",
    });
  });
</script>

三、表頭參數(shù)

cols 設(shè)置表頭。值是一個(gè)二維數(shù)組。方法渲染方式必填

參數(shù)	類(lèi)型	說(shuō)明
field	String	設(shè)定字段名。非常重要，且是表格數(shù)據(jù)列的唯一標(biāo)識(shí)
title	String	設(shè)定標(biāo)題名稱(chēng)
width	Number/String	設(shè)定列寬，若不填寫(xiě)，則自動(dòng)分配；若填寫(xiě)，則支持值為：數(shù)字、百分比
minWidth	Number	局部定義當(dāng)前常規(guī)單元格的最小寬度
type	String	設(shè)定列類(lèi)型：`normal`（常規(guī)列）、`checkbox`（復(fù)選框）、`radio`（單選框）、`numbers`（序號(hào)列）、`space`（空列）
LAY_CHECKED	Boolean	是否全選狀態(tài)（默認(rèn)：`false`）。必須復(fù)選框列開(kāi)啟后才有效
fixed	String	固定列?？蛇x值有：`left`（固定在左）、`right`（固定在右）
hide	Boolean	是否初始隱藏列，默認(rèn)：`false`
sort	Boolean	是否允許排序，默認(rèn)：`false`
unresize	Boolean	是否禁用拖拽列寬，默認(rèn)：`false`。如復(fù)選框列，會(huì)自動(dòng)禁用
style	String	自定義單元格樣式。即傳入 `CSS` 樣式
align	String	單元格排列方式：left（默認(rèn)）、center（居中）、right（居右）

<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          //表頭
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "歸屬", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "狀態(tài)", fixed: "right", style: "color:red;" },
        ],
      ]
    });
  });
</script>

四、異步數(shù)據(jù)

參數(shù)	類(lèi)型	說(shuō)明
url	String	接口地址。默認(rèn)會(huì)自動(dòng)傳遞兩個(gè)參數(shù)：`?page=1&limit=30`
method	String	接口 `http` 請(qǐng)求類(lèi)型，默認(rèn)：`get`
where	Object	接口的其它參數(shù)。如：`where: {token: 'sasasas', id: 123}`
contentType	Object	發(fā)送到服務(wù)端的內(nèi)容編碼類(lèi)型。如果你要發(fā)送 `json` 內(nèi)容，可以設(shè)置：`contentType: 'application/json'`
done	Function	數(shù)據(jù)渲染完的回調(diào)
error	Function	數(shù)據(jù)請(qǐng)求失敗的回調(diào)，返回兩個(gè)參數(shù)：錯(cuò)誤對(duì)象、內(nèi)容
page	Boolean/Object	分頁(yè)
limit	Number	每頁(yè)顯示的條數(shù)（默認(rèn) 10）
limits	Array	每頁(yè)條數(shù)的選擇項(xiàng)

1、url 接口

<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          //表頭
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "歸屬", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "狀態(tài)", fixed: "right", style: "color:red;" },
        ],
      ]
    });
  });
</script>

2、接口返回?cái)?shù)據(jù)的格式

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [
    {

    },
    {

    }
  ]
}

3、where 傳參數(shù)

<table id="demo"></table>
<script>
  layui.use("table", function () {
    var table = layui.table;
    table.render({
      elem: "#demo",
      url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
      where : {
        id : 0,
        status : 1
      },
      cols: [
        [
          { type: "checkbox", LAY_CHECKED: true },
          { type: "radio" },
          { type: "numbers" },
          { type: "space", title: "空列", width: 120 },
          { field: "area_id", title: "ID", width: 120, fixed: "left" },
          { field: "area_name", title: "城市名", unresize: true },
          { field: "area_ip_desc", title: "歸屬", align: "right" },
          { field: "first_pinyin", title: "拼音", hide: true },
          { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
          { field: "status", title: "狀態(tài)", fixed: "right", style: "color:red;" },
        ],
      ]
    });
  });
</script>

4、回調(diào)方法

table.render({
  elem: "#demo",
  url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
  where: {
    id: 0,
    status: 1,
  },
  cols: [
    [
      { type: "checkbox", LAY_CHECKED: true },
      { type: "radio" },
      { type: "numbers" },
      { type: "space", title: "空列", width: 120 },
      { field: "area_id", title: "ID", width: 120, fixed: "left" },
      { field: "area_name", title: "城市名", unresize: true },
      { field: "area_ip_desc", title: "歸屬", align: "right" },
      { field: "first_pinyin", title: "拼音", hide: true },
      { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
      { field: "status", title: "狀態(tài)", fixed: "right", style: "color:red;" },
    ],
  ],
  done(e) {
    console.log(e);
  },
});

5、翻頁(yè)

table.render({
  elem: "#demo",
  url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
  where: {
    id: 0,
    status: 1,
  },
  cols: [
    [
      { type: "checkbox", LAY_CHECKED: true },
      { field: "area_id", title: "ID", width: 120, fixed: "left" },
      { field: "area_name", title: "城市名", unresize: true },
      { field: "area_ip_desc", title: "歸屬", align: "right" },
      { field: "first_pinyin", title: "拼音", hide: true },
      { field: "pinyin", title: "首字母", minWidth: 500, sort: true },
      { field: "status", title: "狀態(tài)", fixed: "right", style: "color:red;" },
    ],
  ],
  page: true,
  limit: 30,
  limits: [30, 60, 90],
});

五、數(shù)據(jù)操作

1、綁定按鈕

參數(shù)	類(lèi)型	說(shuō)明
toolbar	String	開(kāi)啟表格頭部工具欄區(qū)域
defaultToolbar	Array	該參數(shù)可自由配置頭部工具欄右側(cè)的圖標(biāo)按鈕

toolbar: #toolbarDemo 指向自定義工具欄模板選擇器
toolbar: <div>xxx</div> 直接傳入工具欄模板字符
toolbar: true 僅開(kāi)啟工具欄，不顯示左側(cè)模板
toolbar: default 讓工具欄左側(cè)顯示默認(rèn)的內(nèi)置模板

<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm">添加</button>
    <button class="layui-btn layui-btn-sm">編輯</button>
    <button class="layui-btn layui-btn-sm">刪除</button>
  </div>
</script>
<table id="demo"></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: "checkbox" },
          { type: "radio" },
          { field: "area_id", title: "ID", width: 120 },
          { 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: 30,
      limits: [30, 60, 90],
    });
  });
</script>

defaultToolbar：filter 顯示篩選圖標(biāo)，exports 顯示導(dǎo)出圖標(biāo)，print 顯示打印圖標(biāo)

table.render({
  toolbar: "#toolbar",
  defaultToolbar: ["filter", "print", "exports"],
});

2、工具條事件

語(yǔ)法：table.on('event(filter)', callback);
event 為內(nèi)置事件名
filter 為容器 lay-filter 設(shè)定的值

<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>
  table.on("toolbar(test)", function (obj) {
    switch (obj.event) {
      case "add":
        layer.msg("添加");
        break;
      case "update":
        layer.msg("編輯");
        break;
      case "delete":
        layer.msg("刪除");
        break;
    }
  });
</script>

3、checkbox 復(fù)選框事件

checked 當(dāng)前是否選中狀態(tài)
data 選中行的相關(guān)數(shù)據(jù)
type 如果觸發(fā)的是全選，則為：all，如果觸發(fā)的是單選，則為：one

<table id="demo" lay-filter="test"></table>;
<script>
  table.on("checkbox(test)", function (obj) {
    console.log(obj); //當(dāng)前行的一些常用操作集合
  });
</script>

4、radio 單選框事件

checked 當(dāng)前是否選中狀態(tài)
data 選中行的相關(guān)數(shù)據(jù)

<table id="demo" lay-filter="test"></table>;
<script>
  table.on("radio(test)", function (obj) {
    console.log(obj);
  });
</script>

5、row 單雙擊事件

tr 得到當(dāng)前行元素對(duì)象
data 得到當(dāng)前行數(shù)據(jù)

<table id="demo" lay-filter="test"></table>;
<script>
  table.on("row(test)", function (obj) {
    console.log(obj);
  });
</script>

選中單行數(shù)據(jù)

<table id="demo" lay-filter="test"></table>;
<script>
  table.on("row(test)", function (obj) {
    obj.tr.find("div.layui-unselect.layui-form-radio")[0].click(); //單選
    obj.tr.find("div.layui-unselect.layui-form-checkbox")[0].click(); // 多選
  });
</script>

6、sort 排序切換

field 當(dāng)前排序的字段名
type 當(dāng)前排序類(lèi)型：desc（降序）、asc（升序）、null（空對(duì)象，默認(rèn)排序）
this 當(dāng)前排序的 th 對(duì)象

table.on("sort(test)", function (obj) {
  console.log(obj);
});

重新加載表格

table.on("sort(test)", function (obj) {
  table.reload("demo", {
    initSort: obj, //記錄初始排序，如果不設(shè)的話(huà)，將無(wú)法標(biāo)記表頭的排序狀態(tài)。
    toolbar: "#toolbar",
    elem: "#demo",
    url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
    where: {
      id: 0,
      status: 1,
      field: obj.field,
      order: obj.type,
    },
    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: {
      curr: 1,
    },
    limit: 30,
    limits: [30, 60, 90],
  });
});

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

05_表格

05_表格

一、頁(yè)面元素

1、常規(guī)用法

2、其他風(fēng)格

3、尺寸

4、隔行背景

二、表格渲染

1、方法渲染

2、基礎(chǔ)參數(shù)

三、表頭參數(shù)

四、異步數(shù)據(jù)

1、url 接口

2、接口返回?cái)?shù)據(jù)的格式

3、where 傳參數(shù)

4、回調(diào)方法

5、翻頁(yè)

五、數(shù)據(jù)操作

1、綁定按鈕

2、工具條事件

3、checkbox 復(fù)選框事件

4、radio 單選框事件

5、row 單雙擊事件

6、sort 排序切換

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

05_表格

一、頁(yè)面元素

1、常規(guī)用法

2、其他風(fēng)格

3、尺寸

4、隔行背景

二、表格渲染

1、方法渲染

2、基礎(chǔ)參數(shù)

三、表頭參數(shù)

四、異步數(shù)據(jù)

1、url 接口

2、接口返回?cái)?shù)據(jù)的格式

3、where 傳參數(shù)

4、回調(diào)方法

5、翻頁(yè)

五、數(shù)據(jù)操作

1、綁定按鈕

2、工具條事件

3、checkbox 復(fù)選框事件

4、radio 單選框事件

5、row 單雙擊事件

6、sort 排序切換

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2、其他風(fēng)格

3、尺寸

1、方法渲染

2、基礎(chǔ)參數(shù)

三、表頭參數(shù)

1、url 接口

2、接口返回?cái)?shù)據(jù)的格式

3、where 傳參數(shù)

4、回調(diào)方法

五、數(shù)據(jù)操作

1、綁定按鈕

2、工具條事件

4、radio 單選框事件

5、row 單雙擊事件

6、sort 排序切換