Jformparser 开发指南

简介

根据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"}}
            ]
          }
        ]
      }
    ]
  }
  ]
}

属性

导航栏属性

表单页模板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"}
      ]
    }
  ]
}

属性

导航栏属性

容器组件

容器组件，顾名思义

面板panel

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

结构

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

属性

表格grid

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

结构

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

属性

地图组件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
        }]
}

属性

数据表格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"}}
            ]
          }
        ]
}

属性

column属性

基础表单组件

富文本框editor

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

结构

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

属性

文本域text

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

结构

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

属性

多行文本textarea

textarea多行文本域组件

结构

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

属性

下拉框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"}
          ]
}

属性

复选框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"}
          ]
}

属性

单选框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"}
          ]
}

属性

自定义组件

素材上传fileupload

fileupload上传组件，可以上传图片（可预览）、音频等素材

结构

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

属性

图集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"
}

属性

其他

按钮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"}
}

属性