emapForm使用

席言

2023-12-01

使用emap进行开发的时候，emapForm使用极为频繁，其中有不少比较坑的东西，由于使用文档不是很清楚，所以结合自己的使用经验进行一个总结。

参考资源：

http://res.wisedu.com/FS/docsite/emapcomponent.html

http://res.wisedu.com/examples/components-v1/docs/emap/v1.1/emapForm.js.html#line1001

http://res.wisedu.com/examples/components-v1/docs/emap/v1.1/emapService.js.html#line1

http://res.wisedu.com/fe_components/emap-1.2.js（line14194-15171）

1、自定义构建emapForm，表单数据模型自己定义

数据模型dataModel：

var dataModel = [
    {//开关
        "name": "XSBH",
        "caption": "开关",
  		"xtype": "switcher",
        "dataSize": 40
    },
    {
        "name": "XH",
        "xtype": "static",
  		"defaultValue":"123",
        "caption": "学号",
        "required": true,
        "dataSize": 20
    },
    {//默认的单行input
        "name": "XM",
        "dataType": "String",
        "caption": "姓名",
        "required": true,
        "dataSize": 90
    },
    {
        "name": "XBDM",
        "caption": "性别",
        "optionData":[
            {"id": "0", "name": "未知"},
            {"id": "1", "name": "男"},
            {"id": "2", "name": "女"}
        ],
        "xtype": "select",
        "required": true,
        "col":2,
        "dataSize": 1
    },
    {//日期
        "name": "CSRQ",
        "caption": "出生日期",
        "xtype": "date-local",
        "required": true,
        "dataSize": 7,
        "format": "yyyy-MM-dd"
    },
    {//日期区间
        "name": "QJCSRQ",
        "caption": "日期区间",
        "xtype": "date-area",
        "required": true,
        "dataSize": 7,
        "col":3,
        "format": "yyyy-MM-dd"
    },
    {//单选列表
        "name": "MZDM",
        "dataType": "String",
        "caption": "问题A",
        "optionData":[
            {"id": "0", "name": "选项A"},
            {"id": "1", "name": "选项B"},
            {"id": "2", "name": "选项C"}
        ],
        "xtype": "radiolist",
        "dataSize": 2,
        "col":2
    },
    {//下拉树
        "name": "CSDDM",
        "caption": "异步下拉",
        "url": "http://res.wisedu.com/fe_components/mock/tree.json",
        "quickSearch": true,
        "xtype": "tree",
        "dataSize": 6
    },
    {//复选框列表
        "name": "DWDM",
        "caption": "问题B",
        "optionData":[
            {"id": "0", "name": "选项A"},
            {"id": "1", "name": "选项B"},
            {"id": "2", "name": "选项C"}
        ],
        "xtype": "checkboxlist",
        "dataSize": 6,
        "col":2
    },
    {//数值
        "name": "XZ",
        "dataType": "int",
        "caption": "学制",
        "checkType": "integer+",
        "xtype":"number",
        "dataSize": 6,
  			"placeholder":"整数类型校验"
    },
    {//附件
        "name": "ZSFJ",
        "caption": "学生附件\n",
        "JSONParam": "{'size': 2048}",
        "col": 3,
        "xtype": "cache-upload",
        "required": true,
        "col":3,
        "dataSize": 40
    },
    {//数字区间
        "name": "XF",
        "xtype":"number-range",
        "caption": "数字区间",
        "col":2,
  		"placeholder":"数字类型校验"
    },
    {
        "name": "XF1",
        "dataType": "double",
        "caption": "学费",
  		"placeholder":"数字类型校验"
    },
    {//多行文本域
        "name": "YLCS",
        "dataType": "BigString",
        "caption": "压力测试",
        "xtype": "textarea",
        "dataSize": 4000
    }
];
//调用WIS_EMAP_SERV，合并model
formModel = WIS_EMAP_SERV.convertModel(formModel,"form");
//生成emapForm
$('#contanierName').emapForm({
  data: datamModel,
  model: 't',
  cols: 3
});

这里的emapForm构建没有借助emap的数据模型的配置，数据模型dataModel由自己按照需要生成，适用于动态构建一个form，且form的类型不定。

自定义dataModel需要借助下面的语句来合成模型：

formModel = WIS_EMAP_SERV.convertModel(formModel,"form");

/**
     * @method convertModel
     * @description 转换模型，给模型字段项加上get方法
     * @param {Object} model - 数据模型
     * @param {String} [type] - 类型 可选值  'form' 'grid' 'search'
     * @example 
     * WIS_EMAP_SERV.convertModel(dataModel);
     */
    WIS_EMAP_SERV.convertModel = function(model, type) {

下面这个js代码段是生成emapForm的规范格式，

var formObj = $("#containerName").emapForm({
			root: WIS_EMAP_SERV.getContextPath(),
			data: datamodel,
			textareaEasyCheck: true,
			readonly: (readonly == true) ? true : false,
			cols: (columns && !(isNaN(columns))) ? parseInt(columns) : 3,
			model: model ? model : "h",
			inputWidth: inputWidth ? inputWidth : '6',
			defaultOptions: defaultOption
		});

emapForm内的参数项（对数据模型是包含关系）

名称	类型	属性	默认值	描述
`data`	Object			表单数据模型
`root`	String	<optional>		emap根路径
`readonly`	Boolean	<optional>	false	是否只读，注意readonly为true时，不能和 model=t参数同时使用
`model`	Sring	<optional>	h	表单布局方式可选值 'h' 水平布局 'v'' 垂直布局 't' 表格布局 ; 只在非只读表单中生效
`cols`	Int	<optional>	3	表单布局列数，只在只读表单和表格表单中生效，可选值 1 2 3
`validate`	Boolean	<optional>	true	是否开启表单校验
`renderByGroup`	Boolean	<optional>	true	在模型中有分组的情况下，是否按照分组进行渲染
`autoColumn`	Boolean	<optional>	true	只读表单和表格表单列宽是否自动补齐
`inputWidth`	Int	<optional>	6	水平布局表单，表单控件所占宽度可选1-12
`defaultOptions`	Object	<optional>		控件默认配置参数，是针对表单中的相同类型控件批量设置的参数，如给所有的单选下拉框统一设置开启搜索功能 $('#form').emapForm({ data: data, defaultOptions: { select: { search: true } } }) 若需要给单独字段设置额外配置参数，请在模型的JSONParam中实现
`itemOptions`	Object	<optional>		控制指定字段的参数
`showCollapseBtn`	Boolean	<optional>	false	分组表单是否显示展开收起按钮
`showDisableLockedIcon`	Boolean	<optional>	false	表格表单 disable 项控件右侧是否展示小锁icon
`flexLayout`	Boolean	<optional>	false	只读表单和表格表单是否启用flex布局，此选项ie9 ie10不兼容
`useNewDropdownTree`	Boolean	<optional>	false	是否使用新的Ztree下拉树来替换现有的下拉树

/**
   * @memberof module:emapForm
   * @prop {Object}  [data] - 表单数据模型
   * @prop {String}  [root] - emap根路径
   * @prop {Boolean} [readonly=false] - 是否只读
   * @prop {Sring}   [model=h] - 表单布局方式 可选值 'h' 水平布局 'v'' 垂直布局 't' 表格布局 
   * @prop {Int}     [cols=3] - 表单布局列数，只在只读表单和表格表单中生效，可选值  1 2 3
   * @prop {Boolean} [validate=true] - 是否开启表单校验
   * @prop {Boolean} [renderByGroup=true] - 在模型中有分组的情况下，是否按照分组进行渲染
   * @prop {Boolean} [autoColumn=true] - 只读表单和表格表单列宽是否自动补齐
   * @prop {Int}     [inputWidth=6] - 水平布局表单，表单控件所占宽度 可选1-12
   * @prop {Object}  [defaultOptions] - 控件默认配置参数， 是针对表单中的相同类型控件批量设置 
                                        的参数，如给所有的单选下拉框统一设置开启搜索功能
    $('#form').emapForm({
       data: data,
       defaultOptions: {
         select: {
             search: true
         }
       }
    })
    若需要给单独字段设置额外配置参数，请在模型的JSONParam中实现
   * @prop {Object} [itemOptions] - 控制指定字段的参数
   * @prop {Boolean} [showCollapseBtn=false] - 分组表单是否显示 展开收起按钮
   * @prop {Boolean} [showDisableLockedIcon=false] - 表格表单 disable 项 控件右侧是否展示 小锁icon
   * @prop {Boolean} [flexLayout=false] - 只读表单和表格表单是否启用flex布局，**此选项ie9 ie10不兼容**
   * @prop {Boolean} [useNewDropdownTree=false] - 是否使用新的Ztree下拉树来替换现有的下拉树
   * @prop {object}  [multi-tree2]-使用新的Ztree下拉树来替换现有的下拉树
   */
  $.fn.emapForm.defaults = {
    readonly: false, // 是否只读
    model: 'h', // 编辑表单样式  h  v
    cols: '3', // 只读表单 列数
    root: "", // emap根路径
    validate: true, // 是否开启校验
    renderByGroup: true, // 按照分组渲染表单
    autoColumn: true, // 只读表单列宽自动补齐
    inputWidth: '6', // 水平表单 表单控件所占列数  默认6  最高12
    showCollapseBtn: false, // 分组表单是否显示 展开收起按钮
    showDisableLockedIcon: false, // 表格表单 disable 项 控件右侧是否展示 小锁icon
    flexLayout: false
  };
}).call(this);

数据模型dataModel的参数可选项全集包括如下：

属性	描述	数据类型	默认值
name	数据项名称	String	空
caption	显示文字	String	空
xtype	显示控件类型	Enum	text
hidden	是否隐藏	Boolean	false
placeholder	提示文字	String	空
optionData	数据选项	Array	空
required	必填	Boolean	false
defaultValue	默认值	String	空
format	日期、数字组件专用	String	空
col	所占列数	Integer	1
dataSize	最大长度校验值	Integer	空
checkType	校验类型	Enum	空
JSONParam	传递个实际组件的参数	Object	空

各个参数含义：

col：字段所占列数，只在只读表单和表格表单中生效，可选值 1 2 3

xtype：显示类型，

JSONParam：该参数中的值将会被传递给实例化组件，用于个性化参数设置，例如{'displayMember':'name'} ，一般在模型中配置

emapForm使用

数据模型dataModel的参数可选项全集包括如下：

相关阅读

相关文章

相关问答

相关文档