Skip to end of metadata
Go to start of metadata

目前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_usernamemaster用户名
master_hashmaster 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