Jquery LayUI 弹层、表单、JSON循环

项目中某个需求，需要批量导入json数据，并渲染到页面表单。话不多说，步骤如下：

1、页面增加快速导入按钮：

<button id="ksdr" style="margin-left: 5px;" type="button" class="layui-btn layui-btn-radius layui-btn-normal">快速导入配置</button>

2、随之，编写相关的js代码：

  function isJsonString(str) {
        try {
            if (typeof JSON.parse(str) == "object") {
                return true;
            }
         } catch(e) {
           }
        return false;
    }

    $("#ksdr").click(function () {
        var strstr = '<form class="layui-form"  >'
                     +'  <div class="layui-form-item layui-form-text">'
                     +'     <label class="layui-form-label" >填写配置</label>'
                     +'     <div class="layui-input-block">'
                     +'        <textarea id="jsonConfig" style="height: 200px;" name="jsonConfig" placeholder="请输入json内容" class="layui-textarea"></textarea>'
                     +'     </div>'
                     +'  </div>'
                     +'</form>';
        //页面层
        layer.open({
            type: 0,
            title: '快速导入配置',
            area: ['600px', '400px'], //宽高
            shade: 0,
            btn: ['确认',],
            content: strstr,
            yes:function(index,layero){
                var jsonstr = $('#jsonConfig').val();
                if(!jsonstr){
                    layer.msg('填写json配置不能为空！');
                    return false;
                }

                if (!isJsonString(jsonstr)) {
                    layer.msg('请检查json格式合法性！');
                    return false;
                }

                var jsonConfig =$.parseJSON(jsonstr);

                var tbody = "";
                $.each(jsonConfig, function (n, value) {
                    if(!value.product_id && !value.price && !value.rmb && !value.currency && !value.desc)
                    {
                        layer.msg('请检查json对象是否符合字段定义！');
                        return false;
                    }
                    if (typeof(value.product_id) == "undefined") value.product_id = '';
                    if (typeof(value.price) == "undefined") value.price = '';
                    if (typeof(value.rmb) == "undefined") value.rmb = '';
                    if (typeof(value.currency) == "undefined") value.currency = '';
                    if (typeof(value.desc) == "undefined") value.desc = '';

                    var key = 'key_' +  Date.now().toString()+n*1000;
                    var trs = "";
                    trs += 	'<div class="item"><div class="layui-inline"><div class="layui-input-inline" style="width: 100px;"><input type="text" name="validPriceConfig[' + key + '][product_id]" value="'+ value.product_id +'"  placeholder="商品ID" autocomplete="off" class="layui-input"></div> ： <div class="layui-input-inline" style="width: 120px;"><input type="text" name="validPriceConfig[' + key + '][price]" value="'+ value.price +'"  placeholder="商品价格" autocomplete="off" class="layui-input"></div> <div class="layui-input-inline" style="width: 120px;"><input type="text" name="validPriceConfig[' + key + '][rmb]" value="'+ value.rmb +'"  placeholder="对应人民币价格" autocomplete="off" class="layui-input"></div> <div class="layui-input-inline" style="width: 120px;"><input type="text" name="validPriceConfig[' + key + '][currency]" value="'+ value.currency +'"  placeholder="货币种类" autocomplete="off" class="layui-input"></div> <div class="layui-input-inline" style="width: 120px;"><input type="text" name="validPriceConfig[' + key + '][desc]" value="'+ value.desc +'"  placeholder="商品描述" autocomplete="off" class="layui-input"></div></div> <i class="my-icon layui-icon-reduce-circle operate-btn reduce-btn"></i></div>';

                    tbody += trs;
                });
                $('#keys-wrapper .list').append(tbody);

                layer.close(index); //如果设定了yes回调，需进行手工关闭
            },
            closeBtn : 1,
            btnAlign:'c',
            success : function(layero, index) {

            },

        });
    });

3、最后效果如下：