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

1a3272c8cbf370294b3a01eb5c440259.png

出现的问题:

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

2、传递参数问题

使用的 table 加载刷新方案

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

c635631abdbfe1de041385eaf4534ad9.png

这里我们不谈 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使用教程栏目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

存内计算能否成为下一代AI芯片的关键

来源:半导体行业观察随着人工智能的落地和大规模应用,AI芯片也成为了常见的芯片品类。AI芯片相比传统芯片来说,主要的竞争优势就在于高算力和高能效比。高算力是指能够比传统芯片更快地完成AI计算,而高能效比则是指能比传统芯片用…

[转载]sql server 分布式查询

--用openrowset连接远程SQL或插入数据 --如果只是临时访问,可以直接用openrowset--查询示例select * from openrowset(SQLOLEDB,sql服务器名;用户名;密码,数据库名.dbo.表名)在跨库查询时需要启用Ad Hoc Distributed Queries启用Ad Hoc Distributed Queries:exec sp…

matlab画半透明矩形,使用matlab画半透明椭圆

先上最终效果图:本来是想直接用scatter和alpha来画的,结果在尝试以下代码后,发现无法显示透明效果scatter(rand(1000,1),rand(1000,1), ‘filled‘);alpha(0.5)具体原因可以参考stackoverflow(http://stackoverflow.com/questions/6366404/se…

2019全球信息通信业热点回顾

来源: 人民邮电报编辑:于莉莉 监制:郭川时光飞逝,倏忽一年。回首2019年,全球电信业最大的热点当属5G。这一年,5G在经过数年酝酿后终于商用,无论是运营商还是政府,都对5G给予了空前的…

SSIS添加分区-动态

主要参考:动态分区 一、前提准备: 1、一个日期存储过程,注意代码可以得到一个月中的最后一天,最终生成时间维度。 USE [DrugDW] GO /****** Object: StoredProcedure [dbo].[PROC_DATETIME] Script Date: 2/28 星期二 14:16:4…

canvas 实现图片局部模糊_小技巧!H5使用Html2Canvas实现自动截屏(下)

上文写到使用html2Canvas实现截屏。上次留了一个问题,如果当前dom元素对象比较大,比如包含一个比较大的图片等,在将dom序列化成字符串时,极易导致字符串超长。对于超长的内容,后台程序将获取不到参数,那么怎…

getjson php 函数,PHP读写JSON文件以及jQuery的getJSON函数用法

在写的音乐网站中用到保存用户歌单功能,即用户登录后可以显示该用户之前保存的歌单,开始的思路是使用数据库来保存,后来为了方便于是考虑使用json数据格式来保存歌单,这样也和播放器插件的json参数比较契合.读取JSON文件<?php $filename "chation99.json";$json…

悬而未决的AI竞赛:全球企业人工智能发展现状

来源&#xff1a;德勤,智东西随着企业领袖逐渐将人工智能视为下一轮经济大扩张的重要推动力量&#xff0c;一种担忧错失良机的情绪在全球范围内日益蔓延。许多国家纷纷制定人工智能战略&#xff0c;通过资金投入、政策激励、人才发展和风险管理推进技术能力的发展。人工智能对于…

Science揭示:身体如何应对细菌的“群体感应”

电子显微镜下的假单胞菌细菌。图片来源&#xff1a;MPIIB / Volker Brinkmann来源&#xff1a;中国生物技术网众所周知&#xff0c;细菌感染并不会马上导致疾病&#xff0c;只有在它们大量出现时才会对身体造成威胁。近日&#xff0c;发表在《Science》上的一项研究中&#xff…

百度:2020年十大科技趋势

来源&#xff1a;6G俱乐部图片来源&#xff1a;百度2019&#xff0c;关于科技的鲜活记忆&#xff0c;正在快速变成时间洪流的一部分&#xff0c;也变成了我们读懂未来的钥匙。过去一年中&#xff0c;多技术融合正在加快&#xff0c;AI开发的门槛在迅速降低&#xff0c;产业智能…

美国计划让“人工智能”去搜寻外星人!

来源&#xff1a;科学解码据美国太空网近日报道&#xff0c;美国国家航空航天局&#xff08;NASA&#xff09;官员称&#xff0c;他们希望利用人工智能&#xff08;例如机器学习&#xff09;技术&#xff0c;分析大型望远镜等收集的数据&#xff0c;从而帮助搜寻外星生命&#…

三宝机器人怎么充电_巨人通力导致吉祥三宝+36号故障怪现象的又一因素

想必大家都有过这样的经历&#xff1a;在电梯故障频繁出现时&#xff0c;明明可以判断是哪里的问题&#xff0c;但事实却是让你感觉不可思议&#xff0c;并且排查过程颇为周折。今天和大家分享一下我经历的巨人通力GPS30K电梯出现的吉祥三宝故障的排查过程。下图为电梯控制柜铭…

《自然》展望2020年重大科学事件!中国有两个大计划安排上了

来源&#xff1a;科技日报图片来源&#xff1a;Nature官网&#xff08;不包括标注了来源的图片&#xff09;“千门万户曈曈日&#xff0c;总把新桃换旧符”&#xff01;在辞旧迎新之际&#xff0c;我们除了要埋头梳理过去一年的悲欢得失&#xff0c;也应抬头眺望新一年的星辰大…

vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用

***** git项目地址&#xff1a; https://github.com/surmon-china/vue-video-player***** 参考文章&#xff1a; https://www.jianshu.com/p/532fc1d8c90c使用安装&#xff1a; npm install vue-video-player --save2. 在main.js入口文件中引入import VideoPlayer from vue-vid…

php流程控制作业题,php流程控制

一、get传值我们请求服务器下一步操作啊&#xff0c;都是用get进行传值&#xff0c;然后服务器用预定义变量数组$_GET&#xff0c;接受。二、流程控制1 三元运算符 ? :逻辑很简单&#xff0c;就是设置条件&#xff0c;条件成立就执行“&#xff1f;” 。条件不成立就执行”:…

JS中的call()和apply()方法(转)

转自&#xff1a;http://uule.iteye.com/blog/1158829 JS中的call()和apply()方法 博客分类&#xff1a; JS1、方法定义 call方法: 语法&#xff1a;call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义&#xff1a;调用一个对象的一个方法&#xff0c;以另一个对象替换当前对象…

中国AI芯片产业发展白皮书:未来三年年均增长率超50%

来源&#xff1a;赛迪顾问《中国AI芯片产业发展白皮书》从AI芯片的定义及分类、发展过程与现状、应用机会、竞争格局、发展趋势等多角度全面剖析AI芯片的发展新态势、 技术演进及行业格局&#xff0c;旨在为业内相关企业把握行业发展动态、挖掘市场机遇&#xff0c;提供借鉴与参…

人工智能与经济生产力:期待进化,而不是革命

Illustration: Edmon de Haro来源&#xff1a; IEEE电气电子工程师尽管大肆宣传&#xff0c;人工智能仍需数年时间才能显著提高经济生产力。2016年&#xff0c;总部位于伦敦的Alphabet&#xff08;也是谷歌的母公司&#xff09;的子公司DeepMind Technologies报告称&#xff0c…

oracle 表 上限,Oracle分区表(Partition Table)的数量限制

Oracle分区表(Partition Table)的数量限制有朋友在我的留言板上问到这样一个问题:oracle分区表是不是有最大分区个数限制,我有一张大约20G的表,有好多分区(按时间),结果根据这个时间条件查询就报ORA-03113 end-of-file on communication channel错误,然后断开链接,硬件与网络都…

张恭庆院士:数学的意义(最全最牛的解释)

来源&#xff1a;数学严老师北京大学数学科学学院教授、中国科学院院士、第三世界科学院院士数学既是一种文化、一种“思想的体操”&#xff0c;更是现代理性文化的核心。马克思说&#xff1a;“一门科学只有当它达到了能够成功地运用数学时&#xff0c;才算真正发展了。”在前…