layui数据表格的按钮事件_layui表格按钮点击事件__花野的博客-程序员秘密

技术标签: 前端总结(es6 vue layui )  layui  前端  javascript  

可以参考layui官网
https://www.layuiweb.com/demo/table/form.html

在这里插入图片描述
获取的数据:

table.render({
    
                elem: '#test'
                , url: '/StoreServlet/get'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
                , where: {
    "name": name, "address": address}
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', {
     //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [[
                    {
    type: 'checkbox', fixed: 'left'}
                    , {
    field: 'roomcode', title: '门店编号', width: 100, sort: true}
                    , {
    field: 'storename', title: '门店名称', width: 120, edit: 'text'}
                    , {
    field: 'store_location', title: '门店地址', width: 200}
                    , {
    field: 'status', title: '门店状态', width: 150,templet: '#switchTpl', unresize: true}
                    , {
    
                        field: 'create_time',
                        title: '创建时间',
                        width: 350,
                        templet: "<div>{
     {layui.util.toDateString(d.create_time, 'yyyy年-MM月-dd日 HH:mm:ss')}}</div>"
                    }
                    , {
    fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    // , {
    fixed: 'store_location', title: '门店地址', toolbar: '#barDemo', width: 150}
                ]]

在页面加入

<script type="text/html" id="switchTpl">
            <!-- 这里的 checked 的状态只是演示           value="{
     {d.id}}" 是将id的值 传单点击的事件  d为当前点击的对象      -->
            <input type="checkbox" name="sex" value="{
     {d.id}}" lay-skin="switch" lay-text="正常|闭店" lay-filter="statusDemo" {
    {
     d.status == 0 ? 'checked' : '' }}>
        </script>

点击触发的事件

 //监听状态操作  点击时触发
        form.on('switch(statusDemo)', function(obj){
    
            alert("点击"+this.value)
            layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
        });
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wang121213145/article/details/122718794

智能推荐

iOS 使用WKWebView替换UIWebView(一)——理论讲解_dcloud ios 更换 wkwebview 依赖包_福州司马懿的博客-程序员秘密

转自 http://www.jianshu.com/p/6ba2507445e4开发App的过程中,常常会遇到在App内部加载网页,通常用UIWebView加载。这个自iOS2开始使用的网页加载器一直是开发的心病:加载速度慢,占用内存多,优化困难。如果加载网页多,还可能因为过量占用内存而给系统kill掉。各种优化的方法效果也不那么明显(点击查看常用优化方法)。iOS8以后,苹果推出了新框架

阿里云ecs云服务器安装wdcp控制面板教程(推荐CentOS6.5)_思月行云的博客-程序员秘密

http://www.admin5.com/article/20151013/627002.shtml  这五年来,做过近百个网站都是用虚拟主机做的,像美国空间,香港空间都是比较便宜的,一年百块钱就搞定一个网站,而且不用备案。一直不用服务器的原因,就是服务器太贵了,要备案,而且自己也不会用,怕学不会。  做为一个站长,我真的很业余,连服务器也不会用,我的个人博客最近流量大了,用的香

心里没点 B 树。。。_吴师兄学算法的博客-程序员秘密

B 树和红黑树的动画小吴还在制作当中,比想象中的复杂好多好多好多,今天先来一个图解版的 B 树。。。1 引言数据库的增删改查等操作是开发过程中最为常见也是尤为重要的,尤其...

keras学习笔记(二):实现f1_score(多分类、二分类)_linxid的博客-程序员秘密

首先容易谷歌到的两种方法:1. 构造metricsfrom keras import backend as Kdef f1(y_true, y_pred): def recall(y_true, y_pred): &amp;amp;amp;quot;&amp;amp;amp;quot;&amp;amp;amp;quot;Recall metric. Only computes a batch-wise average of recall.

C语言及程序设计初步例程-40 穷举法解题_weixin_33816611的博客-程序员秘密

贺老师教学链接C语言及程序设计初步本课讲解穷举法求解:百鸡百钱问题:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。百钱买百鸡,问鸡翁、鸡母、鸡雏各几何?#include &lt;stdio.h&gt;int main(){ int x,y,z; //定义数据类型为整型,买鸡和买烤鸡不是一个概念 for(x=0; x&...

华清远见fs4412开发板学习笔记(四)_ManGo CHEN的博客-程序员秘密

fs4412开发板学习笔记(四)今天的课程安排1.复习1.1 VIM 编辑器[1] vim + filename 打开[2] 工作模式命令模式编辑模式底行模式[3] 模式切换命令-&gt;编辑 i编辑-&gt;命令 ESC命令-&gt;底行 :底行-&gt;命令 ESC[4]命令模式yy 复制一行dd 剪切一行p/P 粘贴nyy/ndd 复制/剪切n行u 撤销ctrl+r 恢复光标移动h 左j 下k 上l 右[5]底行

随便推点

【OpenCV 例程200篇】88. 频率域拉普拉斯高通滤波_youcans_的博客-程序员秘密

拉普拉斯算子(Laplace)是导数算子,会突出图像中的急剧灰度变化,抑制灰度缓慢变化区域,往往会产生暗色背景下的灰色边缘和不连续图像。将拉普拉斯图像与原图叠加,可以得到保留锐化效果的图像。

C++11特性(6):POD类型_caychen的博客-程序员秘密

#include &amp;lt;iostream&amp;gt; /**********************************************************///测试类型是否是平凡的struct Trivial1{};struct Trivial2{ int a, b; }; struct Trivial3{ Trivial1 t1; ...

Disruptor 学习_disruptor中workerpool如何等待处理完成_yanghzaini的博客-程序员秘密

Martin Fowler在自己网站上写了一篇LMAX架构的文章,在文章中他介绍了LMAX是一种新型零售金融交易平台,它能够以很低的延迟产生大量交易。这个系统是建立在JVM平台上,其核心是一个业务逻辑处理器,它能够在一个线程里每秒处理6百万订单。业务逻辑处理器完全是运行在内存中,使用事件源驱动方式。业务逻辑处理器的核心是Disruptor。Disruptor它是一个开源的并发框架,并获得2011...

vue中引入echarts并实现echarts自适应_echarts 用:style_AHRL__的博客-程序员秘密

vue中引入echarts并实现echarts自适应在许多项目中需要使用到柱状图、饼状图等,在本篇博客中介绍echarts的自适应。实现echarts的自适应可以使用window.onresize(),具体操作如下: npm安装echats:npm install echarts --save在使用echarts的页面引入echartslet echarts = r...

[转]Windows Shell 编程 第十四章【来源:http://blog.csdn.net/wangqiulin123456/article/details/7988010】..._weixin_30664051的博客-程序员秘密

第十四章设计Shell集成应用有一些工具可以使应用程序更紧密地与Shell和底层系统进行集成。也就是说,用户可以象处理系统文档和程序那样处理你的文档和程序。例如,右击文件来显示可用功能列表等。Windows为每一个文件提供默认的功能集,如‘打开…’,‘属性’,‘拷贝’等。是否能为特定的文档增加特殊功能。为此,我们必须客户化这个文档类的关联菜单。另一个应该与Shell集成的例子是...

Qt程序打包发布方法(使用官方提供的windeployqt工具)_qt工程打包后仍之别之前的qtdir_惜双若雅的博客-程序员秘密

Qt程序打包发布方法(使用官方提供的windeployqt工具)转自:http://tieba.baidu.com/p/3730103947?qq-pf-to=pcqq.groupQt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无法正常运行。因此 Qt 官方开发环境里自带了一个工具

推荐文章

热门文章

相关标签