zoukankan      html  css  js  c++  java
  • layui中弹出层的两种表达方式

    方式一:

      定义js中定义html变量

    方式二:

      设置div :hidden:hidden 布局

    数据表格自适应大小:

    代码:

    <style>
        .btn-container { margin-bottom: 10px; }
        .layui-table-cell .layui-form-checkbox[lay-skin=primary] { top: 5px; }
    </style>
    
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">xx记录</div>
            <div class="layui-card-body">
                <div class="btn-container layui-form">
                    <!-- 组别搜索 -->
                    <div class="btn-container">
                        <button class="layui-btn layui-btn-normal" onclick="add()">添加xx记录</button>
                    </div>
                    <table id="table" lay-filter="table" lay-data="{id: table}"></table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="layui-card-body" id="record-user" hidden="hidden">
        <div class="layui-form layui-form-pane" lay-filter = 'datafile'>
            <div class="layui-form-item">
                <label class="layui-form-label">xx账号</label>
                <div class="layui-input-inline">
                    <select name="xxxx" lay-verify="xxx">
                        <option value="">请选择xx账号</option>
                        {foreach $xxx as $key => $vo}
                        <option value="{$vo.id}">{$vo.xxxx}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
    
            <div class="layui-form-item" >
                <label class="layui-form-label">xx信息</label>
                <div class="layui-input-inline">
                    <input type="text" name="xxx" required placeholder="请输入xx信息" class="layui-input">
                </div>
           </div>
    
        </div>
    </div>
    
    
    <script>
        layui.use(['table', 'form'], function() {
            var table = layui.table;
            var form  = layui.form;
    
            var tableIns = table.render({
                elem: "#table",
                url: "{:url('xxx')}",
                page: true,
           //这是重点
           cellMinWidth:70, done:
    function(res) { }, cols: [[ // {type: 'checkbox', fixed: 'left'}, {field: 'id', title: 'ID', sort: true, align: 'center'}, {field: 'xx', title: 'xx', sort: true, align: 'center'}, {field: 'xx', title: 'xx', sort: true, align: 'center'}, {field: 'xx', title: 'xx', sort: true, align: 'center'}, {title: '操作', align: 'center', sort: true, templet: '#operation', fixed: 'right'} ]] }); // 监听工具栏 table.on('tool(table)', function(o) { var d = o.data, lEv = o.event, tr = o.tr if (parseInt('{$xx_power}') != 0) { layer.msg('您没有权限操作', { icon: 5, time: 1200 }); return false; } if (lEv == 'detail') pop(d); if (lEv == 'deleted') deleted(d); }) // 类型搜索 form.on('select(type)', function(data) { search(tableIns); }); $(document).on('click','#seach',function(){ nameseach(tableIns); }); }); // 添加 var add = function() { var title = 'xx记录添加' layer.open({ type:1, title: title, content: $('#record-user'), btn:['确定','取消'], area:['350px','35%'], yes:function(res){ // 判断输入框是否为空 if ($('[name=xxx]').val().length == 0) { layer.alert('不能存在空的输入框', { icon: 5 }); return ; } var d = { xx: $('[name=xx]').val(), xx: $('[name=xx]').val(), } var u = '{:url("xx")}' layer.load(2); $.post(u, d, function(res) { // 清除弹出层 layer.closeAll() if (res.code == 0) { layer.msg('添加成功', {icon: 6, time: 1500}, function() { window.location.reload() }) return ; } layer.msg('添加失败', {icon: 5, time: 1500}) }) } }); } // 修改 var pop = function(data) { var title ='xx编辑' var html = '<div class="layui-form">' html += '<div class="layui-form-item" >' html += '<label class="layui-form-label">xx账户</label>' html += '<div class="layui-input-block">' html += '<input type="text" name="xx" required placeholder="xxxxx" class="layui-input" disabled>' html += '</div>' html += '</div>' html += '<div class="layui-form-item">' html += '<label class="layui-form-label">xxx</label>' html += '<div class="layui-input-inline">' html += '<input type="text" name="xx" required placeholder="xxxx" class="layui-input">' html += '</div>' html += '</div>' html += '</div>' layer.open({ title: title, content: html, yes: function(res) { // 判断输入框是否为空 if ($('[name=xx]').val().length == 0) { layer.alert('不能存在空的输入框', { icon: 5 }); return ; } var d = { xxx: $('[name=xxx]').val(), } var u = '{:url("xxx")}' d.id = data.id layer.load(2); $.post(u, d, function(res) { // 清除弹出层 layer.closeAll() if (res.code == 0) { layer.msg('修改成功', {icon: 6, time: 1500}, function() { window.location.reload() }) return ; } layer.msg('修改失败', {icon: 5, time: 1500}) }) } }); // 设置数据 if (data != null) { $('[name=xxxx]').val(data.xxx) $('[name=xxx]').val(data.xxx) } } // 删除 var deleted = function(data) { layer.confirm('确认删除该数据?', function() { layer.closeAll() $.ajax({ url : "{:url('xxx')}", type : "POST", data : { 'xx' : data.xx, }, dataType : 'json' , success : function(res){ console.log(res); if(res.code == 0){ layer.msg("删除成功", {icon: 6}, function() { location.reload(); }); } else{ layer.msg("删除失败", {icon: 5}); } } }); }); } </script> <script type="text/html" id="operation"> <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleted">删除</a> </script>
  • 相关阅读:
    [笔记]如何屏蔽视频网站的片头广告——优酷
    [翻译]JWA(JEDI Windows API Headers)库的readmefirst.txt文件翻译
    [代码]Delphi实现获取文件及文件夹大小(支持超过2G的大文件)
    [笔记]TrueCrypt7.0a代码编译流程 (已更新 TrueCrypt 7.2代码在Win8.1 64位下编译流程)
    学习一种编程语言必须要做的15个练习题(转发-收藏!)
    LoadRunner函数中文翻译系列之一Action
    软件配置项 的理解
    性能测试:压力测试、负载测试、并发测试、强度测试及容量测试之间的区别
    EF中使用泛型
    ASP.NET MVC 3.0 在各个版本IIS中的部署
  • 原文地址:https://www.cnblogs.com/a-dong/p/10041352.html
Copyright © 2011-2022 走看看