精华内容
下载资源
问答
  • 表格可以动态新增行,删除当前行。 新增的每一行(tr)包含三列(td)每一格分别一个下拉框,每列下拉框相同。 选择某一行第一个下拉框值后,与当前行第二个下拉框联动,数据为动态(后台传输)。 点击提交按钮后...

    先上一段需求(可以对照下自己需求是否符合)

    1. 表格可以动态新增行,删除当前行。
    2. 新增的每一行(tr)包含三列(td)每一格分别一个下拉框,每列下拉框相同。
    3. 选择某一行第一个下拉框值后,与当前行第二个下拉框联动,数据为动态(后台传输)。
    4. 点击提交按钮后,将整个表格提交,每一行三个数据以逗号隔开,每一行数据以分号隔开。

    示例图

    说明:
    1.数据库名,这一列选项内容,每行值都相同。
    2.数据库名的选项会和模式联动(选第一个第二个联动)。
    3.点击新增会新增一行。
    4.点击删除会删除当前行。

    上一段代码(html)

    // layui表单结合layui手动表格
    <div id="tableBox" class="layui-table layui-form">
    	<table class="layui-table layui-form">
    	   <colgroup>
    	     <col width="100">
    	     <col width="100">
    	     <col width="100">
    	     <col width="100">
    	   </colgroup>
    	    <thead>
    	      <tr>
    	        <th>数据库名</th>
    	        <th>模式</th>
    	        <th>权限</th>
    	        <th>
    	        	<button type="button" style="padding:0px 12px" class="layui-btn layui-btn-sm" id="addTr">新增</button>
    	        </th>
    	      </tr>
    	    </thead>
        <tbody id="tableRow"></tbody>
      </table>
    </div>
    

    上一段代码(js部分)

    // 表格新增
              var clickCont = 0;
              $("#addTr").click(function () {
                // 定义空字符串
                var dataARR = '';
    
                // 设定一个初始值使其每次点击动态加1,且绑定的值也是动态的
                clickCont += 1;
    
                // td1值的值表格中td的第一个select     使第一个留出“请选择”的状态
                var td1 = `<option value=""></option>`;
                var td2 = '';
    
                //tdq1表示的是表格td拼出前半部分   lay-filter绑定为动态值(动态监听)
                var tdq1 = `<td><select name="sel" id="sel1" lay-filter="sel${clickCont}">`;
    
                //tdq2表示的是表格第二个td拼出前半部分   id绑定为动态值(动态append插入)
                var tdq2 = `<td><select name="sel" id="TwoSel${clickCont}">`;
                var tdh = '</select></td>';
    
                $.ajax({
                  url:...//根据实际情况来
                  type: 'get',
                  success: function (res) {  //**稍后会贴出返回数据及格式**
    
                    var op1 = '';
    
                    //向外暴露返回值
                    dataARR = res.data;
    
                    var sel1OptionList = res.data.database;
    
                    // 拼接sel1后续的option
                    $.each(sel1OptionList, function (ind, val) {
    
                      td1 += `<option value="${val.name}">${val.name}</option>`;
    
                    })
    
                  
                    // 拼接行
                    var part1 = tdq1 + td1 + tdh;
                    var part2 = tdq2 + td2 + tdh;
                    var part3 = '<td><select name="sel" id=""><option value="只读">只读</option><option value="读写">读写</option></select></td>';
                    var part4 = '<td><button type="button" style="padding:0px 12px"  class="layui-btn layui-btn-danger del" lay-event="del">删除</button></td>';
                    var line = '<tr>' + part1 + part2 + part3 + part4 + '</tr>';
    
                    $("#tableRow").append(line);
                    
                    // 表单渲染
                    form.render();
                    
                  }
                })
    
                var selEle = `sel${clickCont}`;
                var sel2 = `TwoSel${clickCont}`;
                // 监听第一个选项
                form.on('select(' + selEle + ')', function (data) {
                  
                  td2 = '';
                  // 选中值
                  var name = data.value;
    
                  var arr = dataARR[name];
    
                  $.each(arr, function (ind, val) {
                    
                    td2 += `<option value="${val}">${val}</option>`;
                    
                  })
    
                  $("#"+sel2).empty().append(td2);
                  form.render();
    
                  
                });
                
                form.render();
    
              })
    
    
    // 删除事件  
              $(document).on('click', '.del', function (e) {
                var _this = $(this);
                _this.parent().parent().remove();
              });
    
    
    // 打印所选的内容(每行值以逗号相隔,每条以分号相隔)
    	var arr = '';
    
        for (var i = 0; i < $('select[name="sel"] option:selected').length; i++) {
    
          if ((i + 1) % 3 === 0) {
    
            var thisVal = $('select[name="sel"] option:selected')[i].value;
            var result = thisVal.concat(";");
            arr += result
    
          } else {
    
            arr += $('select[name="sel"] option:selected')[i].value + ','
    
          }
        }
    
        console.log(arr)
    
    

    上文所提到的返回的数据及格式

    {
       "code": "200",
       "msg": "资源获取成功",
       "data": {
       	"database": [{
       		"name": "选项1"
       	}, {
       		"name": "选项2"
       	}, {
       		"name": "选项3"
       	}],
       	"选项3": ["选项3-1", "选项3-2"],
       	"选项2": ["选项2-1", "选项2-2", "选项2-3"],
       	"选项1": ["选项1-1", "选项1-2", "选项1-3"]
       }
    }
    

    最后声明

    1.上文所有代码为第一轮初始代码,未经优化及严格梳理,但是不影响结果及功能运行(各位大牛嘴下留情)。

    2.很高兴大家可以使用或者转载,请注明出处,感激不尽。

    3.上述代码有问题欢迎骚扰,虚心求教。

    展开全文
  • 1.select动态赋值 //将真正的value赋值给select。name为select标签后跟的name,value为想赋给select的值。 $(“select[name=example]”).val(“value”); &amp;amp;lt;!--select标签--&amp;amp;gt; &...
    • 1.select动态赋值

    将真正的value赋值给select。name为select标签后跟的name,value为想赋给select的值。
    $(“select[name=example]”).val(“value”);

    <!--select标签-->
    <div class="layui-form-item">
                    <label class="layui-form-label">角色类型</label>
                    <div class="layui-input-block">
                        <select name="roleType" lay-filter="aihao" id="roleType" lay-verify="required">
                            <option value="assignment">任务分配</option>
                            <option value="security-role">管理角色</option>
                            <option value="user">普通角色</option>
                        </select>
                    </div>
                </div>
    //select数根据数据库数据进行相应匹配默认
    $("select[name=roleType]").val(result.data.roleType);<!--result.data.roleType为真实值-->
    • 2.input动态赋值

    $(“#id”).val(“value”); //value赋值给所指id

    <!-- input标签 -->
    <div class="layui-form-item">
                    <label class="layui-form-label">英文名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="enname" id="enname" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|enname"><span><font color="red">*</font> 工作流用户组标识</span>
    
                    </div>
                </div>
    
    <!-- 赋值 -->
    $("#enname").val(result.data.enname);
    • 3.完整form表单校验,提交,修改
    <!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>角色修改</title>
    
            <style type="text/css">
                .help-inline {
                    display: inline-block;
                    padding-left: 10px;
                    vertical-align: middle;
                }
            </style>
        </head>
    
        <body>
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li>
                        <a href="http://localhost:8080/pro/start/#/sys/role/list">角色列表</a>
                    </li>
                    <li class="active">
                        <a href="http://localhost:8080/pro/start/#/sys/role/form">角色添加</a>
                    </li>
                </ul>
            </div>
            <form class="layui-form" lay-filter="example">
                <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
                <input type="text" name="id" placeholder="请输入" autocomplete="off" hidden id="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">归属机构</label>
                    <div class="layui-input-block">
                        <input type="text" name="office.id" id="office_id" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|name">
                        <input type="text" name="oldName" id="oldName" placeholder="请输入" autocomplete="off" hidden>
                        <font color="red">*</font>
                    </div>
    
                </div>
    
                <div class="layui-form-item">
                    <label class="layui-form-label">英文名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="enname" id="enname" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="required|enname"><span><font color="red">*</font> 工作流用户组标识</span>
                        <input type="text" name="oldEnname" id="oldEnname" placeholder="请输入" autocomplete="off" hidden>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色类型</label>
                    <div class="layui-input-block">
                        <select name="roleType" lay-filter="aihao" id="roleType" lay-verify="required">
                            <option value="assignment">任务分配</option>
                            <option value="security-role">管理角色</option>
                            <option value="user">普通角色</option>
                        </select>
                    </div>
                </div>
    
                <div class="layui-form-item">
                    <label class="layui-form-label">是否系统数据</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked">
                        <span class="help-inline">“是”代表此数据只有超级管理员能进行修改,“否”则表示拥有角色修改人员的权限都能进行修改</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否可用</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-skin="switch" name="useable" id="useable" checked="checked" lay-filter="useable">
                        <span class="help-inline">“是”代表此数据可用,“否”则表示此数据不可用</span>
                    </div>
                </div>
    
                <div class="layui-form-item">
                    <label class="layui-form-label">数据范围</label>
                    <div class="layui-input-block">
                        <select name="dataScope" lay-filter="aihao" id="dataScope">
                            <option value="1">本人</option>
                            <option value="2">全部</option>
                        </select>
                        <span class="help-inline">特殊情况下,设置为“按明细设置”,可进行跨机构授权</span>
                    </div>
                </div>
    
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" class="layui-textarea" id="remarks"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
            </form>
            <script>
                layui.use(['form', 'jquery', 'upload'], function() {
                    $ = layui.$;
                    var form = layui.form;
                    //获取Location对象的search属性值
                    var url = window.location.href;
                    //通过判断url链接是否有参数,从而判断是否是进入修改页面,需要加载初始数据
                    if(url.indexOf("?") != -1) { //判断是否有参数
                        $(function() {
                            url = url.split("?");
                            var tmpId = url[1].substr(1);
                            tmpId = tmpId.split("=");
                            $.ajax({
                                type: 'get',
                                url: 'http://192.168.25.38:8080/jeesite/f/sys/role/get',
                                dataType: "json",
                                data: {
                                    "id": tmpId[1]
                                },
                                success: function(result) {
                                    $("#office_id").val(result.data.officeIds);
                                    $("#name").val(result.data.name);
                                    $("#enname").val(result.data.enname);
                                    $("#remarks").val(result.data.remarks);
                                    $("#oldName").val(result.data.name);
                                    $("#oldEnname").val(result.data.enname);
                                    //select数根据数据库数据进行相应匹配默认
                                    $("select[name=roleType]").val(result.data.roleType);
                                    $("select[name=dataScope]").val(result.data.dataScope);
                                    //开关状态根据数据库数据进行相应的匹配默认
                                    var switchon2 = "";
                                    if(result.data.sysData == "1") {
                                        switchon2 = "checked";
                                    }
                                    if($("#sysData").attr("checked") != switchon2) {
                                        $("#sysData").removeAttr('checked');
                                    }
                                    var switchon1 = "";
                                    //如果数据可用的话,修改标记为checked
                                    if(result.data.useable == "1") {
                                        switchon1 = "checked";
                                    }
                                    //如果与不是默认属性checked,则移除属性checked
                                    if($("#useable").attr("checked") != switchon1) {
                                        $("#useable").removeAttr('checked');
                                    }
                                    //元素更新必须使用,否则没有效果
                                    form.render();
                                },
                                error: function(error) {
                                    alert(error);
                                }
    
                            });
                        });
    
                    }
                    //表单校验
                    form.verify({
                        name: function(value) {
                            var oldName = $("#oldName").val(); //获取旧名称值
                            var msg = "";
                            $.ajax({
                                type: "get",
                                url: 'http://192.168.25.38:8080/jeesite/f/sys/role/checkName',
                                async:false,//同步提交。不设置则默认异步,异步的话,最后执行ajax
                                data: {
                                    name: value,
                                    oldName: oldName
                                },
                                success: function(result) {
                                    msg = result;
                                },
                                error: function(error) {
                                    alert(error.status);
                                }
                            });
    
                            if(msg == "false") {
                                return "角色名已存在";
                            }
                        },
                        enname: function(value) {
                            var oldEnname = $("#oldEnname").val(); //获取旧名称值
                            var msg = "";
                            $.ajax({
                                type: "get",
                                url: 'http://192.168.25.38:8080/jeesite/f/sys/role/checkEnname',
                                async:false,//同步提交。不设置则默认异步,异步的话,最后执行ajax
                                data: {
                                    enname: value,
                                    oldEnname: oldEnname
                                },
                                success: function(result) {
                                    msg = result;   
                                },
                                error: function(error) {
                                    alert(error.status);
                                }
                            });
    
                            if(msg == "false") {
                                return "英文名已存在";
                            }
    
                        }
                    });
                    //监听提交
                    form.on('submit(*)', function(data) { //submit(*)中的 * 号为事件过滤器的值,是在绑定执行提交的元素时设定的,eg:lay-filter="*"
    
                        //修改开关的值on或""
                        if(data.field.sysData == "on") {
                            data.field.sysData = "1";
                        } else {
                            data.field.sysData = "0";
                        }
                        if(data.field.useable == "on") {
                            data.field.useable = "1";
                        } else {
                            data.field.useable = "0";
                        }
    
                        $.ajax({
                            type: "get",
                            url: 'http://192.168.25.38:8080/jeesite/f/sys/role/save',
                            data: data.field,
                            success: function(result) {
                                if(result == "success") {
                                    layer.msg("保存成功", {
                                        icon: 5
                                    });
                                } else {
                                    layer.msg("保存失败", {
                                        icon: 6
                                    });
                                }
                            },
                            error: function(error) {
                                layer.msg("保存失败", {
                                    icon: 6
                                });
                            }
                        });
                        return false;
                    });
    
                });
            </script>
        </body>
    展开全文
  • LayUI

    2020-08-22 09:19:36
    文章目录一、引言1.1 介绍二、环境搭建2.1 下载2.2 导入依赖三、页面元素3.1 布局3.2 字体图标3.3 按钮3.4 表单3.5 数据表格3.5.1 动态表格3.5.2 分页参数3.5.3 显示工具栏3.5.4 操作按钮3.5.5 操作按钮回调3.6 导航...

    在这里插入图片描述

    Author:Shine

    Version:9.0.1

    一、引言


    1.1 介绍

    官网:https://www.layui.com/

    在官网首页,可以很方便的下载LayUI

    LayUI 是一款经典模块化前端 UI 框架,我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

    使得前端页面的制作变得更加简单。

    二、环境搭建


    2.1 下载

    在官网即可完成下载

    下载LayUI

    在这里插入图片描述

    2.2 导入依赖

    下载的LayUI解压后,将其中的layui目录导入项目中

    解压后的 layui目录

    在这里插入图片描述

    | 将layui目录放到项目的webapp目录下 |
    在这里插入图片描述

    | 在JSP中导入layui依赖 |
    在这里插入图片描述

    三、页面元素


    3.1 布局

    响应式栅格布局,每行分 12 等分

    <!-- layui-container居中显示有固定尺寸;layui-fluid占满行宽 -->
    <!--<div class="layui-container">-->
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md9 layui-col-lg6 layui-bg-orange">
                你的内容 9/12
            </div>
            <div class="layui-col-md3 layui-col-lg6 layui-bg-gray">
                你的内容 3/12
            </div>
        </div>
    
        <%--移动设备、平板、桌面端的不同表现:--%>
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
                移动:6/12 | 平板:6/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 layui-col-lg3">
                移动:6/12 | 平板:6/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-col-lg3">
                移动:4/12 | 平板:12/12 | 桌面:4/12;
            </div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md8 layui-col-lg3">
                移动:4/12 | 平板:7/12 | 桌面:8/12;
            </div>
            <div class="layui-col-xs4 layui-col-sm5 layui-col-md4 layui-col-lg3">
                移动:4/12 | 平板:5/12 | 桌面:4/12;
            </div>
        </div>
    </div>
    

    3.2 字体图标

    class=“layui-icon 具体的图标样式”

    <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
    <i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #1E9FFF;"></i>
    

    3.3 按钮

    class=“layui-btn 主题 样式”

    <button type="button" class="layui-btn">标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">可跳转的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary">主题的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm">主题的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-radius ">圆角的按钮</a>
    <a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm  layui-btn-radius ">
        <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
        带图标的按钮
    </a>
    

    3.4 表单

    • class=“layui-form”
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value="">请选择城市</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="写作">
          <input type="checkbox" name="like[read]" title="阅读" checked>
          <input type="checkbox" name="like[dai]" title="发呆">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
          <input type="checkbox" name="switch" lay-skin="switch">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="" title="">
          <input type="radio" name="sex" value="" title="" checked>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
          <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-lg" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
      </div>
    </form>
    <script>
    // 必须要导入form模块,才能保证表单正常渲染
    layui.use('form', function(){
      var form = layui.form;
      //监听提交
      form.on('submit(formDemo)', function(data){// data就是表单中的所有数据
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
    </script>
    

    3.5 数据表格

    3.5.1 动态表格

    动态表格

    <table id="demo" lay-filter="test"></table>
    <script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use('table', function(){
      var table = layui.table;
      // 为表格填充数据
      table.render({
        elem: '#demo'
        ,height: 312
        ,url: '${pageContext.request.contextPath}/data' //获取数据
        ,page: true //开启分页
        ,cols: [[ //表头
           {field:'id', width:80, title: 'ID', sort: true}
            ,{field:'username', width:80, title: '用户名'}
            ,{field:'sex', width:80, title: '性别', sort: true}
            ,{field:'city',  title: '城市'} //没定义宽度则占满剩余所有宽度,都不定义则所有列均分
            ,{field:'score',width:80, title: '评分', sort: true}
        ]]
      });
      
    });
    </script>
    

    数据格式如下:

    • code:0 代表查询成功,为1时,会显示msg中的内容
    • count是为分页准备的,共有多少条数据
    数据格式如下:
    {"msg":"no data",
     "code":0,
     "data":[{"id":1,"username":"shine1","sex":"男","city":"保定","score":100},
             {"id":2,"username":"shine2","sex":"女","city":"石家庄","score":100},
             {"id":3,"username":"shine3","sex":"男","city":"邢台","score":100}],
     "count":100}
    
    
    3.5.2 分页参数

    分页条细节定制

    <script>
        layui.use("table",function(){
            var table = layui.table;
            table.render({
                elem: '#demo',
                url:'${pageContext.request.contextPath}/data,
                cols:[[...]],
                page:{limit:1//每页显示1条( 向后台传值,每页显示条数 )
                    ,limits:[1,2,3] //可选每页条数
                    ,first: '首页' //首页显示文字,默认显示页号
                    ,last: '尾页'
                    ,prev: '<em>←</em>' //上一页显示内容,默认显示 > <
                    ,next: '<i class="layui-icon layui-icon-next"></i>'
                    ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
                },
           });
        });
    </script>
    
    3.5.3 显示工具栏

    右上角工具按钮 toolbar:true

    <script>
        layui.use("table",function(){
            var table = layui.table;
            table.render({
                elem: '#demo',
                toolbar:true,
                url:'${pageContext.request.contextPath}/data,
                cols:[[...]],
                page:{...},
           });
        });
    </script>
    
    3.5.4 操作按钮

    为每行增加操作按钮

    <script>
        layui.use(["table","laytpl"],function(){
            var table = layui.table;
            table.render({
                elem: '#demo',
                url:'${pageContext.request.contextPath}/data,
                cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'username', title: '用户名', width:80}
                    ,{field: 'sex', title: '性别', width:80, sort: true}
                    ,{field: 'city', title: '城市'}
                    ,{field: 'score', title: '评分', width: 80, sort: true}
                    ,{field:"right",title:"操作",toolbar: '#barDemo'}
                ]],
                ...
            });
    	});
    </script>
    <!-- 如下script可以定义在页面的任何位置 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    3.5.5 操作按钮回调

    按钮的单击事件

    <table id="demo" lay-filter="test"></table>
    <script>
        layui.use("table",function(){
            table = layui.table;
            table.rander({...});
            //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            table.on('tool(test)', function(obj){
                var data = obj.data; //获得当前行数据
                //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                var layEvent = obj.event;
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        // 向服务端发送删除请求
                        // 此处可以发送ajax
                        obj.del(); //删除对应行(tr)的DOM结构
                        layer.close(index);
                    });
                } else if(layEvent === 'edit'){ //编辑
                    // 向服务端发送更新请求
                    // 同步更新缓存对应的值
                    obj.update({
                        username: 'shine001',
                        city: '北京',
                        sex:'女',
                        score:99});
                }
            });
        });
    </script>
    

    3.6 导航

    导航条

    • class=“layui-nav” 水平导航条
    • class=“layui-nav layui-nav-tree” 垂直导航条
    <ul class="layui-nav layui-nav-tree" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){});
    </script>
    

    3.7 动画

    LayUI提供了动画支持

    样式类 描述
    layui-anim-up 从最底部往上滑入
    layui-anim-upbit 微微往上滑入
    layui-anim-scale 平滑放大
    layui-anim-scaleSpring 弹簧式放大
    layui-anim-fadein 渐现
    layui-anim-fadeout 渐隐
    layui-anim-rotate 360度旋转
    追加:layui-anim-loop 循环动画
    <!-- 整个div会在页面显示时,以特定动画显示出来 -->
    <div class="layui-anim layui-anim-up" style="height: 100px">aa</div>
    <!-- 额外添加样式类:layui-anim-loop 使得动画循环运行 -->
    <div class="layui-anim layui-anim-rotate layui-anim-loop" 
         style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">bb</div>
    

    四、内置模块

    4.1 layer

    4.1.1 弹窗方法

    弹窗 msg()、alert()、confirm()

    <script>
        // 导入 layer模块
        layui.use(["layer"],function(){
            var layer = layui.layer;
            layer.msg("hello world!!");
            layer.msg("确定吗?",{btn:["确定!","放弃!"],
                				yes:function(i){layer.close(i);layer.msg("yes!!!")},
                				btn2:function(i){layer.close(i);layer.msg("no!!!")}}
            );
        });
    </script>
    
    <script>
    // 导入 layer模块  
    layui.use(["layer"],function(){
        var layer = layui.layer;
        //0-6 7种图标  0:warning  1:success  2:error  3:question  4:lock  5:哭脸  6:笑脸
        layer.alert("alert弹框蓝",
                   {title:'alert',icon:6 }, 
                   function(){//点击“确定”按钮时的回调
                   		layer.msg("好滴");
        			}
    	);
    });
    </script>
    
    <script>
    // 导入 layer模块  
    layui.use(["layer"],function(){
        var layer = layui.layer;
    	layer.confirm("hello world~",
                {shade:false,icon:3,btn:["好滴","不行"]},
                function(){layer.msg("好滴!");},
                function(){layer.msg("不行!")}
       	);
    });
    </script>
    
    4.1.2 弹窗属性
    • type 弹窗类型,可选值 0-4
    • title 弹窗标题,可选值 text/array
    • content 弹窗内容,可选值 text/html/dom
    <script>
        layui.use(["layer"],function(){
            layer = layui.layer;
            layer.open({
                type:1,// 消息框,没有确定按钮
                title:["hello","padding-left:5px"], // 标题,及标题样式
                content:layui.$("#testmain"), // dom格式
                offset:'rb',//可以在右下角显示
                shade:false //是否遮罩
            });
            layer.open({
                type:2,// iframe加载,需要一个url
                content:"${pageContext.request.contextPath}/xx"
            });
        });
    </script>
    <div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
    	hello world!
    </div>
    

    4.2 layDate

    日期框

    <form class="layui-form layui-form-pane" action="" method="post">
        <!-- layui-form-item 一个输入项-->
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <!-- layui-input-block 输入框会占满除文字外的整行 -->
            <div class="layui-input-block">
                <input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
    <script>
        layui.use(["laydate","form"],function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#birth', //指定元素
                format:'yyyy/MM/dd',
                value:'2012/12/12' //默认值
                // value:new Date() //默认值
            });
        });
    </script>
    

    4.3 upload

    上传按钮

    <form class="layui-form layui-form-pane" action="" method="post">
        <!-- layui-form-item 一个输入项-->
        <div class="layui-form-item">
            <label class="layui-form-label">username</label>
            <!-- layui-input-block 输入框会占满除文字外的整行 -->
            <div class="layui-input-block">
                <input id="birth" type="text" name="username" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['upload','layer'], function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '/data.jsp' //上传接口
                ,accept:'file' // file代表所有文件,默认是images代表图片
                ,size:100 // 文件最大100kb
                ,done: function(res){
                    //上传完毕回调
                    layui.layer.msg("ok");
                }
                ,error: function(){
                    //请求异常回调
                    layui.layer.msg("error");
                }
            });
        });
    </script>
    

    4.4 carousel

    轮播图

    <div class="layui-carousel" id="test1">
        <div carousel-item style="text-align: center;line-height: 280px">
            <div>条目1</div>
            <div>条目2</div>
            <div>条目3</div>
            <div>条目4</div>
            <div>条目5</div>
        </div>
    </div>
    <script>
        layui.use(['carousel'], function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
            });
        });
    </script>
    
    ```

    4.4 carousel

    轮播图

    <div class="layui-carousel" id="test1">
        <div carousel-item style="text-align: center;line-height: 280px">
            <div>条目1</div>
            <div>条目2</div>
            <div>条目3</div>
            <div>条目4</div>
            <div>条目5</div>
        </div>
    </div>
    <script>
        layui.use(['carousel'], function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
            });
        });
    </script>
    
    展开全文
  • 在内置模块中主要是学习如何引用模块,对标签的行为操作一、更新渲染因为在LayUI中下拉列表、单选框、复选框都不是通过原生态的表单标签来实现的,而是自己书写标签和样式来实现,所以想动态的添加这些元素,添加后...

    表单风格分两种:

    1. 默认风格:什么都不需要设置
    2. 方框风格:在form元素添加class=“layui-form-pane”;

    在js中对元素界面操作主要是学习给标签添加样式,在内置模块中主要是学习如何引用模块,对标签的行为操作

    一、更新渲染

    因为在LayUI中下拉列表、单选框、复选框都不是通过原生态的表单标签来实现的,而是自己书写标签和样式来实现,所以想动态的添加这些元素,添加后需要渲染!!!

    语法:form.render({"select|checkbox|radio"});

    ​ 如果设置了参数,就是指点渲染下拉列表,单选框,复选框中的某一个

    ​ 如果,没有设置参数,就默认渲染整个表单元素

    ​ 动态的给下拉列表下拉列表,单选框,复选框添加标签的实现步骤:

    ​ a)给原生的表单添加元素节点(普通的jQuery语法,或者DOM语法添加元素)

    ​ b)渲染表单

    二、事件监听

    LayUI的form表单事件监听语法:

    ​ form,on('select(事件过滤器)',function(data){

    ​ console.log(datd);

    })

    可提供的事件监听类型

    select 下拉列表

    checkbox 复选框勾选

    switch 复选框开关

    radio 单选框

    submit 表单提交

    注意:1.为下拉列表添加监听时不使用原生的change事件,因为原生的change事件被隐藏了

    ​ 2.事件过滤器放在需要监听的事件上,而不是父类上,就是放在select、checkbox、switch、radio、submit这几个标签上

    ​ 3.单选框,复选框没有添加value值,默认就是on

    ​ 4.提交submit提交监听

    ​ 有以下注意点:

    ​ a)开关按钮,只有选中的时候才会收集结果,如果没有选中则忽略不收集。 ​ b)复选框和可以多选下拉列表,如果复选框的name属性值相同,那么只能获取一个选中的复选框。

    解决代码如下:

    //使用each将选中的复选框进行提取
    $.each($("#checkbox > input:checked"),function (index,element) {
      console.log($(element).attr("name")+":"+$(element).val())
    });
    

    三、表单初始赋值

    form.val('lay-filter的值', object);

    lay-filter的值:事件过滤器的值

    object:要填充的对象,通常是以键值对的形式,例如:

    /**
     *  为form表单初始赋值
     */
    var obj = {
        //元素的name属性值:元素的value属性值
        username : "admin123",
        password : "123456",
        like : ["1","2"],
        isOpen : false,
        sex : "女",
        interest : "2"
    };
    // 给表单初始赋值,但是无法实现对复选框赋值
    form.val("from-test", obj);
    

    在给表单初始化赋值,但是无法实现对复选框赋值,所以要对复选框单独赋值,赋值方法如下:

    步骤:1.先在form.val()方法中给复选框赋值

    ​ 2.再用以下方法进行匹配,将选中的复选框设为true

    $.each($("#checkbox > input"), function (index, element) {
        // 假设element应该不会被选中
        var flag = false;
        $.each(obj.like, function (index, value) {
            // 判断element的value值是否和所赋的value匹配
            if($(element).val() === value) {
                // 推荐假设,应该被选中
                flag = true;
            }
        });
        // 设置复选框的选中状态
        $(element).prop("checked", flag);
        // 渲染复选框
        form.render("checkbox");
    });
    
    展开全文
  • 项目上遇到问题,我的页面没有用form表单展示数据,而是自己用js动态生成的页面,当没有查到数据时,总是弹出下面的提示框,这很容易让人误解是系统出错了,于是我想办法去掉它,找了好一会,它默认提示是操作失败,...
  • 说起下拉框大家一定不陌生,就是放着指定内容的容器需要什么就直接选择就可以了,很方便...但layui的form表单组件不仅要引用插件还需要加载相应的模块,少了这两步操作,select、checkbox、radio等将无法显示,并且无法
  • 表格操作 - layui ${pageContext.request.contextPath}/layui/src/css/layui.css"> body{padding: 20px; /*overflow-y: scroll;*/} <table id="userTable" lay-filter="test"></table> ...
  • LayUI 笔记

    2020-08-20 18:00:50
    文章目录一、引言1.1 介绍二、环境搭建2.1 下载2.2 导入依赖三、页面元素3.1 布局3.2 字体图标3.3 按钮3.4 表单3.5 数据表格3.5.1 动态表格3.5.2 分页参数3.5.3 显示工具栏3.5.4 操作按钮3.5.5 操作按钮回调3.6 导航...
  • 在内置模块中主要是学习如何引用模块,对标签的行为操作一、更新渲染因为在LayUI中下拉列表、单选框、复选框都不是通过原生态的表单标签来实现的,而是自己书写标签和样式来实现,所以想动态的添加这些元素,添加后...
  • LayUI快速入门

    2020-09-17 21:06:02
    文章目录一、引言1.1 介绍二、环境搭建2.1 下载三、页面元素3.1 布局3.2 字体图标3.3 按钮3.4 表单3.5 数据表格3.5.1 动态表格3.5.2 分页参数3.5.3 显示工具栏3.5.4 操作按钮3.5.5 操作按钮回调3.6 导航3.7 动画四、...
  • 青锋系统采用技术: springboot 、 layui前端框架 mysql数据库 druid数据连接池 多数据源处理 quartz动态定时器 freemarker模板 Shiro权限管理 redis数据持久化等技术。青锋系统低代码模块1、代码生成器(生成单表、...
  • Layui 从0到一

    2020-10-28 20:50:14
    文章目录一、引言1.1 介绍二、环境搭建2.1 下载2.2 导入依赖三、页面元素3.1 布局3.2 字体图标3.3 按钮3.4 表单3.5 数据表格3.5.1 动态表格3.5.2 分页参数3.5.3 显示工具栏3.5.4 操作按钮3.5.5 操作按钮回调3.6 导航...
  • 表单下拉框动态获取数据

    千次阅读 2018-09-22 22:37:30
    1.在进行表单操作时,下拉框选项需要动态读取数据库数据,使用ajax异步获取数据。 &lt;form class="layui-form layui-form-pane" method="post" id="websiteform"&gt; &...
  • 在单元格中插入自定义元素, 并通过操作自定义元素更新表格内容, (通过template在table中插入3个radio, 通过选择不同按钮修改表单值) 在单元格编辑事件监听中修改单元格值(需要同时修改table.cache中的值和动态input...
  • 青锋系统采用技术: springboot 、 layui前端框架 mysql数据库 druid数据连接池 多数据源处理 quartz动态定时器 freemarker模板 Shiro权限管理 redis数据持久化等技术。青锋系统低代码模块1、代码生成器(生成单表、...
  • 有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行form.render(type, filter);...
  • Activiti5.22+动态表单实现零java代码即可做到复杂业务的流程实施,同时包含文件在线操作、日志、考勤、CRM、项目、拖拽式生成问卷、日程、笔记、计划、行政等多种复杂业务功能。同时,可进行授权二开。 代码是没...
  • 动态表单增删行用到了事件委托(也叫事件代理)与选择父类的方法 jQuery parents() 方法 菜鸟是这样说的 简单描述一下 定义一个amount初始化为1(最少保留一行嘛),跟下面的if相对应 delegate 翻译v. 授(权),把...
  • 编辑导语:穿梭框在网页端表单等处用到的较多,那么如何用中继器做一个简单的穿梭框呢?本文作者为我们做出了详细的解答。穿梭框的布局是两个区域:候选区和已选区,在候选区选中后单击右向箭头按钮,候选区中该元素...
  • 操作 {{# layui.each(d.list, function(index, item){ }} <td><input type="checkbox" lay-skin="primary...
  • cd 创建与删除

    2019-08-22 22:46:43
    1 curd ...1 显示页面(layui 各个表单元素去显示) 1 有些表单元素我是需要 动态读取的(使用ajax 读取 渲染进来) 2 动态属性 dom操作 2 选信息 填信息 1 做一次验证: 2 在验证通过以后,提交给我...
  • 表单 ○ 导航 ○ 选项卡 ○ 进度条 ○ 面板 ○ 徽章 ○ 时间线 ○ 动画 ○ 辅助 ○ 通用弹出层 ○ 上传 ○ 时间日期 ○ 数据表格 ○ 分页 ○ 滑块 ○ 评分 ○ 轮播 ○ 流加载 ○ 工具 ○ ...
  • 表单 ○ 导航 ○ 选项卡 ○ 进度条 ○ 面板 ○ 徽章 ○ 时间线 ○ 动画 ○ 辅助 ○ 通用弹出层 ○ 上传 ○ 时间日期 ○ 数据表格 ○ 分页 ○ 滑块 ○ 评分 ○ 轮播 ○ 流加载 ○ 工具 ○ ...
  • kvf-admin kvf-admin是一套快速开发框架、脚手架、后台管理系统、权限系统,上手简单,拿来即用。为广大开发者去除大部分重复...如需关注项目最新动态,请Watch、Star项目,同时也是对项目最好的支持 交流群:214768328

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

layui动态操作表单