如何使用layui加载表格

这篇文章给大家介绍如何使用layui加载表格，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！创新互联具备承接各种类型的成都网站建设、成都做网站项目的能力。经过10多年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

js方法

/**
 * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件
 * @param {} title 标题 不显示为false
 * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度
 * @param {} path 弹出页面路径
 * @param {} sucFunName 执行保存操作后再弹出页面中的保存方法名称
 * @param {} callBack 执行保存操作之后的其他操作
 * @returns {} 
 */
function openDetial(title, area, path, sucFunName, callBack) {
 layer.open({
  type: 2,
  title: title, //不显示标题栏
  closeBtn: 2,
  area: area,
  shade: 0.8,
  id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳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) {
  }
 });
}
//
 
 
/**
 * 初始化表格及表格相关的简单操作 //需要引入 layui.js layui.css文件
 * @param {} t table参数形如 {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; //表格
  //执行一个 table 实例
  table.render({
   elem: '#' + (t.id || 'test'),
   id: t.indexName || ID,
   height: t.heigt || 'full-30',
   url: t.url, //数据接口
   page: t.page, //开启分页
   cols: [
    t.cols
   ]
  });
 
  table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
   var data = obj.data, //获得当前行数据
 layEvent = obj.event; //获得 lay-event 对应的值
   if (layEvent === 'detail') {
    if (read != null) read(obj);
   } else if (layEvent === 'del') {
    layer.confirm('真的删除行么', function (index) {
     obj.del(obj); //删除对应行（tr）的DOM结构
     layer.close(index);
     //向服务端发送删除指令
     if (deltes != null) deltes(obj);
    });
   } else if (layEvent === 'edit') {
    editor(obj);
   }
  });
 });
}

调用页面

layui是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

关于如何使用layui加载表格就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。