本文章主要介绍了layui的简单表格及table.on()的使用,具有不错的的参考价值,希望对您有所帮助,如解说有误或未考虑完全的地方,请您留言指出,谢谢!
<body> 
<!-- 任务管理列表 --> 
<div class="layui-fluid larry-wrapper"> 
    <section class="panel panel-padding"> 
        <!--<form id="taskSearch" 
              class="layui-form layui-form-pane form-conmon" 
              data-params='{"dataName":"taskTable", "action":"list", "ajax":false, "bind":false}'> 
            <div class="layui-form-item layui-form-item-sm"> 
                <div class="layui-row layui-col-space10"> 
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3"> 
                        <div class="layui-form-item layui-form-item-sm"> 
                            <label class="layui-form-label">任务组名称</label> 
                            <div class="layui-input-block"> 
                                <input id="jobName" name="jobName" type="text" 
                                       class="layui-input" placeholder="任务组名称"/> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3"> 
                        <div class="layui-form-item layui-form-item-sm"> 
                            <label class="layui-form-label">任务名称</label> 
                            <div class="layui-input-block"> 
                                <input id="name" name="name" type="text" 
                                       class="layui-input" placeholder="任务名称"/> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3"> 
                        <div class="layui-form-item layui-form-item-sm"> 
                            <label class="layui-form-label">状态</label> 
                            <div class="layui-input-block"> 
                                <select name="deletedFlag" id="deletedFlag"> 
                                    <option value="">&#45;&#45;请选择&#45;&#45;</option> 
                                    <option value="0">启用</option> 
                                    <option value="1">禁用</option> 
                                </select> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3 text-right"> 
                        <button id="searchBtn" class="layui-btn layui-btn-sm" jq-submit 
                                jq-filter="search"> 
                            <i class="iconfont search-icon">&#xe61b;</i> 查询 
                        </button> 
                        <button id="resetBtn" type="reset" 
                                class="layui-btn layui-btn-danger layui-btn-sm"> 
                            <i class="iconfont search-icon">&#xe63a;</i> 重置 
                        </button> 
                    </div> 
                </div> 
            </div> 
        </form>--> 
        <div class="layui-form-item layui-form-item-sm"> 
            <div class="layui-row"> 
                <div class="layui-col-md12 layui-col-sm12 layui-col-xs12" style="margin-top: 8px;"> 
                    <button id="insertBtn" class="layui-btn btn-outline layui-btn-normal layui-btn-sm modal" 
                       data-params='{content: "./task_add.html",type:"2","full":"true", title: "新增任务"}'> 
                        <i class="iconfont search-icon">&#xe635;</i> 新增 </button> 
                </div> 
            </div> 
            <table class="layui-table jq-even" id="LAY_table_task" 
                   lay-filter="taskTable" lay-even=""></table> 
        </div> 
    </section> 
</div> 
</body> 
<!--#include virtual ="include/version.html"--> 
<script type="text/html" id="barDemo"> 
    {{#  if(d.jobStatus=='NORMAL'){ }} 
        <a class="layui-btn layui-btn-xs" lay-event="onoff">禁用</a> 
    {{#  } else{ }} 
        <a class="layui-btn layui-btn-xs" lay-event="onoff">启用</a> 
    {{#  } }} 
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 
</script> 
<script type="text/javascript"> 
    layui.use(['upload', 'jqbind', 'jqform', 'jquery', 'jqfrm', 'table','jqajax'], function () { 
        var upload = layui.upload, 
            jqbind = layui.jqbind, 
            jqajax = layui.jqajax, 
            form = layui.jqform, 
            $ = layui.jquery, 
            frm = layui.jqfrm, 
            ctx = top.global.ctx, 
            table = layui.table; 
        form.init({ 
            "form": "#taskSearch" 
        }); 
        //方法级渲染 
        var tableIns = table.render({ 
            elem: '#LAY_table_task' 
            , url: ctx + '/sys/job/sysJobConfig/listAllJob' 
            , height: 'full-100' 
            , cols: [[ 
                 {field: 'jobName', title: '任务组名称', width: "15%", style: "text-align:center",align: 'center'} 
                , {field: 'name', title: '任务名称', width: "15%", style: "text-align:center", align: 'center'} 
                , { 
                    field: 'jobStatus', 
                    width: "5%", 
                    title: '状态', 
                    align: 'center', 
                    style: "text-align:center", 
                    templet:function(d){ 
                        if(d.jobStatus == 'NORMAL'){ 
                            return '启用'; 
                        }else{ 
                            return '禁用'; 
                        } 
                    } 
 
                } 
                , {field: 'cron', title: 'cron表达式', width: "15%", style: "text-align:center", align: 'center'} 
                , {field: 'classPath', title: '类路径及类名', width: "30%", style: "text-align:center", align: 'center'} 
                , {field: 'remark', title: '备注', width: "10%", style: "text-align:center", align: 'center'} 
                , {fixed: 'right', width: "10%", title: '操作', toolbar: '#barDemo', align: 'center'} 
            ]] 
            , id: 'taskTable' 
            , page: true 
            , done: function (res, curr, count) { 
                jqbind.init(); 
                tableIns.config.datas = table.cache['taskTable']; 
                top.global['taskTable'] = tableIns; 
            } 
        }); 
 
 
        //操作 
        table.on('tool(taskTable)', function(obj){ 
            if(obj.event === 'del'){ //删除 
                layer.confirm('确认删除吗?', function(index){ 
                    var ajax = new jqajax(); 
                    ajax.options.method = 'POST'; 
                    ajax.options.contentType="application/json;charset=UTF-8"; 
                    ajax.options.url = "/sys/job/sysJobConfig/deleteJob"; 
                    ajax.options.data = obj.data; 
                    ajax.ajax(ajax.options); 
                    ajax.complete = function (ret, options) { 
                        if (ret.httpCode == 200) { 
                            layer.msg("删除成功!"); 
                            layer.close(index);//关闭弹窗 
                            //刷新表格 tableId表格id 
                            layui.table.reload('taskTable',{page:{curr:1}}); 
                        }else { 
                            layer.msg("删除失败!"); 
                        } 
                    }; 
                }); 
            }else if(obj.event === 'onoff'){//启用、禁用 
                var ajax = new jqajax(); 
                ajax.options.method = 'POST'; 
                ajax.options.contentType="application/json;charset=UTF-8"; 
                ajax.options.url = "/sys/job/sysJobConfig/updateJob"; 
                ajax.options.data = obj.data; 
                ajax.ajax(ajax.options); 
                ajax.complete = function (ret, options) { 
                    if (ret.httpCode == 200) { 
                        layer.msg("修改成功!"); 
                        layer.close();//关闭弹窗 
                        //刷新表格 tableId表格id 
                        layui.table.reload('taskTable',{page:{curr:1}}); 
                    }else { 
                        layer.msg("修改失败!"); 
                    } 
                }; 
            } 
        }); 
    }); 
</script> 
</html>

发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

layer.confirm快速多次点击会重复触发事件问题详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。