开发日志:表单解析 LeipiFormDesign
PHP版本:https://gitee.com/yxkj_2/LeipiFormDesigner/blob/LeipiFormDesigner/Formdesign4_1/php/Formdesign.class.php
js版本:
var leipiFormDesign = { /*执行控件*/ exec: function (method) { ue.execCommand(method); }, /* Javascript 解析表单 template 表单设计器里的Html内容 fields 字段总数 */ parse_form: function (template, fields) { //正则 radios|checkboxs|select 匹配的边界 |--| 因为当使用 {} 时js报错 var preg = /(\|-<span[^>]*leipiplugins=\"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi, preg_attr = /(\w+)=\"(.?|.+?)\"/gi, preg_group = /<input.*?\/>/gi; if (!fields) fields = 0; var template_parse = template, template_data = new Array(), add_fields = new Object(), checkboxs = 0; var pno = 0; template.replace(preg, function (plugin, p1, p2, p3, p4, p5, p6) { var parse_attr = new Array(), attr_arr_all = new Object(), name = '', select_dot = '', is_new = false; var p0 = plugin; var tag = p6 ? p6 : p4;if (tag == 'radios' || tag == 'checkboxs') { plugin = p2; } else if (tag == 'select') { plugin = plugin.replace('|-', ''); plugin = plugin.replace('-|', ''); } plugin.replace(preg_attr, function (str0, attr, val) { if (attr == 'name') { return; } if (attr == 'title') { //如果是title,强制转成name if (!attr_arr_all['name']) attr_arr_all['name'] = val; parse_attr.push({ name: val }); name = val; } if (tag == 'select' && attr == 'value') { if (!attr_arr_all[attr]) attr_arr_all[attr] = ''; attr_arr_all[attr] += select_dot + val; select_dot = ','; } else { attr_arr_all[attr] = val; } var oField = new Object(); oField[attr] = val; parse_attr.push(oField); }) /*alert(JSON.stringify(parse_attr));return;*/ if (tag == 'checkboxs') /*复选组 多个字段 */ { plugin = p0; plugin = plugin.replace('|-', ''); plugin = plugin.replace('-|', ''); var name = 'checkboxs_' + checkboxs; attr_arr_all['parse_name'] = name; attr_arr_all['name'] = ''; attr_arr_all['value'] = ''; attr_arr_all['content'] = '<span leipiplugins="checkboxs" title="' + attr_arr_all['title'] + '">'; var dot_name = '', dot_value = ''; p5.replace(preg_group, function (parse_group) { var is_new = false, option = new Object(); parse_group.replace(preg_attr, function (str0, k, val) { if (k == 'name') { if (val == 'leipiNewField') { is_new = true; fields++; val = 'data_' + fields; } attr_arr_all['name'] += dot_name + val; dot_name = ','; } else if (k == 'value') { attr_arr_all['value'] += dot_value + val; dot_value = ','; } option[k] = val; }); if (!attr_arr_all['options']) attr_arr_all['options'] = new Array(); attr_arr_all['options'].push(option); //if(!option['checked']) option['checked'] = ''; var checked = option['checked'] != undefined ? 'checked="checked"' : ''; attr_arr_all['content'] += '<input type="checkbox" name="' + option['name'] + '" value="' + option['value'] + '" ' + checked + '/>' + option['value'] + ' '; if (is_new) { var arr = new Object(); arr['name'] = option['name']; arr['leipiplugins'] = attr_arr_all['leipiplugins']; add_fields[option['name']] = arr; } }); attr_arr_all['content'] += '</span>'; //parse template = template.replace(plugin, attr_arr_all['content']); template_parse = template_parse.replace(plugin, '{' + name + '}'); template_parse = template_parse.replace('{|-', ''); template_parse = template_parse.replace('-|}', ''); template_data[pno] = attr_arr_all; checkboxs++; } else if (name) { if (tag == 'radios') /*单选组 一个字段*/ { plugin = p0; plugin = plugin.replace('|-', ''); plugin = plugin.replace('-|', ''); attr_arr_all['value'] = ''; attr_arr_all['content'] = '<span leipiplugins="radios" name="' + attr_arr_all['name'] + '" title="' + attr_arr_all['title'] + '">'; var dot = ''; p5.replace(preg_group, function (parse_group) { var option = new Object(); parse_group.replace(preg_attr, function (str0, k, val) { if (k == 'value') { attr_arr_all['value'] += dot + val; dot = ','; } option[k] = val; }); option['name'] = attr_arr_all['name']; if (!attr_arr_all['options']) attr_arr_all['options'] = new Array(); attr_arr_all['options'].push(option); //if(!option['checked']) option['checked'] = ''; var checked = option['checked'] != undefined ? 'checked="checked"' : ''; attr_arr_all['content'] += '<input type="radio" name="' + attr_arr_all['name'] + '" value="' + option['value'] + '" ' + checked + '/>' + option['value'] + ' '; }); attr_arr_all['content'] += '</span>'; } else { attr_arr_all['content'] = is_new ? plugin.replace(/leipiNewField/, name) : plugin; } //attr_arr_all['itemid'] = fields; //attr_arr_all['tag'] = tag; template = template.replace(plugin, attr_arr_all['content']); template_parse = template_parse.replace(plugin, '{' + name + '}'); template_parse = template_parse.replace('{|-', ''); template_parse = template_parse.replace('-|}', ''); if (is_new) { var arr = new Object(); arr['name'] = name; arr['leipiplugins'] = attr_arr_all['leipiplugins']; add_fields[arr['name']] = arr; } template_data[pno] = attr_arr_all; } pno++; }) var parse_form = new Object({ 'Fields': fields,//总字段数 'Content': template,//完整html 'ContentParse': template_parse,//控件替换为{data_1}的html 'ContentData': JSON.stringify(template_data),//控件属性 'add_fields': add_fields//新增控件 }); return parse_form; }, /*type = save 保存设计 versions 保存版本 close关闭 */ fnCheckForm: function (type) { if (ue.queryCommandState('source')) ue.execCommand('source');//切换到编辑模式才提交,否则有bug if (ue.hasContents()) { ue.sync();/*同步内容*/ return false; } else { layer.msg('表单内容不能为空!'); $('#submitbtn').button('reset'); return false; } }, /*预览表单*/ fnReview: function () { if (ue.queryCommandState('source')) ue.execCommand('source');/*切换到编辑模式才提交,否则部分浏览器有bug*/ if (ue.hasContents()) { ue.sync(); /*同步内容*/ //--------------以下仅参考------------------------------------------------------------------- /*设计form的target 然后提交至一个新的窗口进行预览*/ var fields = $("#Fields").val(), formeditor = ''; //获取表单设计器里的内容 formeditor = ue.getContent(); //解析表单设计器控件 var parse_form = this.parse_form(formeditor, fields); var forms1 = parse_form.Content; win_parse = window.open('', '', 'width=800,height=400,alwaysRaised=yes,top=100,left=200'); var str = '<div style="width:500px;height:300px;border:1px solid grey">' + forms1 + '</div>'; win_parse.document.write(forms1); win_parse.focus(); } else { alert('表单内容不能为空!'); return false; } } };
C#版本:
using System; using System.Text.RegularExpressions; using System.Collections.Generic; using System.Collections; using System.Data; namespace System { public class LeipiFormDesign { //https://gitee.com/yxkj_2/LeipiFormDesigner/blob/LeipiFormDesigner/Formdesign4_1/php/Formdesign.class.php public static Dictionary<string, object> parse_form(string template) { bool is_new = false; /* 获取标签 //正则 radios|checkboxs|select js 匹配的边界 |--| 因为当使用 {} 时js报错 php 要保持一致,也使用 |--| 也可以是直接 {|- -|} */ string preg = @"(\|-<span[^>]*leipiplugins[^>]*>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))"; //获取属性 修改为可变 的匹配 string preg_attr = "(\\w+)=\"(.?|.+?)\""; //获取单选组复选 string preg_group = "<input[^>]*/>"; string template_parse = template; var ret_form = new Dictionary<string, object>(); var template_data = new Dictionary<string, object>(); var add_fields = new Dictionary<string, object>(); var regex = new Regex(preg, RegexOptions.IgnoreCase | RegexOptions.Multiline | RegexOptions.CultureInvariant); var match = regex.Matches(template_parse); if (match.Count > 0) { for (int i = 0; i < match.Count; i++) { Match m = match[i]; string plugin = m.ToString().Replace("|-", "").Replace("-|", ""); string tag = string.IsNullOrWhiteSpace(m.Groups[3].Value) ? m.Groups[4].Value : m.Groups[3].Value; string name = "", leipiplugins = "", select_dot = ""; is_new = false; //radios|checkboxs|select if (plugin.Contains("radios")) { tag = "radios"; } else if (plugin.Contains("checkboxs")) { tag = "checkboxs"; } else if (plugin.Contains("select")) { tag = "select"; } else if (plugin.Contains("img")) { tag = "img"; } else if (plugin.Contains("textarea")) { tag = "textarea"; } //获取属性 var attr_arr_all = new Dictionary<string, object>(); var parse_attr = Regex.Matches(plugin, preg_attr); foreach (Match pa in parse_attr) { string attr = pa.ToString(); if (!string.IsNullOrWhiteSpace(attr)) { var key = pa.Groups[1].Value.Trim(); var val = pa.Groups[2].Value.Trim(); if (key == "id") { name = val; } else if (key == "name" && (tag == "radios" || tag == "checkboxs")) { name = val; attr_arr_all.AddOrTry("id", val); } if (key == "value" && (tag == "radios" || tag == "checkboxs")) { select_dot += val + ","; } else { attr_arr_all.AddOrTry(key, val); } } } if (!string.IsNullOrWhiteSpace(select_dot)) { attr_arr_all.AddOrTry("value", select_dot); select_dot = ""; } if (tag == "checkboxs") { attr_arr_all.AddOrTry("content", plugin); } else if (!string.IsNullOrWhiteSpace(name)) { if (tag == "radios") { attr_arr_all.AddOrTry("content", plugin); } else { if (is_new) { attr_arr_all.AddOrTry("content", plugin.Replace("leipiNewField", name)); } else { attr_arr_all.AddOrTry("content", plugin); } } template = template.Replace(plugin, attr_arr_all["content"].ToString()); template_parse = template_parse.Replace(plugin, "{" + name + "}"); template_parse = template_parse.Replace("{|-", "").Replace("-|}", "");//清空边界 if (is_new) { add_fields.AddOrTry(name, attr_arr_all["leipiplugins"]); } template_data.AddOrTry(name, attr_arr_all); } } } ret_form.Add("fields", template_data.Count); ret_form.Add("template", template);//完整html ret_form.Add("parse", template_parse);//控件替换为{data_1}的html ret_form.Add("data", template_data.ToJson());//控件属性 ret_form.Add("add_fields", add_fields);//新增控件 return ret_form; } } }