## 鍵值組件(Fieldlist) 鍵值組件是`YznCMS`開發的一項簡潔實用的基礎組件，在`YznCMS`中很多模塊都有使用到該組件，例如`網站設置`\-`系統`\-`配置分組`均使用此組件開發，我們在插件管理配置中也經常可以看到鍵值組件的身影。 ### 組件特點 1、支持一維數組和二維數組數據源 2、支持添加、刪除、排序 3、支持自定義列表模板 ### 常規示例 以下是鍵值組件常用的一維數組數據源使用方法： ~~~html <dl class="layui-input-block fieldlist" data-name="row[configgroup]"> ? ?<dd> ? ? ? ?<ins>鍵名</ins> ? ? ? ?<ins>鍵值</ins> ? ?</dd> ? ?<dd><button type="button" class="layui-btn btn-append">追加</button></dd> ? ?<textarea name="row[configgroup]" class="layui-textarea layui-hide" cols="30" rows="5">{"basic":"基礎配置","email":"郵件配置","dictionary":"字典配置","user":"會員配置","example":"示例分組"}</textarea> </dl> ~~~ 通過將以上代碼放置在我們的表單中，然后使用`Form.bindevent($("form.layui-form"))`或`Form.events.fieldlist($("form.layui-form"))`進行初始化即可。 ### 自定義模板 以上是最簡潔的使用方法，fieldlist還有更強大的自定義功能來實現自定義模板和二維數組數據源， 具體參考`系統配置`-`特殊字段2：自定義字段`章節代碼 ### 事件綁定 如果我們需要在點擊追加按鈕以后再對新增的展示項綁定事件，我們可以在JS中通過監聽事件來給新增的元素綁定事件，這種情況常用于我們自定義列表中有表單組件，如日期選擇、上傳按鈕、動態下拉等情況下使用。 ~~~js $(document).on("fa.event.appendfieldlist", '[data-name="row[test]"] .btn-append', function(e, obj){ //通用的表單組件事件綁定和組件渲染 ? Form.api.bindevent(obj); }); ~~~ 如果我們在JS中外部對`fieldlist`中的組件做了修改，此時我們需要手動觸發下組件的`change`事件，如： ~~~js $(".fieldlist input:first-child").trigger("change"); ~~~ 通過以上代碼來觸發`input`的`change`事件，此時我們隱藏的`textarea`值才會刷新，否則`textarea`仍然是舊的數據 ### 重新渲染 如果我們通過JS手動修改了隱藏的`textarea`的值，此時需要重新渲染我們的`fieldlist`組件，我們可以通過 ~~~js $(".fieldlist textarea[name='test']").trigger("fa.event.refreshfieldlist"); ~~~ 來重新渲染我們的組件 ### 追加數據 如果我們希望在外部追加數據，可以通用調用追加按鈕的點擊事件并透傳數據來實現 ``` var data ={ "name":"王五", "gender":"男", "age":"22", "score":"60" }; $("[data-name='row[test]'] .btn-append").trigger("click", [data]); ```