目前Joget只有AJAX子表单可以基于表单一个字段,异步加载数据。本样例代码可以基于标准的 Javascript API 和 表单 JSON Form Data API 或 JSON List Data API 实现基于表单某个字段,异步加载数据到当前表单中。
监听单个表单字段变化后加载-通过Form Data API实现
示例代码
<script type="text/javascript"> $(document).ready(function(){ //------配置开始------ var ajax_settings={ master_username:'admin', master_hash:'14ACD782DCFEB2BCDE2B271CCD559477', login_as:'admin', pk_value_field:'userId2',//基于该字段做为主键值异步加载数据 from_appId:'ajax_form_fill_demo',//数据来自应用id from_formId:'ajax_form_user_addr',//数据来自表单id map_fields:{//当前表单和异步加载表单字段映射 city:'city',//左侧是当前表单字段id,右侧是异步加载表单字段id street:'street', nearby:'nearby', active:'active', area:'area', addible:'addible' } } //------配置结束------ var strInArr=function(str,arr){ for(var i=0;i<arr.length;i++){ if(str==arr[i]){ return true; } } return false; } //更新表单 var updateForm=function(json){ console.log(json); $.each(ajax_settings.map_fields, function(k,v){ var updateField=FormUtil.getField(k); var updateValue=json[v]; if(updateField){ $.each(updateField,function(){ var e=$(this); if(e.is('input')&&e.attr('type')&&e.attr('type')=='radio'){ if(updateValue&&(e.attr('value')==updateValue)){ e.attr('checked','checked'); }else{ e.removeAttr('checked'); } }else if(e.is('input')&&e.attr('type')&&e.attr('type')=='checkbox'){ if(updateValue&&strInArr(e.attr('value'),updateValue.split(";"))){ e.attr('checked','checked'); }else{ e.removeAttr('checked'); } }else if(e.is('select')){ $.each(e.find('option'),function(){ var opt=$(this); if(updateValue&&strInArr(opt.attr('value'),updateValue.split(";"))){ opt.attr('selected','selected'); }else{ opt.removeAttr('selected'); } }); setTimeout(function(){ e.trigger("change");e.trigger("chosen:updated"); }, 500); }else{ updateField.val(updateValue); } }); } }); } var scheme='#request.scheme#'; var serverName='#request.serverName#'; var port='#request.serverPort#'; var contextPath='#request.contextPath#'; var ajax_url=scheme+'://'+serverName+':'+port+contextPath+'/web/json/data/form/load/'+ajax_settings.from_appId+'/'+ajax_settings.from_formId+'/'; var pk_value_field = FormUtil.getField(ajax_settings.pk_value_field); $(pk_value_field).on('change',function(){ var pk_value=FormUtil.getValue(ajax_settings.pk_value_field); console.log(pk_value); if(pk_value!=undefined&&pk_value!=''){ $.ajax({ type: "POST", url: ajax_url+pk_value, data: { j_username : ajax_settings.master_username, hash : ajax_settings.master_hash, loginAs : ajax_settings.login_as }, success : function(json){ updateForm(json); }, error:function(){ updateForm({}); }, dataType: "json" }); }else{ updateForm({}); } }); $(pk_value_field).change(); }); </script>
配置说明
要更改的部分为配置开始到配置结束之间的代码:
配置项 | 说明 |
---|---|
master_username | master用户名 |
master_hash | master hash |
pk_value_field | 基于该字段做为主键值异步加载数据 |
from_appId | 数据来自应用id |
from_formId | 数据来自表单id |
map_fields | 当前表单和异步加载表单字段映射 左侧是当前表单字段id,右侧是异步加载表单字段id |
支持的表单元素类型
所有的基本类型(除文件上传)、可增选项选择框、自动补全选择。
对于不支持的元素类型,由于实现方式各异,需要单独研究支持方案。
多表单、子表单
如果要异步加载多个表单的数据,则配置多个custom html,每个custom html写入样例代码并做好相应配置。
如果要异步加载子表单数据,from_formId配置为子表单的表单id即可
监听表个表单字段变化后加载-通过List Data API实现
示例代码
<script type="text/javascript"> $(document).ready(function(){ //------配置开始------ var ajax_settings={ master_username:'admin', master_hash:'14ACD782DCFEB2BCDE2B271CCD559477', login_as:'admin', from_appId:'ajax_form_fill_demo',//数据来自应用id from_datalistId:'list_ajax_form_user',//数据来自列表id map_filter_fields:{//当前表单和列表列名映射,监听这些字段的变化过滤列表 userId:'id', sex:'sex' }, map_fields:{//当前表单和列表列名映射,用于更新表单上的这些字段值 userName:'name', userDept:'dept' } } //------配置结束------ var strInArr=function(str,arr){ for(var i=0;i<arr.length;i++){ if(str==arr[i]){ return true; } } return false; } //更新表单 var updateForm=function(json){ console.log(json); $.each(ajax_settings.map_fields, function(k,v){ var updateField=FormUtil.getField(k); var updateValue=json[v]; if(updateField){ $.each(updateField,function(){ var e=$(this); if(e.is('input')&&e.attr('type')&&e.attr('type')=='radio'){ if(updateValue&&(e.attr('value')==updateValue)){ e.attr('checked','checked'); }else{ e.removeAttr('checked'); } }else if(e.is('input')&&e.attr('type')&&e.attr('type')=='checkbox'){ if(updateValue&&strInArr(e.attr('value'),updateValue.split(";"))){ e.attr('checked','checked'); }else{ e.removeAttr('checked'); } }else if(e.is('select')){ $.each(e.find('option'),function(){ var opt=$(this); if(updateValue&&strInArr(opt.attr('value'),updateValue.split(";"))){ opt.attr('selected','selected'); }else{ opt.removeAttr('selected'); } }); setTimeout(function(){ e.trigger("change");e.trigger("chosen:updated"); }, 500); }else{ updateField.val(updateValue); } }); } }); } var scheme='#request.scheme#'; var serverName='#request.serverName#'; var port='#request.serverPort#'; var contextPath='#request.contextPath#'; var ajax_url=scheme+'://'+serverName+':'+port+contextPath+'/web/json/data/list/'+ajax_settings.from_appId+'/'+ajax_settings.from_datalistId; $.each(ajax_settings.map_filter_fields,function(k,v){//监听每个过滤字段 var value_field = FormUtil.getField(k); if(value_field){ $(value_field).on('change',function(){ var value=FormUtil.getValue(k); console.log(value); var updated=false; if(value!=undefined&&value!=''){ $.ajax({ type: "POST", url: ajax_url, data: { j_username : ajax_settings.master_username, hash : ajax_settings.master_hash, loginAs : ajax_settings.login_as }, success : function(json){ if(json&&json.total&&json.total>0){ var data=json.data; for(var i=0;i<data.length;i++){//遍历列表数据,一旦有满足条件的行,则更新表单 var row=data[i]; var matches=[]; $.each(ajax_settings.map_filter_fields,function(k,v){ var value=FormUtil.getValue(k); var value2=row[v]; if(value==undefined){ matches.push(false); }else if(value2==undefined){ matches.push(false); }else if(value==value2){ matches.push(true); }else{ matches.push(false); } }); var allMatches=true; for(var j=0;j<matches.length;j++){ if(!matches[j]){ allMatches=false; break; } } if(allMatches){ updateForm(row); updated=true; break; } } } }, error:function(){ updateForm({}); }, dataType: "json" }); } if(!updated){ updateForm({}); } }); $(value_field).change(); } }); }); </script>
注:list data api是无法传参对数据过滤的,需要通过js代码对返回数据进行过滤
配置说明
要更改的部分为配置开始到配置结束之间的代码:
配置项 | 说明 |
---|---|
master_username | master用户名 |
master_hash | master hash |
from_appId | 数据来自应用id |
from_datalistId | 数据来自列表id |
map_filter_fields | 当前表单和列表列名映射,监听这些字段的变化过滤列表 左侧是当前表单字段id,右侧是列表列名 |
map_fields | 当前表单和列表列名映射,用于更新表单上的这些字段值 左侧是当前表单字段id,右侧是列表列名 |
样例应用
APP_ajax_form_fill_demo-1-20180209104117.jwa