layui中table表格的操作列(删除,编辑)等按钮的操作


 1 暂停和中止按钮功能
 2         if (obj.event === 'del') {
 3             layer.confirm('确认中止么', function (index) {
 4                 $.ajax({
 5                     type: "post",
 6                     url: "/flow/processIntance/delete.afca",
 7                     data: {
 8                         "processInstanceId": data.processInstanceId,
 9                         "deleteReason": inputValue
10                     },
11                     dataType: 'json',
12                     success: function (data) {
13 
14                         if (data.code === '0') {
15                             // obj.del();
16                             layer.close(index);
17                             layer.msg(data.msg, {icon: 1, time: 2000, shade: 0.1});
18                             console.log(table);
19                             reload();
20                         } else {
21                             layer.close(index);
22                             layer.alert(data.msg, {
23                                 icon: 2, title: '提示'
24                             });
25                             return;
26                         }
27                     },
28                     error: function () {
29                     }
30                 })
31             });
32         } else if (obj.event === 'start-process' || obj.event === 'stop-process') {
33             var text = (data.suspended) ? "继续" : "暂停";
34             layer.confirm('确认' + text + '当前流程吗', function (index) {
35                 $.ajax({
36                     type: "post",
37                     url: "/flow/isSuspended.afca",
38                     data: {
39                         "processInstanceId": data.processInstanceId,
40                         "type": data.suspended ? 'start' : 'stop'
41                     },
42                     dataType: 'json',
43                     success: function (data) {
44 
45                         if (data.code === '0') {
46                             // obj.del();
47                             layer.close(index);
48                             layer.msg(data.msg, {icon: 1, time: 2000, shade: 0.1});
49                             reload();
50                         } else {
51                             layer.close(index);
52                             layer.alert(data.msg, {
53                                 icon: 2, title: '提示'
54                             });
55                             return;
56                         }
57                     },
58                     error: function () {
59                     }
60                 })
61             });
62         } 

 

  1     //编辑,删除,发布申请
  2     table.on('tool(demo)', function(obj){
  3         var data = obj.data;
  4         // console.log(data)
  5         if(obj.event === 'check'){
  6           //  console.log(data.id);
  7             $('.textCon').val("");
  8             layer.open({
  9                 title: '发布申请'
 10                 ,type: 1
 11                 ,maxmin:true
 12                 ,area: ['700px','570px']
 13                 ,content: $('#toExamine')
 14                 ,btn: ['申请', '取消']
 15                 ,yes: function(index, layero) {
 16                     var userName = $('#userRadio').val();
 17                     if(userName == null || userName == ''){
 18                         layer.msg("请选择用户", {icon: 2, time: 2000});
 19                         return;
 20                     }
 21                     var describe = $('.textCon').val();
 22                     if(describe == null || describe == ''){
 23                         layer.msg("请输入内容", {icon: 2, time: 2000});
 24                         return;
 25                     }
 26                     $.ajax({
 27                         type: "post",
 28                         url: "/approval/application/save.afca",
 29                         dataType:'json',
 30                         data: {
 31                             name: data.toolName,
 32                             targerId: data.id,
 33                             status: 0,
 34                             type: 'script',
 35                             describe: $('.textCon').val(),
 36                             key: 'script',
 37                             supUser:userName
 38                         },
 39                         success: function (data) {
 40                             var message = data.msg;
 41                             if(data.code === '0'){
 42                                 obj.del();
 43                                 layer.close(index);
 44                                 layer.msg(message,{icon: 1,time:2000});
 45                                 tableObj.reload({
 46                                     url:'/cd/workPlatform/tool/queryTools.afca'
 47                                 });
 48                             } else {
 49                                 layer.alert(message, {
 50                                     icon: 2,title:'提示'
 51                                 });
 52                                 return;
 53                             }
 54                         },
 55                         error: function () {
 56                         }
 57                     })
 58                 }
 59             });
 60             getAllUser();
 61             $('.laytable-cell-checkbox').eq(0).empty();
 62         } else if(obj.event === 'del'){
 63             layer.confirm('确认删除么', function(index) {
 64                 $.ajax({
 65                     type: "post",
 66                     url: "/cd/workPlatform/tool/remove.afca",
 67                     dataType:'json',
 68                     data: "id="+data.id,
 69                     dataType: "json",
 70                     success: function (data) {
 71                       //  console.log(data);
 72                         var message = data.msg;
 73                         var code = data.code;
 74                        // console.log(message);
 75                        // console.log(code);
 76                         if(data.code === '0'){
 77                             //obj.del();
 78                             layer.close(index);
 79                             layer.alert(message,{icon: 1,time:2000});
 80                             tableObj.reload({
 81                                 url:'/cd/workPlatform/tool/queryTools.afca'
 82                             });
 83                         } else {
 84                             layer.alert(message, {
 85                                 icon: 2,title:'提示'
 86                             });
 87                             return;
 88                         }
 89                     },
 90                     error: function () {
 91                     }
 92 
 93                 })
 94             });
 95             //编辑脚本定义
 96         }else if(obj.event === 'edit'){
 97             //之前版本
 98            // window.location.href='workToolEdit.html?toolSceneId='+data.toolSceneId+'&'+'id='+data.id;
 99             //脚本编辑弹出层
100             var name = encodeURIComponent(data.toolName);
101            // console.log(data.toolName);
102             parent.layer.open({
103                 type: 2,
104                 title: '编辑脚本定义',
105                 // title:data.to,
106                 shadeClose: true,
107                 shade: 0.8,
108               //  maxmin: true,
109                 area: ['100%', '100%'],
110                 content: 'html/taskManagement/scriptManagement/workToolEdit.html?toolSceneId='+data.toolSceneId+'&'+'id='+data.id
111             });
112         }else if(obj.event === 'showInformation'){
113             //脚本展示弹出层
114             var name = encodeURIComponent(data.toolName);
115           //  console.log(data.toolName);
116             parent.layer.open({
117                 type: 2,
118                 title: '展示脚本定义',
119                 // title:data.to,
120                 shadeClose: true,
121                 shade: 0.8,
122                // maxmin: true,
123                 area: ['100%', '100%'],
124                 content: 'html/taskManagement/scriptManagement/showScriptInformation.html?id='+data.id
125             });
126         }
127         else if(obj.event ==='jump'){
128             // window.location.href='openScriptParaVerManagement.html?toolId='+data.id;
129             var name = encodeURIComponent(data.toolName);
130           //  console.log(data.toolName);
131            parent.layer.open({
132                 type: 2,
133                 title: '参数版本管理',
134                 // title:data.to,
135                 shadeClose: true,
136                 shade: 0.8,
137                // maxmin: true,
138                 area: ['100%', '100%'],
139                 content: 'html/taskManagement/scriptManagement/openScriptParaVerManagement.html?toolId='+data.id+"&jiaoben="+name+"&banben="+data.version+"&scriptLanguage="+data.scriptLanguage+"&categoryName="+data.categoryName+"&=status"+data.status
140             });
141         }
142     });
 1 //html代码
 2    <script type="text/html" id="barDemo">
 3         <!--操作工具-->
 4         <a href="" lay-event="edit">编辑</a>
 5         <a href="" lay-event="jump">参数管理</a>
 6         <a href="" lay-event="del">删除</a>
 7         {{# if (d.status !="1"){}}
 8         <a href="" lay-event="check">发布申请</a>
 9         {{#}}}
10     </script>

 

转载于:https://www.cnblogs.com/yangguoe/p/8955369.html

<think>好的,我现在需要帮助用户解决在Layui框架中向表格最后一列添加操作按钮的问题。根据用户提供的引用内容,我需要先理解Layui表格的基本结构和事件绑定方法。 首先,用户提到引用[1]中的内容,关于表单提交事件和表格下拉按钮点击事件。这里的关键点可能是lay-filter和lay-submit属性的使用,这两个属性在事件绑定中起到关键作用。另外,引用[2]提到了给指定单元格添加事件,特别是链接的添加示例,这可能涉及到的模板配置和事件监听。 接下来,我需要回忆Layui表格的基本结构。通常,Layui表格通过table.render方法进行初始化,定义在cols数组中。要在最后一列添加操作按钮,应该在该的templet属性中使用函数返回包含按钮的HTML字符串。同时,事件处理需要使用table.on方法监听工具条事件,通过lay-event属性区分不同的操作类型。 然后,考虑用户可能需要的示例代码结构。首先定义表格,最后一列的templet生成按钮的HTML,并为按钮设置lay-event属性。接着在JavaScript中使用table.on监听事件,根据lay-event的值执行不同的操作,比如编辑删除。 需要注意的是,用户可能希望操作按钮出现在每一行的最后一列,并且点击后能触发相应的功能。根据引用[2]中的示例,使用工具条(toolbar)可能是常见做法,但用户的问题更偏向于在中添加自定义按钮,而非使用内置工具条。因此,正确的做法是在配置中使用自定义模板,并通过事件委托来监听按钮点击。 另外,确保按钮被包裹在正确的表单标签内,如引用[1]提到的,但此处可能不涉及表单提交,而是单纯的事件绑定。因此,使用lay-filter和lay-event来识别按钮事件更为合适。 最后,验证代码的正确性,确保定义正确,事件监听器正确绑定,并且按钮点击后能触发预期的函数。可能需要测试代码是否存在语法错误,比如括号闭合、逗号分隔等问题。</think>在Layui框架中向表格最后一列添加操作按钮,可以通过以下步骤实现: ### 一、表格配置 在`cols`数组中配置最后一列属性,使用`templet`字段生成包含操作按钮的HTML结构: ```javascript table.render({ elem: '#demo', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, { title: '操作', templet: function(d){ return '<div class="layui-btn-group">' + '<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>' + '<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>' + '</div>' } } ]] }); ``` ### 二、事件绑定 通过`table.on`方法监听单元格事件,结合`lay-event`属性识别操作类型: ```javascript table.on('tool(demo)', function(obj){ //demo为表格的lay-filter属性值 const event = obj.event; // 获取按钮的lay-event值 const data = obj.data; // 获取当前行数据 switch(event) { case 'edit': layer.msg('编辑操作:' + JSON.stringify(data)); break; case 'del': layer.confirm('确认删除?', function(index){ obj.del(); // 删除对应行 layer.close(index); }); break; } }); ``` ### 三、关键特性说明 1. **工具条事件绑定**:必须通过`lay-filter`标识表格,事件监听器才能正确关联[^1] 2. **按钮层级结构**:操作按钮需要包含在`layui-btn-group`容器中,以保证按钮组样式正确[^2] 3. **响应式适配**:使用`layui-btn-xs`类实现不同屏幕尺寸下的自适应显示
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值