前端渲染遍歷數據的一種方式

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

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. 謝謝學習