Jformparser 开发指南

2017/04/29 开源 浏览

简介

根据json结构,生成页面,达到解放后端开发人员的目的,降低后端对前端开发要求,后端专心开发后台接口等服务程序, 前期以表单元素为主,后期会增加更多页面元素的支持,敬请期待

JFormParser依赖:目前主要依赖bootstrap css框架、jQuery两大流行核心组件,设计之初想法是降低对各个插件的依赖耦合度,构造的 页面元素使用其他插件也能达到多样化可替换,使得页面效果更加丰富

码云地址:JFormParser

JFormParser元素

  • editor(富文本插件),富文本插件原打算使用百度的ueditor插件,因公司购买富文本插件强制需要使用,所以这里 使用ewebeditor插件,使用该插件需要依赖服务器环境,并且部署上线需要授权,否则无法使用.
  • text(基本文本框):文本域,文本域是很强大的一种表单元素,JFormParser目前只要支持以下几种数据类型的文本域
    • normal:常规文本域,无任务效果
    • email:只支持邮件形式的文本输入,会自检非其他格式数据
    • number:整数文本域,只支持输入整数,会自检非其他格式数据
    • decimal:小数文本域
    • datetime:日期类型,目前使用的插件是My97DatePicker日期插件,所以依赖WdatePicker.js文件
  • textarea(多行文本域):多行文本域
  • select(下拉框):下拉框元素,下拉框涉及数据初始化的原因,所以插件提供了remote_url属性通过后台加载数据初始化
  • panel(面板):面板组件,是一个容器组件
  • grid(表格):表格组件,这里的表格无任何特殊意义,仅仅只是为了页面布局,同panel一样,也是容器组件
  • checkboxGroup:复选框组组件
  • radioGroup:单选框组组件
  • button:按钮(普通按钮、提交按钮、返回按钮、、、、等)
  • buttonGroup:按钮组,是一个容器组件,包含按钮的组合,
  • datagrid:表格展示组件,依赖元数据查询组件
  • fileupload:文件上传
  • images:图集上传组件
  • bMap:地图拾取经纬度坐标组件,依赖于百度js地图(http://lbsyun.baidu.com/index.php?title=jspopular)

页面template

页面template主要是模板页,更多的是提供布局功能,现在主要包含两个模板

列表页模板list

list模板页面主要是用于展现数据列表页

列表页

模板结构

{
  "component_name":"scenic_form",
  "component_title":"景区form",
  "template_type":"list",
  "navs_title":"景区标准化管理 > 景区管理 > 景区列表",
  "navs":[{"title":"景区标准化管理","icon":"","url":""},{"title":"景区管理","icon":""},{"title":"景区列表","icon":""}],
  "resource_name":"scenic_info",
  "submit_url":"/cms/template/submit.htm",
  "childrens":[{
    "element_type":"panel",
    "element_title":"景区查询",
    "whether_header":false,
    "whether_border":false,
    "container":true,
    "childrens":[
      {
        "element_type":"datagrid",
        "element_title":"景区查询",
        "is_remote":true,
        "is_operate":true,
        "operate_title":"操作",
        "operate_buttons":[
          {"element_type":"button","type":"edit","element_title":"编辑","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/scenic/scenic_form.json"}},
          {"element_type":"button","type":"delete","element_title":"图片","remote_url":"/cms/template/delete.htm"},
          {"element_type":"button","type":"delete","element_title":"视频","remote_url":"/cms/template/delete.htm"},
          {"element_type":"button","type":"delete","element_title":"音频","remote_url":"/cms/template/delete.htm"},
          {"element_type":"button","type":"delete","element_title":"删除","remote_url":"/cms/template/delete.htm"}],
        "pagination":true,
        "remote_url":"/cms/template/get_remote_list.htm",
        "columns":[
		{"field":"title","title":"景区名称"},
		{"field":"level","title":"景区等级"},
		{"field":"lawyer","title":"法人代表"},
		{"field":"person_liable","title":"负责人"},
		{"field":"phone","title":"手机号码"},
		{"field":"tel","title":"电话"},
		{"field":"fax","title":"传真"},
		{"field":"approve_date","title":"批准时间"},
		{"field":"approve_date","title":"地理位置"}],
        "childrens":[
          {
            "element_type":"text",
            "element_title":"景区名称",
            "meta_column":"title",
            "is_query":true,
            "direction":"left",
            "width":"100%"
          },{
            "element_type":"text",
            "element_title":"景区等级",
            "meta_column":"level",
            "is_query":true,
            "direction":"left",
            "width":"100%"
          },{
            "element_type":"button",
            "element_title":"查询",
            "type":"query",
            "remote_url":"/cms/template/get_remote_list.htm",
            "params": {
              "params": "{resource_name: scenic_info}"
            }
          },{
            "element_type":"buttonGroup",
            "element_title":"操作按钮组",
            "align":"left",
            "childrens":[
              {"element_type":"button","type":"link","element_title":"新增景区","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/scenic/scenic_form.json"}},
              {"element_type":"button","type":"link","element_title":"删除","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/scenic/scenic_form.json"}},
              {"element_type":"button","type":"link","element_title":"导入","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/scenic/scenic_form.json"}},
              {"element_type":"button","type":"link","element_title":"导出","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/scenic/scenic_form.json"}}
            ]
          }
        ]
      }
    ]
  }
  ]
}

属性

字段 类型 说明 是否必填 默认值 其他
component_name string temp页面组件名称  
component_title string temp页面组件title  
template_type string temp页面类型,目前2中,分别为:list、form  
navs_title string 导航栏  
navs Array 导航栏,属性见导航栏  
resource_name string 展示元数据数据表名  
submit_url string 根据template_type类型不同有不同的意义,list为获取数据地址,form为提交表单地址  
container boolean 是否容器组件 true  
childrens Array 地图子组件,这里必包含2个经纬度文本域组件  

导航栏属性

字段 类型 说明 是否必填 默认值 其他
title string 导航栏名称  
icon string 图标  
url string 导航栏url  

表单页模板form

form模板页面主要是构建表单页面

结构

{
  "component_name":"trips_form",
  "component_title":"行程form",
  "template_type":"form",
  "navs_title":"信息管理 > 行程管理 > 行程维护",
  "navs":[{"title":"信息管理","icon":"","url":""},{"title":"行程管理","icon":""},{"title":"行程维护","icon":""}],
  "resource_name":"trips_info",
  "submit_url":"/cms/template/submit.htm",
  "init_url":"/cms/template/get_form_data.htm",
  "childrens":[
    {
      "element_type":"panel",
      "element_title":"基础信息",
      "container":true,
      "childrens":[
        {
          "element_type":"grid",
          "cols":3,
          "rows":"3",
          "childrens":[{
            "element_type":"text",
            "element_title":"行程名称",
            "meta_column":"title",
            "is_required":true
          },{
            "element_type":"select",
            "element_title":"行程类型",
            "is_required":true,
            "meta_column":"type",
            "is_fk":true,
            "fk_resource_name":"scenic_spot_info",
            "fk_meta_column":"id",
            "fk_meta_column_show":"title",
            "data":[
              {"text":"交通","value":"jt"},
              {"text":"会议","value":"hy"},
              {"text":"入住","value":"rz"},
              {"text":"用餐","value":"yc"},
              {"text":"考察","value":"kc"}
            ],
            "is_remote":false,
            "remote_url":""
          },{
            "element_type":"text",
            "element_title":"开始时间",
            "meta_column":"start_time",
            "is_required":true
          },{
            "element_type":"checkboxGroup",
            "element_title":"参与小组",
            "is_required":true,
            "meta_column":"team_infos",
            "fk_resource_name":"team_info",
            "fk_meta_column":"id",
            "fk_meta_column_show":"name",
            "is_remote":true,
            "width":"100%",
            "remote_url":"/cms/template/get_remote_data.htm"
          }]
        }
      ]
    },{
      "element_type":"panel",
      "element_title":"详情",
      "container":true,
      "childrens":[
        {
          "element_type":"editor",
          "meta_column":"intro",
          "width":"400px",
          "height":"300px"
        }
      ]
    },{
      "element_type":"buttonGroup",
      "element_title":"",
      "align":"center",
      "childrens":[
        {"element_type":"button","type":"submit","element_title":"提交","remote_url":"/cms/template/submit.htm","width":"80px","action_url":"/cms/template/template_list.htm","params":{"url":"/json/shengsi/trips/trips_list.json"}},
        {"element_type":"button","type":"link","element_title":"返回","remote_url":"/cms/template/template_list.htm","params":{"url":"/json/shengsi/trips/trips_list.json"},"width":"80px"}
      ]
    }
  ]
}

属性

字段 类型 说明 是否必填 默认值 其他
component_name string temp页面组件名称  
component_title string temp页面组件title  
template_type string temp页面类型,目前2中,分别为:list、form  
navs_title string 导航栏  
navs Array 导航栏,属性见导航栏  
resource_name string 展示元数据数据表名  
submit_url string 根据template_type类型不同有不同的意义,list为获取数据地址,form为提交表单地址  
container boolean 是否容器组件 true  
childrens Array 地图子组件,这里必包含2个经纬度文本域组件  

导航栏属性

字段 类型 说明 是否必填 默认值 其他
title string 导航栏名称  
icon string 图标  
url string 导航栏url  

容器组件

容器组件,顾名思义

面板panel

Panel组件是一个bootstrap风格的panel容器组件,使用该插件主要是为了表单页面布局,页面看上去更像一个整体,有整体性,页面美观

结构

{
	"element_type":"panel",
	"element_title":"资源信息",
	"container":true,
	"childrens":[...]
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
whether_header boolean 是否有header头 true  
whether_border boolean 面板是否有边框 true  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  
height string 地图初始高度  
container boolean 是否容器组件 true  
childrens Array 容器子组件集合,可包含任何其他组件  

表格grid

Grid组件是一个类似表格组件,包含几行几列等属性,不过这里不同于表格table,这里只是一个页面展示组件,用于页面布局,没有任何实际作用,同panel一样,是容器组件

结构

{
	"element_type":"grid",
	"element_title":"表格组件",
	"cols":3,
    "rows":"4",
	"container":true,
	"childrens":[...]
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
cols number 表格列 1  
rows number 表格行 1  
container boolean 是否容器组件 true  
childrens Array 容器子组件集合,可包含任何其他组件  

地图组件bMap

bmap组件是百度地图组件,地图组件必有两个子元素,都是文本域组件 经度、纬度两个字段

结构

{
        "element_type":"bMap",
        "id":"bmap",
        "center":"包头",
        "dragging":true,
        "scrollwheelzoom":true,
        "doubleclickzoom":true,
        "width":"100%",
        "height":"450px",
        "element_title":"位置信息",
        "container":true,
        "childrens":[{
          "element_type":"text",
          "element_title":"经度",
          "meta_column":"baidu_x",
          "map_element":true,
          "point":"lng",
          "width":"40%",
          "float":"left",
          "marginRight":"10px",
          "is_required":false
        },{
          "element_type":"text",
          "element_title":"纬度",
          "meta_column":"baidu_y",
          "map_element":true,
          "point":"lat",
          "width":"40%",
          "float":"left",
          "is_required":false
        }]
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
id string 地图组件唯一id编号  
center string 地图初始中央显示位置,eg:包头  
dragging boolean 地图是否允许拖动 false  
scrollwheelzoom boolean 地图是否允许缩放 false  
doubleclickzoom boolean 地图是否允许鼠标双击缩放层级 true  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  
height string 地图初始高度  
container boolean 是否容器组件 true  
childrens Array 地图子组件,这里必包含2个经纬度文本域组件  

数据表格datagrid

Datagrid组件是列表table展示数据组件

结构

{
        "element_type":"datagrid",
        "element_title":"交通查询",
        "is_remote":true,
        "is_operate":true,
        "operate_title":"操作",
        "operate_buttons":[
          {"type":"edit","element_type":"button","element_title":"编辑","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/traffic/traffic_form.json"}},
          {"type":"delete","element_type":"button","element_title":"删除","remote_url":"/cms/template/delete.htm"}],
        "pagination":true,
        "remote_url":"/cms/template/get_remote_list.htm",
        "columns":[
          {"field":"start_name","title":"出发城市"},
          {"field":"end_name","title":"到达城市"},
          {"field":"name","title":"航班号"},
          {"field":"first_time","title":"离港"},
          {"field":"last_time","title":"到港"},
          {"field":"type","title":"所属交通","rel_column":true,"rel_resource_name":"traffic_type"}],
        "childrens":[
          {
            "element_type":"text",
            "element_title":"出发城市",
            "meta_column":"start_name",
            "is_query":true,
            "direction":"left",
            "width":"100%"
          }, {
            "element_type":"text",
            "element_title":"到达城市",
            "meta_column":"end_name",
            "is_query":true,
            "direction":"left",
            "width":"100%"
          },{
            "element_type":"select",
            "element_title":"所属交通",
            "is_required":true,
            "meta_column":"traffic_id",
            "is_fk":true,
            "fk_resource_name":"traffic_type",
            "fk_meta_column":"id",
            "fk_meta_column_show":"type",
            "is_remote":true,
            "rules":"is_email",
            "message":"",
            "remote_url":"/cms/template/get_remote_data.htm"
          },{
            "element_type":"button",
            "element_title":"查询",
            "type":"query"
          },{
            "element_type":"buttonGroup",
            "element_title":"操作按钮组",
            "align":"left",
            "childrens":[
              {"element_type":"button","type":"link","element_title":"添加班次","remote_url":"/cms/template/template_form.htm","params":{"url":"/json/baotou/traffic/traffic_form.json"}}
            ]
          }
        ]
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
is_remote boolean 是否远程ajax加载数据,如果为false,data本地数据源字段必填,否则无数据展示 false  
remote_url string 远程ajax加载数据url地址  
is_operate boolean 是否包含操作栏 true  
operate_title string 操作栏抬头title true  
operate_buttons Array 操作栏按钮集合,列如编辑、删除等等,具体按钮明细属性请参考button按钮 true  
pagination boolean 是否分页 false  
data Array local数据源,和column列数据一一格式对应,例如:[{"start_name":"北京","end_name":"杭州","name":"T2XDD","first_time":"8:00","last_time":"17:00","type":"飞机"}...] true  
columns Array 列集合明细,具体属性请参考column属性  
container boolean 是否容器组件 true  
childrens Array 容器子组件集合,可包含任何其他组件,这里datagrid包含的子组件仅仅是查询框组件  

column属性

字段 类型 说明 是否必填 默认值 其他
field string 字段名称  
title string 显示列title  
rel_column boolean 是否多表关联查询,表关联查询情况,且列上需要展示关联表字段的时候,该字段为true,值为关联表字段 false  
rel_resource_name string 外联表资源名称  

基础表单组件

富文本框editor

editor组件是一个富文本组件,这里使用的公司购买的ewebeditor插件,修改了ewebeditor部分源码,后台上传的资源全部上传到云数据中心

结构

{
          "element_type":"editor",
          "element_title":"详情",
          "meta_column":"detail_intro",
          "width":"400px",
          "is_required":true,
          "height":"300px"
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
is_required boolean 是否必输项 false  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  
height string 地图初始高度  

文本域text

text普通文本域组件,提供各种数据格式的支持,包括(整数、小数、身份证、时间)等等

结构

{
            "element_type":"text",
            "element_title":"资讯时间",
            "data_type":"datetime",
            "formatter":"yyyy-MM-dd",
            "is_required":true,
            "meta_column":"scenic_time"
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
is_required boolean 是否必输项 false  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  
defaultValue string 默认值  
float string float位置:left、right  
marginRight string 右间距,例如10px;  
data_type string 数据类型,分为[“normal”,”email”,”number”,”decimal”,”datetime”,”card”..普通文本、邮箱、整数、小数、身份证] normal  
formatter string 数据类型为日期时,该值启用 yyyy-MM-dd  
map_element boolean 是否是地图经纬度元素,配合父元素为bmap类型使用 false  
point string 如果为地图经纬度元素,该值必填,值(lng、lat)经度、纬度,配合父元素为bmap类型使用  
is_query boolean 是否为查询元素 false  

多行文本textarea

textarea多行文本域组件

结构

{
            "element_type":"textarea",
            "element_title":"简介",
            "is_required":true,
            "meta_column":"intro",
            "width":"100%"
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
is_required boolean 是否必输项 false  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  
defaultValue string 默认值  

下拉框select

select下拉框组件,可以根据url远程加载数据,也可以是local 数据

结构

{
            "element_type":"select",
            "element_title":"所属景区",
            "is_required":true,
            "meta_column":"scenic_id",
            "is_fk":true,
			"width":"100%",
            "fk_resource_name":"scenic_info",
            "fk_meta_column":"id",
            "fk_meta_column_show":"title",
            "is_remote":true,
            "rules":"is_email",
            "message":"",
            "remote_url":"/cms/template/get_remote_data.htm",
			"data":[
            {"text":"AAAAA","value":"5A"},
            {"text":"AAAA","value":"4A"},
            {"text":"AAA","value":"3A"},
            {"text":"AA","value":"2A"}
          ]
}

属性

           
字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
is_remote boolean 是否远程ajax加载数据,如果为false,data本地数据源字段必填,否则无数据展示 false  
remote_url string 远程ajax加载数据url地址  
is_fk boolean 是否关联表查询获取数据 false  
fk_resource_name string 关联表名  
fk_meta_column string 关联列字段  
fk_meta_column_show string 关联显示列字段  
data Array local数据源,text:文本、value:值[ {"text":"AAAAA","value":"5A"}, {"text":"AAAA","value":"4A"}, {"text":"AAA","value":"3A"}, {"text":"AA","value":"2A"} ] true  

复选框checkboxGroup

checkboxGroup复选框组件,这里是复选框组,支持远程获取字典项

结构

{
            "element_type":"checkboxGroup",
            "element_title":"参与小组",
            "is_required":true,
            "meta_column":"scenic_id",
            "is_fk":true,
			"width":"100%",
            "fk_resource_name":"scenic_info",
            "fk_meta_column":"id",
            "fk_meta_column_show":"title",
            "is_remote":true,
            "rules":"is_email",
            "message":"",
            "remote_url":"/cms/template/get_remote_data.htm",
			"data":[
            {"text":"AAAAA","value":"5A"},
            {"text":"AAAA","value":"4A"},
            {"text":"AAA","value":"3A"},
            {"text":"AA","value":"2A"}
          ]
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
is_required boolean 是否必输项 false  
is_remote boolean 是否远程ajax加载数据,如果为false,data本地数据源字段必填,否则无数据展示 false  
remote_url string 远程ajax加载数据url地址  
is_fk boolean 是否关联表查询获取数据 false  
fk_resource_name string 关联表名  
fk_meta_column string 关联列字段  
fk_meta_column_show string 关联显示列字段  
data Array local数据源,text:文本、value:值[ {"text":"AAAAA","value":"5A"}, {"text":"AAAA","value":"4A"}, {"text":"AAA","value":"3A"}, {"text":"AA","value":"2A"} ] true  

单选框radioGroup

radioGroup下拉框组件,可以根据url远程加载数据,也可以是local 数据

结构

{
            "element_type":"radioGroup",
            "element_title":"景区级别",
            "is_required":true,
            "meta_column":"scenic_id",
            "is_fk":true,
			"width":"100%",
            "fk_resource_name":"scenic_info",
            "fk_meta_column":"id",
            "fk_meta_column_show":"title",
            "is_remote":false,
            "rules":"is_email",
            "message":"",
            "remote_url":"/cms/template/get_remote_data.htm",
			"data":[
            {"text":"AAAAA","value":"5A"},
            {"text":"AAAA","value":"4A"},
            {"text":"AAA","value":"3A"},
            {"text":"AA","value":"2A"}
          ]
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
is_required boolean 是否必输项 false  
is_remote boolean 是否远程ajax加载数据,如果为false,data本地数据源字段必填,否则无数据展示 false  
remote_url string 远程ajax加载数据url地址  
is_fk boolean 是否关联表查询获取数据 false  
fk_resource_name string 关联表名  
fk_meta_column string 关联列字段  
fk_meta_column_show string 关联显示列字段  
data Array local数据源,text:文本、value:值[ {"text":"AAAAA","value":"5A"}, {"text":"AAAA","value":"4A"}, {"text":"AAA","value":"3A"}, {"text":"AA","value":"2A"} ] true  

自定义组件

素材上传fileupload

fileupload上传组件,可以上传图片(可预览)、音频等素材

结构

{
        "element_type":"fileupload",
        "element_title":"交通主图",
        "meta_column":"logo_image"
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
is_required boolean 是否必输项 false  

图集images

Images图集组件,该组件和后台CMS绑定,需要一张素材表cms_material_info

结构

{
          "element_type":"images",
          "id":"scenic_images",
          "is_required":true,
          "is_fk_resource":true,
          "fk_resource_name":"cms_material_info",
          "service":"materialService",
          "remote_url":"/cms/images/get_remote_data.htm",
          "width":"400px",
          "height":"300px"
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
meta_column string 表单name字段,元数据字段  
id string 图集id  
service string 后台service业务名称  
remote_url string 图集初始化url  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  
height string 图集高度  
is_required boolean 是否必输项 false  

其他

按钮button

结构


{
	"element_type":"button",
	"type":"submit",
	"element_title":"提交",
	"remote_url":"/cms/template/submit.htm",
	"width":"80px",
	"action_url":"/cms/template/template_list.htm",
	"params":{"url":"/json/shengsi/scenic/scenic_list.json"}
}

属性

字段 类型 说明 是否必填 默认值 其他
element_type string 组件类型  
element_title string 组件title  
type string 按钮类型,目前有[submit、link、query、edit、delete]五种类型,提交、连接跳转、查询、编辑、删除  
remote_url string 根据type类型,有不同的意义,例如是submit,这里则表示提交地址,如未link,这里则为跳转地址  
params object event点击事件,remote_url后面参数  
action_url string callback后执行地址  
width string 地图初始宽度,可以是百分比,可以是像素值,例如:100% 或者400px;  

站内搜索

    TorchV Bot开放试用中......

    最新内容,关注“八一菜刀”公众号

    Table of Contents