当前位置:首页 > 日记 > 正文

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

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

背景

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

出现的问题:

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

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

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

有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当点击 tree 节点时,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     /

相关文章

jquery使用iscorll实现上拉、下拉

jquery使用iscorll实现上拉、下拉

下拉加载,刷新,上拉,电脑软件,jquery,本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码,供大家参考,具体内容如下实现原理是:判断fiiptop,flipdown是否显示为依据myScroll = new iScroll('wraphome', { fixedScrollbar:…

为JQuery EasyUI 表单组件增加焦点

为JQuery EasyUI 表单组件增加焦点

表单,方法,组件,功能,焦点,1、背景说明 在使用 JQuery EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabinde…

微信小程序(六):列表上拉加载下拉刷新

微信小程序(六):列表上拉加载下拉刷新

下拉刷新,列表,上拉加载,示例,程序,1.列表(本部分内容出入官方文档)对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果…

JS开发中基本数据类型具体有哪几种

JS开发中基本数据类型具体有哪几种

基本数据类型,几种,电脑软件,JS,JS开发中基本数据类型有哪些?JS的数据类型包括基本数据类型、复杂数据类型和特殊数据类型,今天我们主要先讲解一下基本数据类型。0、先提示两个下面用到的知识点:0.1typeof,是用来检测变量类型的写法:typeof a;0.2…

浅谈mint-ui loadmore组件注意的问

浅谈mint-ui loadmore组件注意的问

组件,浅谈,电脑软件,ui,mint,如下所示:loadTop(){ this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size}); this.$refs.loadmore.onTopLoaded();},比如在做下拉刷新的时候,切记在下拉刷新的函数中要加this.$re…

JavaScript数据结构之双向链表定义

JavaScript数据结构之双向链表定义

数据结构,双向链表,示例,使用方法,定义,本文实例讲述了JavaScript数据结构之双向链表定义与使用方法。分享给大家供大家参考,具体如下:双向链表和普通链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个…

Yii2 批量插入、更新数据实例

Yii2 批量插入、更新数据实例

批量插入,更新数据,实例,电脑软件,在使用yii2开发项目时,有时候会遇到这样的情况:向后台发送多条数据,其中一些数据已经存在记录,只需要对其部分字段的值进行修改;而另一部分的数据则需要新添加进去.这就需要对添加的数据进行判断,其中一些…

Excel如何为不连续数据区域创建图

Excel如何为不连续数据区域创建图

区域,图表,数据,不连续,何为,  在Excel中,我们常常会根据现有的表格创建图表,以期达到更直观显示数据的目的。但并不是表格中所有的列都会需要显示在图表中的。以下是小编为您带来的关于Excel为不连续数据区域创建图表,希望对您有所帮助。Ex…

基于cookie实现zTree树刷新后展开

基于cookie实现zTree树刷新后展开

状态,刷新,电脑软件,cookie,zTree,基于cookie实现zTree树刷新后,展开状态不变。1、除了引用jQuery和zTree的JS外,引用cookie的JS:<script type="text/javascript" src="~/Scripts/jquery-treeview/lib/jquery.cookie.js"></script>2、JS代…

基于React实现表单数据的添加和删

基于React实现表单数据的添加和删

删除,表单,数据,详解,电脑软件,前言最近在学习React,做了一个简单的Demo,用以自勉及和有需要的朋友们参考学习。实现功能在输入框中输入数据后,点击保存按钮,数据将会逐一显示在输入框下方,点击保存后显示的任何一条数据,该数据即可被删除。实现…

jQuery使用DataTable实现删除数据

jQuery使用DataTable实现删除数据

加载,删除数据,功能,电脑软件,jQuery,问题描述:利用jQuery Datatable和artTemplate组合来做的表格。但是当删除数据时,需要重新加载table里的数据。但是问题是datatable并没有直接的重新渲染,反而给数据累加上了。解决办法:经过查看高人的blog,…

WPS表格怎么把数据分列WPS表格把数

WPS表格怎么把数据分列WPS表格把数

数据,步骤,方法,表格,电脑软件,  有时候会拿到一个用txt或者其他文本记录的数据,要求你把这些数据录入进excel里面,数据多一个一个录入是不可能的事了。那么有是什么方法可以批量完成呢?下面小编教你数据分列的方法步骤,希望对你有帮助!WPS表…