## 键值组件(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]); ```