fsLayui快速开始

2024年1月20日 159次阅读 来源: FallSea

fsLayui 是一个基于layui的快速开发插件，支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作。

GitHub下载

码云下载

测试环境地址：
http://fslayui.itcto.cn

通用配置

修改配置文件
plugins/frame/js/fsConfig.js

常量配置

项目中需要调用到的常量、变量修改，根据项目的实际情况来配置。

注意：这里一定要修改为自己项目的配置。

fsConfig["global"] = {
  "servletUrl":"https://fs.fallsea.com", //异步请求地址,本地工程可以不填
  "loginUrl" : "/login", //登录url
  "uploadUrl" : "https://fs.fallsea.com/upload", //上传附件url
  "uploadHtmlUrl" : "/plugins/frame/views/upload.html", //上传附件html地址，默认/plugins/frame/views/upload.html
  "loadDataType":"1",//加载数据类型，1：是，0：否，默认0  （编辑或查看是否取缓存数据）
  "result" : { //响应结果配置
    "statusName": "errorNo", //数据状态的字段名称，默认：errorNo
    "msgName": "errorInfo", //状态信息的字段名称，默认：errorInfo
    "dataName" : "results.data", //数据列表的字段名称，默认：results.data
  },
  "page" : { //分页配置
      "request": {//请求配置
      "pageName": "pageNum", //页码的参数名称，默认：pageNum
      "limitName": "pageSize" //每页数据量的参数名，默认：pageSize
    },
    "response": {//响应配置
      "countName": "results.data.total", //数据总数的字段名称，默认：results.data.total
      "dataName" : "results.data", //数据列表的字段名称，默认：results.data
      "dataNamePage": "results.data.list" //分页数据列表的字段名称，默认：results.data.list
    }//,
//  "limit":10,//每页分页数量。默认20
//  "limits":[10,20,30,50,100]//每页数据选择项，默认[10,20,30,50,100]
  }
};

表单验证配置

拓展form表单验证规则（自定义的表单验证规则）

fsConfig["verify"] = {
  /**
   * 对比两个值相等
   */
  "equals": function(value, item){ //value：表单的值、item：表单的DOM对象
    var equalsId = $(item).attr("equalsId");
    if(_.isEmpty(equalsId)){
      return '未配置对比id';
    }
    var value2 = $("#"+equalsId).val();

    if(!_.eq(value,value2))
    {
      var equalsMsg = $(item).attr("equalsMsg");
      if(_.isEmpty(equalsMsg))
      {
          equalsMsg = "值不相等";
      }
      return equalsMsg;
    }
  },
  /**
   * 用户名验证
   */
  "username": [
      /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){2,19}$/,
      '用户名格式不正确!'
  ],
  /**
   * 最小、最大长度判断
   */
  "length": function(value, item){ //value：表单的值、item：表单的DOM对象
    var minLength = $(item).attr("minLength");//最小长度
    var maxLength = $(item).attr("maxLength");//最大长度
    if(!_.isEmpty(minLength) && !_.eq('0',minLength) && _.gt(minLength,value.length)){
        return "输入内容小于最小值:"+minLength;
    }
    if(!_.isEmpty(maxLength) && !_.eq('0',maxLength) && _.gt(value.length,maxLength)){
        return "输入内容大于最小值:"+maxLength;
    }
  }
};

页面开发

页面开发只需要引入基础的js和css样式，配置form表单或table表格，通过配置快速实现一个增删改查功能。

列表页

列表页支持通过form表单传参查询table数据，刷新表格等功能。

表格详细配置请参考：
fsLayuiPlugin数据表格使用

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=UTF-8"/>
  <title>fsLayuiPlugin</title>
  <meta name="keywords" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" />
  <meta name="description" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv ="Pragma" content = "no-cache"/>
  <meta http-equiv="Cache-Control" content="no cache" />
  <meta http-equiv="Expires" content="0" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="format-detection" content="telephone=no"/>
  <link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" type="text/css" href="/css/fs.css" media="all"/>
  <script type="text/javascript" src="/plugins/layui/layui.js"></script>
  <script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.1"></script>
  <script type="text/javascript" src="/plugins/frame/js/fs.js?v=1.4.1"></script>
  <script type="text/javascript" src="/plugins/frame/js/frame.js?v=1.4.1"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <a href="/index.html"><div class="layui-logo">fsLayuiPlugin</div></a>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">案例</a>
          <dl class="layui-nav-child">
            <dd><a href="/index.html">首页</a></dd>
            <dd class="layui-this"><a href="/views/datagrid/index.html">数据表格</a></dd>
            <dd><a href="/views/treeDatagrid/index.html">树+表格</a></dd>
            <dd><a href="/views/multiDatagrid/index.html">多数据表格</a></dd>
            <dd><a href="/views/tabDatagrid/index.html">tab数据表格</a></dd>
            <dd><a href="/views/complexDatagrid/index.html">复杂数据表格</a></dd>
            <dd><a href="/views/linkageDatagrid/index.html">联动数据表格</a></dd>
            <dd><a href="/views/linkageDatagrid2/index.html">联动数据表格(复杂)</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space1">
        <div class="layui-col-md12">
          <div class="layui-form-query">
            <form class="layui-form" id="query_form">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-mid">id：</label>
                  <div class="layui-input-inline" style="width: 100px;">
                    <input type="tel" name="id" autocomplete="off" class="layui-input"/>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-mid">名称：</label>
                  <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="name" autocomplete="off" class="layui-input"/>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-mid">时间：</label>
                  <div class="layui-input-inline" style="">
                    <input type="text" name="createDate" autocomplete="off" class="layui-input fsDate" dateRange="1" placeholder=" - "/>
                  </div>
                </div>
                <div class="layui-inline">
                  <div class="layui-input-inline">
                    <button class="layui-btn" type="button" function="query"><i class="layui-icon">&#xe615;</i>查询</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="layui-col-md12">
         <div class="layui-row grid-demo">
           <div class="layui-col-md3">
             <button class="layui-btn" function="top" topUrl="add.html" topWidth="700px" topHeight="500px" topTitle="新增demo">
               <i class="layui-icon">&#xe654;</i>新增
             </button>
             <button class="layui-btn layui-btn-danger" function="submit" url="/fsbus/1002" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据？" inputs="id:">
               <i class="layui-icon">&#xe640;</i>删除
             </button>
             <button class="layui-btn" function="refresh">
               <i class="layui-icon">&#x1002;</i>刷新
             </button>
           </div>
           <div class="layui-col-md12">
             <table id="fsDatagrid" lay-filter="fsDatagrid" class="fsDatagrid" isLoad="1" url="/fsbus/1000" isPage="1" defaultForm="query_form" height="full-235"></table>

             <div class="fsDatagridCols">
                <p type="numbers" title="#"/>
                <p checkbox="true"/>
                <p field="id" title="ID" width="100" sort="true"/>
                <p field="name" title="名称" width="30%"sort="true" />
                <p field="city" title="城市" width="100" templet="#cityTpl"/>
                <p field="sex" title="性别" width="100" />
                <p field="state" title="状态" width="100" templet="#stateTpl"/>
                <p field="createdTime" title="创建时间" width="180"/>
                <p field="modifiedTime" title="修改时间" width="180"/>
                <p fixed="right" align="center" toolbar="#barDemo" title="操作" width="150"/>
              </div>

              <script type="text/html" id="cityTpl">
                {{# if(d.city == '0'){ }}
                  北京
                {{# } else if(d.city == '1'){ }}
                  上海
                {{# } else if(d.city == '2'){ }}
                  广州
                {{# } else if(d.city == '3'){ }}
                  深圳
                {{# } else if(d.city == '4'){ }}
                  杭州
                {{#  } }}
              </script>

              <script type="text/html" id="stateTpl">
                <input type="checkbox" name="state" lay-skin="switch" disabled lay-text="开启|关闭" {{ d.state == 1 ? 'checked' : '' }}>
              </script>
              <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="top" topUrl="edit.html" topWidth="700px" topHeight="500px" topTitle="编辑demo" inputs="id:">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="submit" url="/fsbus/1002" isConfirm="1" confirmMsg="是否确定删除当前记录？" inputs="id:">删除</a>
              </script>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    ©2017 www.fallsea.com
  </div>
</div>
</body>
</html>

菜单配置

菜单赋予强大的功能，通过简单的配置，快速达到需要的效果。

例如:

  • 弹出一个新的窗口
  • 关闭窗口
  • 查询talbe
  • 提交数据(确认提示按钮)
  • 选择table

等…，
菜单信息配置请参考：菜单配置说明

新增弹出窗口

  • function="top" 描述弹出窗口
  • topUrl="add.html" 指定打开
  • topWidth="700px" 弹出窗口宽度
  • topHeight="500px" 弹出窗口高度
  • topTitle="新增demo" 弹出窗口标题
<button class="layui-btn" function="top" topUrl="add.html" topWidth="700px" topHeight="500px" topTitle="新增demo">
  <i class="layui-icon">&#xe654;</i>新增
</button>

修改弹出窗口

  • function="top" 描述弹出窗口
  • topUrl="edit.html" 指定打开
  • topWidth="700px" 弹出窗口宽度
  • topHeight="500px" 弹出窗口高度
  • topTitle="编辑demo" 弹出窗口标题
  • isSelect="1" 必须单选
  • inputs="id:" 选中的参数信息
<button class="layui-btn" function="top" topUrl="edit.html" topWidth="700px" topHeight="450px" isSelect="1" topTitle="编辑功能号信息" inputs="id:">
  <i class="layui-icon">&#xe642;</i>编辑
</button>

删除数据

  • function="submit" 描述提交数据
  • url="/fsbus/1002" 提交的url地址
  • isSelect="1" 必须单选
  • isConfirm="1" 弹出确认提示
  • confirmMsg="是否确定删除选中的数据？" 自定义确认提升内容
  • inputs="id:" 提交的参数信息
<button class="layui-btn layui-btn-danger" function="submit" url="/fsbus/1002" isSelect="1" isConfirm="1" confirmMsg="是否确定删除选中的数据？" inputs="id:">
  <i class="layui-icon">&#xe640;</i>删除
</button>

刷新表格

  • function="refresh" 描述刷新表格
<button class="layui-btn" function="refresh">
  <i class="layui-icon">&#x1002;</i>刷新
</button>

新增页

新增页面可以直接配置一个url提交地址，自动把form表单数据提交到后台，提交成功后，自动关闭弹出的窗口，刷新table表格数据：
fsLayuiPlugin数据表格弹出form表单说明

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=UTF-8"/>
    <title>fsLayuiPlugin</title>
    <meta name="keywords" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" />
    <meta name="description" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv ="Pragma" content = "no-cache"/>
    <meta http-equiv="Cache-Control" content="no cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/fs.css" media="all"/>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.1"></script>
    <script type="text/javascript" src="/plugins/frame/js/fs.js?v=1.4.1"></script>
    <script type="text/javascript" src="/plugins/frame/js/frame.js?v=1.4.1"></script>
  </head>
  <body class="layui-layout-body">
    <div class="layui-fluid">
      <form class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required="" lay-verType="tips" 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-block">
            <input type="checkbox" name="type" title="写作" value="write">
            <input type="checkbox" name="type" title="阅读" value="read">
            <input type="checkbox" name="type" title="发呆" value="dai">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="男" checked="checked">
            <input type="radio" name="sex" value="女" title="女">
          </div>
          <label class="layui-form-label">状态</label>
          <div class="layui-input-inline">
            <input type="checkbox" name="state" lay-skin="switch" lay-text="开启|关闭" value="1" checked>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <select name="city" lay-verify="required"  lay-verType="tips" class="fsSelect" dict="city" addNull="1">
            </select>
          </div>
          <label class="layui-form-label">创建时间</label>
          <div class="layui-input-inline">
            <input type="text" name="createdTime" autocomplete="off" class="layui-input fsDate" dateType="datetime" />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">省份</label>
          <div class="layui-input-inline" style="width: 100px;">
            <select id="area2222222" name="area1" lay-filter="xxxxxx1" class="fsSelect" dict="area1" addNull="1" childrenSelectId="xxxxxx2">
            </select>
          </div>
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline" style="width: 100px;">
            <select id="xxxxxx2" name="area2" lay-filter="xxxxxx2" class="fsSelect" isLoad="0" dict="area2" addNull="1" childrenSelectId="xxxxxx3">
            </select>
          </div>
          <label class="layui-form-label">区</label>
          <div class="layui-input-inline" style="width: 100px;">
            <select id="xxxxxx3" name="area3" class="fsSelect" isLoad="0" dict="area3" addNull="1">
            </select>
          </div>
        </div>

        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">附件</label>
          <div class="layui-input-inline">
            <input type="text" id="filePath" name="filePath" autocomplete="off" disabled="disabled" class="layui-input"/>
          </div>
          <div class="layui-input-inline">
            <button type="button"  class="layui-btn" function="upload" fileElem="#filePath" fileAccept="file" fileExts="" fileSize="1024" inputs="type:test">上传图片</button>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">描述</label>
          <div class="layui-input-block">
            <textarea id="description" name="description" placeholder="请输入描述" class="fsLayedit" height="80"></textarea>
          </div>
        </div>
        <hr/>
        <div class="layui-form-item" style="text-align: center;">
          <button class="layui-btn" lay-submit="" lay-filter="save" url="/fsbus/1001">新增</button>
          <button type="button" class="layui-btn layui-btn-primary" function="close">关闭</button>
        </div>
      </form>
    </div>
  </body>
</html>

编辑页

编辑页面需要配置一个加载当个数据的地址，配置后自动一步查询数据和填充数据；

然后配置一个url提交地址，自动把form表单数据提交到后台，提交成功后，自动关闭弹出的窗口，刷新table表格数据：
fsLayuiPlugin数据表格弹出form表单说明

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=UTF-8"/>
    <title>fsLayuiPlugin</title>
    <meta name="keywords" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" />
    <meta name="description" content="fsLayuiPlugin,layui,layuiPlugin,layui插件" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv ="Pragma" content = "no-cache"/>
    <meta http-equiv="Cache-Control" content="no cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/fs.css" media="all"/>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.1"></script>
    <script type="text/javascript" src="/plugins/frame/js/fs.js?v=1.4.1"></script>
    <script type="text/javascript" src="/plugins/frame/js/frame.js?v=1.4.1"></script>
  </head>
  <body class="layui-layout-body">
    <div class="layui-fluid">
      <form class="layui-form" id="edit_form" isLoad="1" loadUrl="/fsbus/1003">
        <div class="layui-form-item">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required="" lay-verType="tips" 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-block">
            <input type="checkbox" name="type" title="写作" value="write">
            <input type="checkbox" name="type" title="阅读" value="read">
            <input type="checkbox" name="type" title="发呆" value="dai">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="男" checked="checked">
            <input type="radio" name="sex" value="女" title="女">
          </div>
          <label class="layui-form-label">状态</label>
          <div class="layui-input-inline">
            <input type="checkbox" name="state" lay-skin="switch" lay-text="开启|关闭" value="1" checked>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <select name="city" lay-verify="required"  lay-verType="tips" class="fsSelect" dict="city" addNull="1">
            </select>
          </div>
          <label class="layui-form-label">创建时间</label>
          <div class="layui-input-inline">
            <input type="text" name="createdTime" autocomplete="off" class="layui-input fsDate" dateType="datetime" />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">省份</label>
          <div class="layui-input-inline" style="width: 100px;">
            <select id="area2222222" name="area1" lay-filter="xxxxxx1" class="fsSelect" dict="area1" addNull="1" childrenSelectId="xxxxxx2">
            </select>
          </div>
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline" style="width: 100px;">
            <select id="xxxxxx2" name="area2" lay-filter="xxxxxx2" class="fsSelect" isLoad="0" dict="area2" addNull="1" childrenSelectId="xxxxxx3">
            </select>
          </div>
          <label class="layui-form-label">区</label>
          <div class="layui-input-inline" style="width: 100px;">
            <select id="xxxxxx3" name="area3" class="fsSelect" isLoad="0" dict="area3" addNull="1">
            </select>
          </div>
        </div>

        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">附件</label>
          <div class="layui-input-inline">
            <input type="text" id="filePath" name="filePath" autocomplete="off" disabled="disabled" class="layui-input"/>
          </div>
          <div class="layui-input-inline">
            <button type="button"  class="layui-btn" function="upload" fileElem="#filePath" fileAccept="file" fileExts="" fileSize="1024" inputs="type:test">上传图片</button>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">描述</label>
          <div class="layui-input-block">
            <textarea id="description" name="description" placeholder="请输入描述" class="fsLayedit" height="80"></textarea>
          </div>
        </div>
        <hr/>
        <div class="layui-form-item" style="text-align: center;">
          <button class="layui-btn" lay-submit="" lay-filter="edit" url="/fsbus/1004"><i class="layui-icon">&#xe642;</i>编辑</button>
          <button type="button" class="layui-btn layui-btn-primary" function="close">关闭</button>
        </div>
      </form>
    </div>
  </body>
</html>

本文首发于我的博客：
ITCTO技术博客

    原文作者：FallSea
    原文地址: https://segmentfault.com/a/1190000012396039
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞