JFormParser

The JFormParser plugin: creating a web page based on the JSON structure, and achieve liberation back-end developers to reduce back-end requirements for front-end development, is focused on developing interface background service program, the form elements, later will add more page elements support

Online document

https://xiaoymin.github.io/JFormParser-doc/

JFormParser Component dependency

At present mainly rely on bootstrap CSS framework, jQuery top two core components, the beginning of the design idea is to reduce the dependence on the plug-in coupling, the page elements used to construct the other plug-ins can achieve diversification can be replaced, which makes the page effect more abundant

Each components:

bootstrap : v3.3.5
jQuery : 1.9.1
layer : v2.2
WdatePicker : v4.8
jQWidgets : v3.9.1

JFormParser element

Depending on the number of elements to build a colorful page, the current support for the plug-in is as follows:

Editor (rich text plugin): rich text plugin here using EWEBEDITOR plugin
Textarea (multi line text field): multi line text field
select (drop down box): drop-down box element, the drop-down box involves the cause of data initialization, so the plugin provides the remote_url attribute to initialize the data through the background loading Panel (panel): panel component is a container component
grid (table): form component, the table here has no special meaning, just for the page layout, the same as panel, but also the container component
checkboxGroup: check box group
RadioGroup: single box assembly
button: button (ordinary button, submit button, return button,,,,, etc.)
the buttonGroup: button group is a container component that contains a combination of buttons,
datagrid: table display component, dependent metadata query component
fileupload: file upload
Images: upload component Atlas
BMap: pick up the latitude and longitude coordinates of the map component, depending on the Baidu JS map (http://lbsyun.baidu.com/index.php? Title=jspopular)
text (basic text box): text field, the text field is a powerful form element, JFormParser now supports the text field of the following data types
- Normal: regular text field, no task effect
- email: only supports text input in the form of a message, and will self check other non formatted data
- number: integer text field, only to support the input integer, self inspection and other non format data
- decimal: decimal text field
- datetime: date type, the plugin currently used is the My97DatePicker date plug, so rely on the WdatePicker.js file

JFormParser page template

At present, the template is mainly two, one is the list page template, a FORM form page template

list template

JSON structure example:

{
  "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"}}
            ]
          }
        ]
      }
    ]
  }
  ]
}

The results are as follows

FORM form template