之前的文章說了，使用反射和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是如何處理問題的