出现的问题:

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

2、传递参数问题

使用的 table 加载刷新方案

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

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

首先贴出源表格代码:

序号销售ID姓名年份一月二月年度操作

直接在代码中通过注释讲解:(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相关文章请关注layui使用教程栏目。

php layui table,Layui table组件相关介绍相关推荐

  1. wepy框架组件相关介绍

    常规使用 父组件 <style lang="scss"> </style> <template><xx></xx> &l ...

  2. 【Layui】使用table和laypage组件实现动态显示列和分页

    脚本内容 layui.use(['table', 'laypage'], function () {var table = layui.table;var laypage = layui.laypag ...

  3. layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题

    解决layui数据表格table的横向滚动条显示问题 加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...

  4. layui组件相关学习

    Layui相关组件学习 狂神是一个很好的学习平台 Layui相关组件学习官网 1.选项卡 说明:在标签中使用class=layui-tab可定义该标签为一个选项卡,lay-allowClose=&qu ...

  5. html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...

    layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整 需要把heigh高度写死 table.render({ elem: ...

  6. layui中的table使用心得,json格式处理,json转字符串,json转对象,json转对象数组,layui表格图片显示修改。

    文章目录 案例一.layui中table,后台数据是json格式的处理 1. 前端显示样式 2. 前端代码 3. 后端代码:layui前端表格需要返回的数据格式要求示例 4. json格式处理工具类: ...

  7. Layui框架 中table解决日期格式问题

    Layui框架 中table解决日期格式问题 参考文章: (1)Layui框架 中table解决日期格式问题 (2)https://www.cnblogs.com/slacker-z/p/996347 ...

  8. layui结合form,table的全选、反选v1.0

    layui结合form,table的全选.反选v1.0 需要引入layui.css和layui.js html代码如下: <div class="layui-form"> ...

  9. layUI数据表格(table)

    <!--引入 layui.css--> //定义表格 <table class="layui-table" lay-data="{id:'myTable ...

最新文章

  1. 杭电1171(01背包求解)
  2. MongoDB学习笔记~为IMongoRepository接口添加分页取集合的方法
  3. Linux Shell的输入彩色字体
  4. STM32移植RT-Thread的串口只能接收一个字节数据的问题
  5. 【Vulnhub靶机系列】DC1
  6. bzoj 1124 [POI2008]枪战Maf 贪心
  7. 微信内置JsAPI之WeixinJSBridge
  8. oracle内存架构(一)
  9. Golang 入门 : 打造开发环境
  10. fineui中前端自定义函数
  11. npcap和winpcap的关系
  12. 计算机组成原理课程设计基于cop2000
  13. linux系统怎么设任务计划,在Linux系统上设置计划任务
  14. English trip V2 - 8 Holidays and Birthdays Teacher:Julia Key: at on in
  15. python word2vec怎么用_小白看Word2Vec的正确打开姿势|全部理解和应用
  16. 百度贴吧头像上传无尺寸限制
  17. 变焦对焦_15个安全变焦会议的提示
  18. linux设备驱动归纳总结(九):1.platform设备驱动
  19. 面试yan-原理性函数
  20. 利用Vulhub复现log4j漏洞

热门文章

  1. python sorted下标_Python列表操作最全面总结
  2. prompt你到底行不行?
  3. 简单复读机LR如何成为推荐系统精排之锋?
  4. 1年排名前进13位 ,这个论题成顶会新宠!
  5. 论文浅尝 | 主题驱动的分子图表示对比学习
  6. 论文浅尝 – KDD2020 | 使用图对比编码的图神经网络预训练模型
  7. docker build 中的上下文路径
  8. 【Java】Object类、Objects类和日期类
  9. Reading SBAR SDN flow-Based monitoring and Application Recognition
  10. Cluster - LB - haproxy