Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数


Posted in Javascript onSeptember 11, 2017

背景

笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧!

出现的问题:

1、使用 Layui 官方提供的 【转换静态表格】 方式初始化加载时报 id 找不到的错误(自己的锅)

2、传递参数问题(姑且算是 Layui 官方的锅)

笔者使用的 table 加载刷新方案

有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当点击 tree 节点时,table 进行筛选,很简单的需求吧!

Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数 

这里我们不谈 tree 的使用,将仅仅贴出 table 的相关方法!

首先贴出源表格代码:

<table class="layui-table" lay-filter="EditListTable">
 <thead>
 <tr>
  <th lay-data="{field:'Index', width:60}">序号</th>
  <th lay-data="{field:'UserId', width:80}">销售ID</th>
  <th lay-data="{field:'UserName', width:80}">姓名</th>
  <th lay-data="{field:'Year', width:70}">年份</th>
  <th lay-data="{field:'M01', width:80}">一月</th>
  <th lay-data="{field:'M02', width:80}">二月</th>       
  <th lay-data="{field:'YearValue', width:80, fixed: 'right'}">年度</th>
  <th lay-data="{width:100, align:'center', toolbar: '#barDemo1', fixed: 'right'}">操作</th>
 </tr>
 </thead>
</table>
<script type="text/html" id="barDemo1">
 <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
</script>

直接在代码中通过注释讲解:

(function () {
 //加载列表的后端 url
 var getListUrl = '';
 //对于任意一个 table,按照官方的说法,有三种不同的初始化渲染方式,不多介绍,而这里使用的方式姑且看做第三种:转换静态表格 方式
 //转换静态表格方式,自然首先需要有一个已经存在的表格,然后再通过 js 方式转化为 Layui 表格
 //无论哪种方式的 Layui table 初始化自然需要配置项
 //通过转化的方式初始化 Layui table,配置项部分可以在 源table中,部分在js中,源 table 的源代码上文已经给出,下面给出一个示例的 js 中的配置项
 var tableOptions = {
  url: getListUrl, //请求地址
  method: 'POST', //方式
  id: 'listReload', //生成 Layui table 的标识 id,必须提供,用于后文刷新操作,笔者该处出过问题
  page: false, //是否分页
  where: { type: "all" }, //请求后端接口的条件,该处就是条件错误点,按照官方给出的代码示例,原先写成了 where: { key : { type: "all" } },结果并不是我想的那样,如此写,key 将是后端的一个类作为参数,里面有 type 属性,如果误以为 key 是 Layui 提供的格式,那就大错特错了
  response: { //定义后端 json 格式,详细参见官方文档
   statusName: 'Code', //状态字段名称
   statusCode: '200', //状态字段成功值
   msgName: 'Message', //消息字段
   countName: 'Total', //总数字段
   dataName: 'Result' //数据字段
  }
 };
 //
 layui.use(['table', 'layer'], function () {//layui 模块引用,根据需要自行修改
  var layer = layui.layer, table = layui.table;
  //表初始化
  var createTable = function () {
   table.init('EditListTable', tableOptions);// table lay-filter
  };
  //表刷新方法
  var reloadTable = function (item) {
   table.reload("listReload", { //此处是上文提到的 初始化标识id
    where: {
     //key: { //该写法上文已经提到
      type: item.type, id: item.id
     //}
    }
   });
  };
  //表初始化
  createTable();
  //其他和 tree 相关的方法,其中包括 点击 tree 项调用刷新方法
 });
})();

后端方法:

//本示例中,后台代码写法
public ActionResult GetGoalList(string type, string id)
{
  //
}

//如果按照官方文档条件项,应该是下面的写法

public ActionResult GetGoalList(keyItem key)
{
  //
}
public class keyItem
{
 public string id { get; set; }
 public string type { get; set; }
}

总结

以上所述是小编给大家介绍的Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
面向对象Javascript核心支持代码分享
May 23 Javascript
中止javascript执行的方法
Feb 14 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
Vuejs 页面的区域化与组件封装的实现
Sep 11 #Javascript
js封装成插件的步骤方法
Sep 11 #Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 #Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 #Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 #Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 #Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php中this关键字用法分析
2016/12/07 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
简单了解python的内存管理机制
2019/07/08 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
中式结婚主持词
2014/03/14 职场文书
家长意见书
2015/06/04 职场文书