fsLayui快速開始
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"></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"></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"></i>刪除
</button>
<button class="layui-btn" function="refresh">
<i class="layui-icon">ဂ</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
等...，
菜單信息配置請參考：菜單配置說明javascript
新增彈出窗口
-
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"></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"></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"></i>刪除 </button>
刷新表格
-
function="refresh"描述刷新表格
<button class="layui-btn" function="refresh"> <i class="layui-icon">ဂ</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"></i>編輯</button>
<button type="button" class="layui-btn layui-btn-primary" function="close">關閉</button>
</div>
</form>
</div>
</body>
</html>
本文首發於個人博客： ITCTO技術博客
相關文章
- 1. Docker快速開始
- 2. OKHttp3 快速開始
- 3. angular2快速開始
- 4. Hystrix-快速開始
- 5. Elasticsearch 快速開始
- 6. Zipkin快速開始
- 7. JMeter快速開始
- 8. Nacos 快速開始
- 9. HaaS100快速開始
- 10. solr：快速開始
- 更多相關文章...
- • SQL 快速參考 - SQL 教程
- • Eclipse 快速修復 - Eclipse 教程
- • PHP開發工具
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Docker快速開始
- 2. OKHttp3 快速開始
- 3. angular2快速開始
- 4. Hystrix-快速開始
- 5. Elasticsearch 快速開始
- 6. Zipkin快速開始
- 7. JMeter快速開始
- 8. Nacos 快速開始
- 9. HaaS100快速開始
- 10. solr：快速開始