fsLayuiIs a fast development plug-in based on Layui, support data table add, delete, modify and check operation, provide common components, through the configuration of HTML data request, reduce front-end JS repeated development work.

Making the download
Download code cloud

Test environment address:

Why use fsLayui?

Traditional development generally needs to implement the function of adding, deleting, modifying and checking, each function needs to correspond to an HTML page and JS binding operation.

Each operation needs to bind the event operation, so each page needs javascript code to achieve, for the general business is not particularly strong background system, each page display is basically the same, but the REQUEST URL address is not consistent.

The new demo

<form class="layui-form" action="" "> <div class="layui-form-item"> <label class="layui-form-label"> Input box </label> <div Class ="layui-input-block"> <input type="text" name="title" required lay-verify=" Required "placeholder=" Placeholder" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label Class ="layui-form-label"> Password box </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 </div> <div class="layui-form-item"> <label class="layui-form-label"> Select box </label> <div class="layui-input-block"> <select name="city" lay-verify="required"> <option value=""></option> <option Value ="0"> Beijing </option> <option value="1"> Shanghai </option> <option value="2"> Guangzhou </option> <option value="3"> Shenzhen </option> <option Value ="4"> </option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> Check box </label> <div class="layui-input-block"> <div type="checkbox" name="like[write]" title=" write "> Name ="like[read]" title=" checked "> <input type="checkbox" name="like[dai]" title=" blank "> </div> </div> <div Class ="layui-form-item"> <label class="layui-form-label"> Switch </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"> <div class="layui-input-block"> <input type="radio" name="sex" value=" male "title=" male "> <input type="radio" name="sex" value=" woman "title=" woman" checked> </div> <div class="layui-form-item layui-form-text"> <div class="layui-form-label"> <div class="layui-input-block"> <textarea name="desc" placeholder=" placeholder "> class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button Class ="layui-btn" lay-submit lay-filter="formDemo"> </button> <button type="reset" class="layui-btn Layui BTN - primary reset "> < / button > < / div > < / div > < / form >
layui.use('form', function(){ var form = layui.form; Form. On ('submit(formDemo)', function(data){layer.msg(json.ify (data.field)); return false; }); });

The problem that fsLayui solves?

With the introduction of
fsLayuiJs file, rapid development datagrid add, delete, modify and check operations.

Support functions

  • Add, delete, and check simple data tables
  • Tree + data table (tree based on ztree implementation, click on the left tree, refresh the right table data)
  • Multi-data table (multiple data table operations on the same page)
  • TAB Table (Tab-toggle table)
  • Add, delete, and check complex forms
  • Add, delete, modify and check the linkage form
  • Linkage drop-down box (cascading of provinces, regions, etc.)
  • Data table escape (for example: a table field needs to fill in the code with Chinese name)
  • File upload function
  • Layedit editor
  • Data dictionary functionality

The new demo

<! DOCTYPE html> <html> <head> <meta content="text/html; Charset = utf-8 "/ > < title > fsLayuiPlugin < / title > < meta name =" keywords "content =" fsLayuiPlugin, layui, layuiPlugin, layui plug-in "/ > < meta name = "description" content = "fsLayuiPlugin layui, layuiPlugin, layui plug-in" / > < meta HTTP - equiv = "X-ray 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. The js? V =1.4.1"></script> </head> <body class=" layui-layoute-body ">< div class="layui-fluid"> <form class="layui-form" <div <div class="layui-input-block"> <input type="text" </label> <div class="layui-input-block"> Name ="name" required="" lay-verType="tips" lay-verify=" Required "placeholder=" Class ="layui-input"/> </div> <div class="layui-form-item"> <label class="layui-form-label"> Type </label> <div Class ="layui-input-block"> <input type="checkbox" name="type" title=" value="write"> <input type="checkbox" name="type" title=" dai" value="dai"> </div> </div> <div Class ="layui-form-item"> <label class="layui-form-label"> <div class="layui-input-inline"> <input type="radio" <input type="radio" name="sex" value=" male "title=" male "checked ="checked"> </div> <label <div class="layui-input-inline"> <input type="checkbox" name="state" Lay - skin = "switch" lay - text = "open | close value =" checked "1" > < / div > < / div > < div class = "layui - form - item" > < label <div class="layui-form-label"> <div class="layui-input-inline"> <select name="city" lay-verify="required" lay-verType="tips" class="fsSelect" dict="city" addNull="1"> </select> </div> <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"> <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"> City </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"> Attachment </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" Inputs ="type:test"> </button> </div> <div class="layui-form-item <div class="layui-input-block"> <textarea id="description" </label> Name ="description" placeholder=" class="fsLayedit" height="80" class="layui-form-item" style="text-align: center;" > <button class="layui-btn" 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 >


This article appeared on my blog:
ITCTO technology blog