之前的文章说了，使用反射和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> <input type="text" name="<%:=item.name%>" value="<%:=item.value || ''%>" class="inputword" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})" placeholder="<%:=item.placeholder || ''%>"> <span class="spanclean" onclick="handlerClean(this)">x</span> </label> <% } %> <% if(item.dataType=="datalist"){ %> <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>> <span><%:=item.title%>:</span> <input type="text" name="<%:=item.name%>" class="inputword" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>"> <% if(item.selects){ %> <datalist id="<%:=item.datalistid%>"> <% item.selects.forEach(_select=>{ %> <option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option> <% }) %> </datalist> <%}%> <span class="spanclean" onclick="handlerClean(this)">x</span> </label> <% } %> <% if(item.dataType=='daterange'){%> <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>> <span><%:=item.title%>:</span> <input type="text" class="inputword" name="<%:=item.name%>" readonly datas="" datae="" value="<%:=item.value || ''%>" id="<%:=item.name%>"> </label> <% } %> <% }) %> </script> <!-- 头部的信息模板 --> <script type="text/html" id="template_header"> <tr> <% list.forEach(item=>{ %> <% if(!item.hidden){ %> <td> <%:=item.title%> <% if(item.attributes!=null){ %> <% item.attributes.forEach(_attribute=>{ %> <% if(_attribute.name=='orderby'){ %> <span class="orderby"> <i class="Hui-iconfont ordersell icon-top" dataval="<%:=_attribute.args1%>"></i> <i class="Hui-iconfont ordersell icon-bottom" dataval="<%:=_attribute.args2%>"></i> </span> <% } %> <% }) %> <% } %> </td> <% } %> <% }) %> <td>操作</td> </tr> </script> <!-- 表格的信息模板 --> <script type="text/html" id="template_body"> <!-- 注意花括号百分比的是当前的模板 2个花括号的是占位，下一个的模板代码 --> {{ list.forEach(item=>{ }} <tr> <% list.forEach(item=>{ %> <% if(!item.hidden){ %> <td <%if(item.class){%>class="<%:=item.class%>"<%}%>> <% if(item.dataType=='image' ){ %> <img class="image" src="{{:=item.<%:=item.name%>}}"> <% }else if(item.dataType=='head' ){ %> <img class="head" src="{{:=item.<%:=item.name%>}}"> <% }else if(item.dataType=='switch' ){ %> <input type="checkbox" class="input-checkbox mui-switch mui-switch-anim" onchange="handlerSwitchChange(this)" dataid="{{:=item.id}}" dataname="<%:=item.name%>" {{ if(item.<%:=item.name%>){ }}checked{{ } }} > <% }else{ %> <%if(item.html){%> <%:=item.html%> <%}else{%> <span class="itd"> {{:=item?.<%:=item.name%>}} </span> <%}%> <% } %> </td> <% } %> <% }) %> <td class="fleft"> <!-- 这里填写编辑或者其他 --> {{ if(config.model=='view'){ }} <% if(config.menubox){%> <a href="javascript:;" onclick="open_menu_box(this);" onmouseover="open_menu_box(this);" ><i class="Hui-iconfont Hui-iconfont-more"></i></a> <div class="menubox" style="z-index: 100;" onmouseleave="$(this).fadeOut();"> <% list.forEach(item=>{%> <% if(item.dataType=='menubox'){ %> <% if(item.attributes){ %> <% item.attributes.forEach(_attribute=>{ %> <% if(_attribute.name=='menu'){ %> <a onclick="<%:=_attribute.args2%>"><% if(_attribute.args3){%><i class="Hui-iconfont <%:=_attribute.args3%>"></i><%}%> <%:=_attribute.args1%></a> <% } %> <% }) %> <% } %> <% } %> <% if(item.dataType=='ifmenubox'){ %> {{ if(<%:=item.ifmenu.expression%>){ }} <%:=item.ifmenu.value%> {{ } }} <% } %> <% }) %> </div> <% } %> <% if(!config.disable_edit){ %> <a href="javascript:;" onclick="tap_view_item(this)" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-shuru"></i>编辑</a> <% } %> <!-- 处理自定义的类型，由于是表的性质，穿透到数据的className --> <% list.forEach(item=>{%> <% if(item.dataType=='menu'){ %> <% if(item.attributes){ %> <% item.attributes.forEach(_attribute=>{ %> <% if(_attribute.name=='menu'){ %> <a onclick="<%:=_attribute.args2%>"><% if(_attribute.args3){%><i class="Hui-iconfont <%:=_attribute.args3%>"></i><%}%> <%:=_attribute.args1%></a> <% } %> <% }) %> <% } %> <% } %> <% if(item.dataType=='ifmenu'){ %> {{ if(<%:=item.ifmenu.expression%>){ }} <%:=item.ifmenu.value%> {{ } }} <% } %> <% }) %> <% if(!config.disable_del){ %> <a href="javascript:;" onclick="handler_tap_del(this)" class="a-del" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-del3"></i>删除</a> <% } %> <!-- 自定义处理操作列菜单完成 --> {{ } }} {{ if(config.model=='select'){ }} <a href="javascript:;" class="mselect" onclick="tap_select_item(this)" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-fabu"></i>选择</a> {{ } }} </td> </tr> {{ }) }} </script> 注意表格中的模板进行了二次转化，也就是获取模型后先转化成数据模型获得模板，然后再结合实际的页数据再一次进行UI渲染
表单页面的实现
表单页面打开后会判断是否是编辑，其实整个思路是一样的，只是请求的接口不一样，一个是XXXAddDto一个是UpdateDto
/** * 读取模型和默认值，值等 */ function FuncFilexModel() { // console.log(_id); if (_id && _id != '0' && _id != 0) { _apiget(`/api/app/${_classPath}/${_id}/readUpdateModel`, true, (c, o) => { if (c == 200) { loadHeader(o); if (o.properties) { LoadModelProperity(o.properties); } if (o.title) { this.document.title = "更新" + o.title; } } }); } else { _apiget(`/api/app/${_classPath}/readAddModel`, true, (c, o) => { if (c == 200) { loadHeader(o); if (o.properties) { LoadModelProperity(o.properties); } if (o.title) { this.document.title = "新增" + o.title; } } }); } } 其实2个请求到最后都是到LoadModelProperity的函数中
/** * 读取数据的模型 处理数据的模型 * @param {*} properties */ function LoadModelProperity(properties) { _modelProperties = properties; handlerExchangeDataTypeToUIType(properties); var _template = $("#templatemodel").html(); var _ahtml = template(_template, { list: properties, config: _config }); $(".paste-form-body").html(_ahtml); setTimeout(function () { FormLoaded(properties); funcAppendInputLength(); //计算高度，返回 var _height = $(".newform").height() + 140; if (_has_outer) { //如果计算的高度小于600，表单中有outer则至少保证高度为600 if (_height < 600) { _height = 600; } } var _index = parent.layer.getFrameIndex(window.name); //获取窗口索引 if (window.parent.set_dialog_height) { window.parent.set_dialog_height(_height, _index); } else { console.log('没有在父级找到函数set_dialog_height'); } $(".ulselects").on('click', 'li', function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { $(this).addClass('selected'); } }); }, 100); } 然后是前端HTML中，基于JS获取的数据进行UI渲染
<script type="text/html" id="templatemodel"> <% list.forEach(item=>{%> <div class="row cl <% if(item.singlerow){ %>singlerow<% } %>" <%if(item.hidden){%> style="display:none;" <%}%>> <div class="itemrow"> <label class="form-label"><%:=item.title%><%if(item.mark){%><span class="tapmark" onclick="global_tap_mark('<%:=item.mark.model%>','<%:=item.mark.value%>')">?</span><%}%><%if(item.required){%><span class="form-required">*</span><%}%></label> <div class="formControls"> <% if(item.dataType=="text" || item.dataType =='Guid'){ %> <input name="<%:=item.name%>" class="input-text" <%if(item.required){%>required<%}%> type="text" value="<%:=item.value || ''%>" maxlength="<%:=item.maxlength%>" placeholder="<%:=item.placeholder%>" /> <span class="spanclean" onclick="handlerClean(this)">x</span> <%}%> <% if(item.dataType=="number"){ %> <input name="<%:=item.name%>" class="input-number" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" /> <%if(item.unit){%> <span class="unit"><%:=item.unit%></span> <%}%> <%}%> <% if(item.dataType=="fentoyuan"){ %> <input name="<%:=item.name%>" class="input-number" step="0.01" min="0" max="99999999" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" /> <span>元</span> <%}%> <% if(item.dataType=="Double" || item.dataType=='Decimal'){ %> <input name="<%:=item.name%>" class="input-number" step="<%:=item.step%>" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" /> <%if(item.unit){%> <span class="unit"><%:=item.unit%></span> <%}%> <%}%> <% if(item.dataType=="textarea"){ %> <textarea name="<%:=item.name%>" class="input-textarea" <%if(item.style){%>style="<%:=item.style%>"<%}%> <%if(item.required){%>required<%}%> <%if(item.maxlength>0){%>maxlength="<%:=item.maxlength%>"<%}%> placeholder="<%:=item.placeholder%>" ><%:=item.value || ''%></textarea> <span class="spanclean" onclick="handlerClean(this)">x</span> <%}%> <% if (item.dataType=="switch"){ %> <input type="checkbox" class="input-checkbox mui-switch mui-switch-anim" <%if(item.value){%>checked<%}%> name="<%:=item.name%>"> <span class="placeholder"><%:=item?.placeholder || ''%></span> <%}%> <% if(item.dataType=="datetime"){ %> <input type="text" value="<%:=item.value || ''%>" name="<%:=item.name%>" <%if(item.required){%>required<%}%> maxlength="20" placeholder="<%:=item.placeholder%>" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})" autocomplete="off" class="input-text input-form-date"> <%}%> <% if(item.dataType=="daterange"){ %> <input type="text" value="<%:=item.value || ''%>" id="<%:=item.name%>" name="<%:=item.name%>" datas="" datae="" <%if(item.required){%>required<%}%> placeholder="<%:=item.placeholder%>" autocomplete="off" class="input-text input-form-date"> <%}%> <% if(item.dataType == "richtext"){ %> <div class="editoryarea"> <div class="editor_toolbar" id="<%:=item.name%>editorbar"></div> <div class="editor_body" id="<%:=item.name%>editor"></div> </div> <%}%> <% if(item.dataType == "file"){ %> <input type="file" id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadOnlyFile(this)" <%if(item.url){%>dataurl=<%:=item.url%><%}%> datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none" /> <input type="text" name="<%:=item.name%>" value="<%:=item.value%>" placeholder="<%:=item.placeholder%>" onclick="$('[id=<%:=item.name%>]').trigger('click');"> <span class="spanclean" onclick="handlerClean(this)">x</span> <%}%> <% if(item.dataType == "image" || item.dataType=="images"){ %> <input type="text" style="display:none" name="<%:=item.name%>" value="<%:=item.value%>"> <input type="file" multiple id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadFile(this)" datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none;" /> <% if(item.num ==1){%> <label for="<%:=item.name%>"> <img class="form-image-head" <%if(item.value){%>src="<%:=item.value%>"<%}%> > <%if(!item.value){%> <span class="iconadd icon-add"> <i class="Hui-iconfont Hui-iconfont-add2 icon"></i> </span> <%}%> </label> <span class="placeholder"><%:=item?.placeholder || ''%></span> <% }else{ %> <span class="placeholder"><%:=item?.placeholder || ''%></span> <ul class="imageul"> <li><label for="<%:=item.name%>"><span class="icon-add"> <i class="icon Hui-iconfont Hui-iconfont-add2"></i> </span></label></li> <%if(item.images){%> <%item.images.forEach(_img=>{%> <li><img src="<%:=_img%>"><i class="Hui-iconfont Hui-iconfont-close2 icon-close" onclick="handlerRemoveImageItem(this)"></i></li> <%})%> <%}%> <!-- <li> <img> <i class="iconfont icon-close" onclick="handlerRemoveImageItem(this)"></i> </li> --> </ul> <% } %> <%}%> <% if(item.dataType=='outer'){ %> <div class="outer"> <% 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="handlerClean(this)">x</span> </div> <% } %> <% if(item.dataType=='outers'){ %> <div class="outers"> <input type="button" value="添加" class="btn btnaddouter" dataname="<%:=item.name%>" onclick="handler_outer_value(this)"> <ul class="ulouter outers<%:=item.name%>"> <% if(item.display){%> <% item.display.forEach(_display=>{ %> <li dataid="<%:=_display[item.display_id]%>"> <%:=_display[item.display_name]%> <span class="outer_close" onclick="$(this).parents('li').remove();">x</span> </li> <% }) %> <% } %> </ul> </div> <% } %> <% if(item.dataType=="select"){ %> <select name="<%:=item.name%>"> <% if(item.selects){ %> <% item.selects.forEach(_select=>{ %> <option value="<%:=_select.value%>" <%if(_select.value==item.value){%>selected<%}%>><%:=_select.name%></option> <% }) %> <%}%> </select> <% } %> <%if(item.dataType=="button"){%> <input type="button" class="btn btnlink" value="<%:=item.value%>" onclick="global_form_button_click(this,`<%:=config.className%>`,`<%:=item.name%>`);"> <span class="placeholder"><%:=item?.placeholder || ''%></span> <%}%> <% if(item.dataType=="selects"){ %> <ul class="ulselects" name="<%:=item.name%>"> <% if(item.selects){ %> <% item.selects.forEach(_select=>{ %> <li class="selectli <%if(_select.selected){%>selected<%}%>" value="<%:=_select.value%>"><%:=_select.name%></li> <% }) %> <%}%> </ul> <% } %> <% if(item.dataType=="datalist"){ %> <input type="text" name="<%:=item.name%>" class="inputword" value="<%:=item.value%>" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>"> <% if(item.selects){ %> <datalist id="<%:=item.datalistid%>"> <% item.selects.forEach(_select=>{ %> <option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option> <% }) %> </datalist> <%}%> <span class="spanclean" onclick="handlerClean(this)">x</span> <% } %> </div> </div> </div> <%})%> </script> 所以说，针对不同项目的不同需求，或者说你们的个人习惯，可以对上面的代码进行修改以便适应自己的项目，比如我的项目一般不会用到date,一般用到的是datetime，所以我就没考虑date的情况了！
下一次将介绍在实际中遇到的问题，和PasteForm是如何处理问题的
![洛谷 P11345 [KTSC 2023 R2] 基地简化 题解](http://www.itfaba.com/wp-content/themes/kemi/timthumb.php?src=http://www.itfaba.com/wp-content/themes/kemi/img/random/3.jpg&w=218&h=124&zc=1)
