這篇文章給大家介紹如何使用layui加載表格，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷需求！創(chuàng)新互聯(lián)具備承接各種類型的成都網(wǎng)站建設(shè)、成都做網(wǎng)站項(xiàng)目的能力。經(jīng)過10多年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

js方法

/**
 * 頁面內(nèi)彈出編輯窗口 //需要引入 layui.js layui.css文件
 * @param {} title 標(biāo)題 不顯示為false
 * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只設(shè)置寬度
 * @param {} path 彈出頁面路徑
 * @param {} sucFunName 執(zhí)行保存操作后再彈出頁面中的保存方法名稱
 * @param {} callBack 執(zhí)行保存操作之后的其他操作
 * @returns {} 
 */
function openDetial(title, area, path, sucFunName, callBack) {
 layer.open({
  type: 2,
  title: title, //不顯示標(biāo)題欄
  closeBtn: 2,
  area: area,
  shade: 0.8,
  id: (new Date()).valueOf(), //設(shè)定一個(gè)id，防止重復(fù)彈出 時(shí)間戳1280977330748
  btn: ['保存', '取消'],
  btnAlign: 'r',
  moveType: 1, //拖拽模式，0或者1
  content: path,
  yes: function (index, layero) {
   var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
   alert("-----");
   try {
    var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||
      btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;
    var func = new Function('_ifr', "return _ifr." + sucFunName + "();");
    var flg = func(_ifr);
    if (flg == false) {
     return false;
    } else {
     if (callBack != null) callBack();
     window.location.reload();
    }
   } catch (ex) {
 
   }
  },
  btn2: function (index, layero) {
  }
 });
}
//
 
 
/**
 * 初始化表格及表格相關(guān)的簡(jiǎn)單操作 //需要引入 layui.js layui.css文件
 * @param {} t table參數(shù)形如 {id:'test',indexName:'ID',heigt:'full-30',url:'Account?GetTableJson|&',page:true,cols:[ { field: 'ID', title: 'ID', width: 80 },]}
 * @param {} editor 編輯方法
 * @param {} deltes 刪除方法
 * @param {} read 查看方法
 * @returns {} 
 */
function createTable(t, editor, deltes, read) {
 var bodys = document.getElementsByTagName("body")[0];
 bodys.innerHTML += '' +
  '' +
  ' 查看' +
  ' 編輯' +
  ' 刪除' +
  '';
 
 layui.use(['laypage', 'table'], function () {
  var laypage = layui.laypage, //分頁
   table = layui.table; //表格
  //執(zhí)行一個(gè) table 實(shí)例
  table.render({
   elem: '#' + (t.id || 'test'),
   id: t.indexName || ID,
   height: t.heigt || 'full-30',
   url: t.url, //數(shù)據(jù)接口
   page: t.page, //開啟分頁
   cols: [
    t.cols
   ]
  });
 
  table.on('tool(demo)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
   var data = obj.data, //獲得當(dāng)前行數(shù)據(jù)
 layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值
   if (layEvent === 'detail') {
    if (read != null) read(obj);
   } else if (layEvent === 'del') {
    layer.confirm('真的刪除行么', function (index) {
     obj.del(obj); //刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)
     layer.close(index);
     //向服務(wù)端發(fā)送刪除指令
     if (deltes != null) deltes(obj);
    });
   } else if (layEvent === 'edit') {
    editor(obj);
   }
  });
 });
}

調(diào)用頁面

layui是什么

layui是一款采用自身模塊規(guī)范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內(nèi)置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)，能夠作為PC網(wǎng)頁端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開發(fā)方案。

關(guān)于如何使用layui加載表格就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。