PasteForm最佳CRUD实践，实际案例PasteTemplate详解之管理前端的代码(二)

之前的文章说了，使用反射和ABPvNext的Dto实现用后端控制前端以实现最佳CRUD实践！
相信看过一的已经了解了这个PasteForm是如何实现的了，本文来看下具体如何实现的

表格页面的实现

打开pasteform/index.html页面之后，先会向API请求当前的path的数据模板

    _apiget(`/api/app/${_classPath}/readListModel`, true, (c, o) => {
        if (c == 200) {
            if (o.title) {
                $(".ppbody .st").find(".sn").html(o.title);
                this.document.title = o.title;
            }
            if (o.desc) {
                $(".ppbody .st").find(".idesc").html(o.desc);
            }
            //表头的模板内容
            var _template_head_html = null;

            _globadataProperties = o.properties;
            //模型处理，如何显示外表 比如cate.name 
            HandlerModelColumn(o.properties);
            //class模型的属性列表
            if (o.attributes) {
                _globadataAttributes = o.attributes;
                o.attributes.forEach(_attribute => {
                    if (_attribute.name == 'disable') {
                        if (_attribute.args1) {
                            _config.disable_add = true;
                            $(".btnadd").hide();
                        }
                        if (_attribute.args2) {
                            _config.disable_edit = true;
                        }
                        if (_attribute.args3) {
                            _config.disable_del = true;
                        }
                    }
                    if (_attribute.name == "template") {
                        if (_attribute.args1) {
                            _template_head_html = $(`#${_attribute.args1}`).html();
                        }
                        if (_attribute.args2) {
                            _template_body_html = $(`#${_attribute.args2}`).html();
                        }
                    }
                });
            }

            if (_template_head_html == null) {
                _template_head_html = $("#template_header").html();
            }
            var _modelhtml = template(_template_head_html, { list: o.properties, config: _config });
            //一级模型 转化成 二级模型
            if (_template_body_html == null) {
                var _template_body = $("#template_body").html();
                var _bodyhtml = template(_template_body, { list: o.properties, config: _config });
                _template_body_html = _bodyhtml.replace(/{
  {/g, '<%').replace(/}}/g, '%>');
            }
            $(".table").find("thead").html(_modelhtml);
            //处理查询项
            if (o.queryProperties) {
                _globdataQueryProperties = o.queryProperties;
                HandlerQueryItem(o.queryProperties);
            } else {
                _readpagedata(1);
            }
            //读取数据
        }
    });

看如上代码，就是先向后端获得这个页面的搜索区域的数据模型属性和下方表格的数据模型
然后

_readpagedata(1);

才是获取表格的数据，也就是说第二页之后的数据是只要请求一次的，只要首次打开才要获取数据模型的属性，如果你使用本地缓也是可以省略第一次的模型属性的数据的！
UI中再基于JS获取到的模型进行渲染

        <!-- 查询的信息模板 -->
        <script type="text/html" id="template_search">
            <% list.forEach(item=>{ %>
                <% if(item.dataType=="String" || item.dataType == 'Guid'){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" class="inputword" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=="Int32" || item.dataType=='Int64'){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="number" name="<%:=item.name%>" class="inputword" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=='outer'){ %>
                    <div class="outer sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
                            <input type="number" class="outerid" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
                        <%}else{%>
                            <input type="text" class="outerid" style="display:none;"  value="<%:=item.value%>" name="<%:=item.name%>">
                        <%}%>
                        <input type="text" class="outerdisplay" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
                        <span class="spanclean" onclick="handlerCleanOuterInput(this)">x</span>
                    </div>
                <% } %>
                <% if(item.dataType=="select"){ %>
                    <label  class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <select name="<%:=item.name%>">
                            <% if(item.selects){ %>
                                <% item.selects.forEach(_select=>{ %>
                                    <option value="<%:=_select.value%>" <% if(_select.selected){ %>selected<% } %>><%:=_select.name%></option>
                                <% }) %>
                            <%}%>
                        </select>
                    </label>
                <% } %>
                <% if(item.dataType=="DateTime"){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>