自定义表单html:,自定义表单、流程、菜单开发小结

最近在做自定义表单、自定义流程、自定义菜单,由于某些原因,现在这个项目正处于停滞状态。但核心功能已实现,做点总结拿出来分享。

请大家勿喷。

自定义表单:

在编码中首先解决的是如何将组件存储、如何取出的问题。我现采用的方式是在保存表单时将操作区域的HTML片段进行处理后进行存储,编辑时取出HTML片段后对特定的样式进行处理。

当表单保存后对当前表单的使用,由于表单中集成了uedit,JS模拟的单选、多选及上传等功能,在表单使用前需要对取出的HTML版段进行再次编译。这就需要在编码时对代码进行封装,提供更类初化方法。我现在使用初始化方法如下:

/*

【用于流程产生的内容页】

@init_simulate_data:初始化模拟元素【单选、多选、下拉、联系人】,并在其拥有值的情况下进行赋值

*/

,init_simulate: function(){

publicFunction._radio(); //初始化模拟单选

publicFunction._checkbox(); //初始化模拟多选

setForm.for_checkboxAndRadio(); //为单选多选进行附值

setForm.for_select(); //初始化模拟下拉框,并附值

setForm.for_lxr();//初始化联系人控件,并为其已选中的值进行赋值操作

publicFunction.UEditInit(); //初始化页面中的UEdit插件

}

自定义表单操作界面:

154015758.jpg

自定义流程:流程中首先需要处理的问题便是链线问题。项目启动时,一直不能确定是否封装浏览器链线方法还是用SVG实现。(总想有个机会写写canvas)现在的链线并不完美,但基本功能已实现,等项目重新启动后再进行优化。SVG链线这块,需要注意的是直接向SVG中插入元素该元素是无法实现效果的,需要使用克隆,在获得克隆对象后更改属性值来获得一个新的链线。如下:

else{

//当前页已存在SVG元素

//克隆已存在的线

line = processSvg.find('polyline').eq(0).clone(false);

line.attr('points',points);

line.attr('style',line_style);

line.attr('class',_class);

line.attr('id',polylineId);

processSvg.append(line);

//克隆已存在的矩形

rect = processSvg.find('rect').eq(0).clone(false);

rect.attr('x',rectX);

rect.attr('y',rectY);

rect.attr('style',rect_style);

rect.attr('id','rect_'+polylineId);

rect.attr('polylineId',polylineId);

processSvg.append(rect);

//克隆已存在文本

_text = processSvg.find('text').eq(0).clone(false);

_text.attr('x',textX);

_text.attr('y',textY);

_text.attr('style',text_style);

_text.attr('id','text_'+polylineId);

_text.attr('polylineId',polylineId);

processSvg.append(_text);

}

流程操作界面:

154015759.jpg

其它的数据交互就只是复杂一些,难度倒没什么。

如果感兴趣某一个点,可以留言。

后续时间不紧了,再做详细更新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值