前端渲染遍历数据的一种方式

一、前端渲染遍历的一种方法，这只是其中一种，使用字符串拼接的形式也是可以的。

1. 该方法主要是对ajax的形式请求的数据进行渲染

首先定义一个ajax方法，并且请求和返回一组数据：下方是ajax的方法，重点是将返回的数据赋值给data

function ShowProductdownData(pid) {
        $.ajax({
            url: "/Sbi.DataCenter/SpecGroup/GetAttr",
            data: { "id": $("#id").val() },
            success: function (res) {
                console.log(res);
                $('.list-down-datas').html(template('list-down-datas', { data: res }));
            }
        })
    }

2. 前端进行渲染数据：具体呢就是这样，看不懂的给我留言，或者加我qq:318409129，应该都能看懂，O(∩_∩)O哈哈~

<script id="list-down-datas" type="text/template">
                    <li class="list-group-item">
                        <div class="row">
                            <div class="form-group col-xl-1 mb-xl-n1">代号</div>
                            <div class="form-group col-xl-1 mb-xl-n1">属性名称</div>
                            <div class="form-group col-xl-1 mb-xl-n1">描述</div>
                            <div class="form-group col-xl-1 mb-xl-n1">输入方式</div>
                            <div class="form-group col-xl-1 mb-xl-n1">输入类型</div>
                            <div class="form-group col-xl-1 mb-xl-n1">搜素标识</div>

                            <div class="form-group col-xl-1 mb-xl-n1">排序号</div>
                            <div class="form-group col-xl-1 mb-xl-n1">是否启用</div>
                            <div class="form-group col-xl-1 mb-xl-n1">是否通用</div>
                            @*<div class="form-group col-xl-3 mb-xl-n1">产品说明 </div>
        <div class="form-group col-xl-3 mb-xl-n1">是否启用</div>*@
                            <div class="form-group col-xl-2 mb-xl-n1">操 作</div>
                        </div>
                    </li>
                    {{ each data }}
                    <li class="list-group-item">
                        <div class="row">
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.code }}</div>
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.frontendName }}</div>
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.remark }}</div>
                            
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.inputTypes }}</div>
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.valueType }}</div>
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.segments }}</div>
                            <div class="form-group col-xl-1 mb-xl-n1">{{ $value.displayOrder }}</div>
                            <div class="form-group col-xl-1 mb-xl-n1">
                                <input type="checkbox" disabled="true" {{ $value.isActive ? 'checked' : '' }} />
                            </div>
                            <div class="form-group col-xl-1 mb-xl-n1">
                                <input type="checkbox" disabled="true" {{ $value.generic ? 'checked' : '' }} />
                            </div>


                            <div class="form-group col-xl-2 mb-xl-n1">
                                <a href="/Sbi.DataCenter/SpecGroup/EditSpecParam?id={{ $value.id }}" class="btn btn-primary btn-sm">@T["编辑"]</a>
                                
                                <a href="/Sbi.DataCenter/SpecGroup/SpecParamStringValueList?id={{ $value.id }}&paramName={{$value.frontendName}}" class="btn btn-primary btn-sm">@T["查看属性值"]</a>
                            </div>
                        </div>
                    </li>
                    {{ /each }}

                    {{ if data.length == 0 }}
                    <div class="alert-info" style="padding: 10px; margin-top: 15px;">当前选择产品下无子产品</div>
                    {{ /if }}
                </script>

3. 谢谢学习