layui-form-designlayui 表單設(shè)計器
layui表單設(shè)計器
價值源自分享
因維護自己的swiftadmin開源項目時需要一款基于layui的表單設(shè)計器，發(fā)現(xiàn)已有的開源項目并不太適合自己使用,
所以只能重復(fù)造這個輪子了，主要用于在一鍵CURD過程中快速設(shè)計表單，自定義生成表單布局，支持遠(yuǎn)程JSON加載，并且代碼簡潔易懂！
軟件架構(gòu)
基于layui2.7RC5 Sortable拖拽組件開發(fā)的一款簡潔易用，功能強大的表單設(shè)計器，其中除了包含layui自身常用的屬性之外；
還包括級聯(lián)選擇器（城市）、富文本編輯器、TAGS標(biāo)簽(原創(chuàng))等其他可用于生產(chǎn)環(huán)境下的優(yōu)秀組件。熟悉layui即可輕松上手，開箱即用！
增加了font-awesome圖標(biāo)庫，開源不易，請右上角點擊Star支持，感謝你的支持?。?！
使用說明
本項目使用Sortable拖拽組件，并結(jié)合layui自身模塊化編寫。組件直接寫HTML代碼即可
盡量在項目中HTML的代碼部分跟JavaScript分開，不然代碼會看起來特別混亂，維護比較麻煩！
配置信息
//默認(rèn)配置
Class.prototype.config = {
id: null,
data: [], // 當(dāng)前元素集合
eval: '', // 當(dāng)前HTML數(shù)據(jù)
count: 0, // 當(dāng)前組件總數(shù)
state: null, // 當(dāng)前活動實例
index: [], // 組件分類索引
itemIndex: {}, // 子組件元素索引
master: undefined // 主界面拖拽實例
};
1、在HTML設(shè)計模板中增加你所需要的組件，并定義data-tag的值
<div class="component">
<div class="head">表單組件</div>
<div class="component-group" id="sort_1">
<ol data-tag="input"><div class="icon"><i class="layui-icon layui-icon-layer"></i></div><div class="name">單行輸入</div></ol>
<ol data-tag="textarea"><div class="icon"><i class="layui-icon layui-icon-align-left"></i></div><div class="name">多行輸入</div></ol>
<ol data-tag="radio"><div class="icon"><i class="layui-icon layui-icon-radio"></i></div><div class="name">單選框</div></ol>
<ol data-tag="checkbox"><div class="icon"><i class="layui-icon layui-icon-table"></i></div><div class="name">多選框</div></ol>
<ol data-tag="select"><div class="icon"><i class="layui-icon layui-icon-print"></i></div><div class="name">下拉框</div></ol>
<ol data-tag="date"><div class="icon"><i class="layui-icon layui-icon-time"></i></div><div class="name">日期組件</div></ol>
<!-- // 需要的組件可以自己添加 -->
<!-- // 并且按照已有流程進(jìn)行代碼render的編寫即可 -->
</div>
</div>
2、在正常加載layuiJS以及CSS后，需要自行在尾部將非layui模塊規(guī)范的JS組件加載到頁面中
<script src="/layui.js?v=v"></script>
<!-- // 全局加載第三方JS -->
<script src="/cascadata.js"></script>
<script src="/tinymce/tinymce.min.js"></script>
<!-- // 加載font-awesome圖標(biāo) -->
<link href="/css/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="/Sortable/Sortable.js?v=1.14"></script>
3、在formDesignJS中編寫你所需要增加的組件的render實現(xiàn)以及其他需要二次開發(fā)的屬性
然后在模板首頁使用如下調(diào)用方式即可完成組件的渲染工作！
layui.use(['form','jquery','flow','formDesign'],function() {
var form = layui.form;
var $ = layui.jquery;
var formDesign = layui.formDesign;
// 加載即可
formDesign.render({
elem: '#formBuilder'
,eval: '#formdesign'
});
})
圖片預(yù)覽
參與貢獻(xiàn)
歡迎Fork 本倉庫有好的需求可以提交PR
使用協(xié)議
- 本軟件支持個人/企業(yè)免費商用，二次開發(fā)，但必須遵循Apache2開源協(xié)議，保留代碼版權(quán)（logo、素材、代碼注釋）
- 使用本框架不得用于開發(fā)違反國家有關(guān)政策的相關(guān)軟件和應(yīng)用，否則要付法律責(zé)任！
- 本軟件依法享有國家著作權(quán)保護，故使用本軟件者不得惡意篡改本源碼，包括但不限于（植入木馬病毒，編寫違法應(yīng)用）進(jìn)行惡意傳播。
- 不得對本軟件進(jìn)行惡意篡改或倒賣，不得對本軟件進(jìn)行二次包裝后聲稱為自己的產(chǎn)品等，請尊重國家著作權(quán)法！
- 用戶承諾接受并遵守本協(xié)議的約定。如果用戶不同意本協(xié)議的約定，應(yīng)立即停止使用。
當(dāng)您使用這款軟件的時候，默認(rèn)視為您同意上述條款