力软 表单
/LR_FormModule/Custmerform
CustmerformController Learun.Application.Form
LR_Form_Scheme 的F_Scheme
{
"dbId": "d87c7234-f4ac-47d5-b385-5ca9e919e368",
"dbTable": [
{
"name": "VehicleReq",
"field": "F_Id",
"relationName": "",
"relationField": ""
}
],
"data": [
{
"id": "1",
"text": "主表信息",
"sort": "0",
"componts": [
{
"title": "GUID",
"type": "guid",
"table": "VehicleReq",
"field": "F_Id",
"proportion": "1",
"id": "db450ef3-868b-a04f-8566-49e01be8f9ad"
},
{
"title": "用车申请流程",
"type": "label",
"proportion": "1",
"id": "798e36d6-3f88-218a-89f6-1632696cdfc8"
},
{
"title": "标题",
"type": "text",
"table": "VehicleReq",
"field": "F_Title",
"proportion": "2",
"verify": "NotNull",
"isHide": "0",
"dfvalue": "",
"id": "1a5593a3-9e2d-68d2-abcf-eaa50ecac5ba"
},
{
"title": "紧急程度",
"type": "radio",
"table": "VehicleReq",
"field": "F_Degree",
"proportion": "2",
"dataSource": "0",
"dataSourceId": "8b78cea6-bc99-4d7e-a7c0-6e36cc26398f",
"itemCode": "Degree",
"id": "2e99dbfa-731e-5f9f-68a4-e4ebf97cf1b7"
},
{
"title": "车辆",
"type": "text",
"table": "VehicleReq",
"field": "F_Vehicle",
"proportion": "2",
"verify": "",
"isHide": "0",
"dfvalue": "",
"id": "93325dac-480c-176a-578c-59b7f645e64d"
},
{
"title": "司机",
"type": "organize",
"table": "VehicleReq",
"field": "F_Driver",
"proportion": "2",
"relation": "",
"height": 200,
"dataType": "user",
"id": "a8e95472-e1cf-c938-0c8b-9e8af39d328b"
}
]
}
]
}
在线工具 由 OSCHINA.NET dbId dbTable data
/Views/Shared/_CustmerFormDesigner.cshtml
包含 lr-formdesigner.js
html拼接
//左边
//中间
//右边
$.lrCustmerFormDesigner.compontinit($self);
$.lrCustmerFormDesigner.compontbind($self);
$.lrCustmerFormDesigner.tabbind($self);
$.lrCustmerFormDesigner.renderTabs($self);
$.lrCustmerFormDesigner.renderComponts($self);
compontinit($self)
(function ($, learun) {
"use strict";
$.lrCustmerFormDesigner = {
init: function ($self, op) {
$.lrCustmerFormDesigner.bind($self);
$.lrCustmerFormDesigner.compontinit($self);
$.lrCustmerFormDesigner.compontbind($self);
$.lrCustmerFormDesigner.tabbind($self);
$.lrCustmerFormDesigner.renderTabs($self);
$.lrCustmerFormDesigner.renderComponts($self);
},
// 绑定表单设计器的全局事件
bind: function ($self) {
},
// 组件初始化
compontinit: function ($self) {// 组件初始化
//左边组件可拖拽
$compontList.find('.lr-custmerform-component').draggble();
//中央可以排序
$('#lr_custmerform_designer_layout_area_' + dfop.id + ' .lr-scroll-box').sortable
},
// 组件事件注册
compontbind: function ($self) {
},
// 选项卡事件绑定
tabbind: function ($self) {
},
// 渲染选项卡
renderTabs: function ($self) {// 渲染选项卡
},
// 渲染数据
renderData: function ($self) {
renderComponts
},
// 保存当前选项卡的组件数据
saveComponts: function ($self) {
},
// 渲染组件
renderComponts: function ($self) {
lr-compont-item添加进去
lrFormComponents
},
// 更新绑定的数据表字段信息
updatedb: function ($self, op) {
},
// 判定所有组件数据是否输入完整（主要是数据库绑定信息）
validData: function ($self) {
return res;
}
};
//对外暴露接口
$.fn.lrCustmerFormDesigner = function (type, op) {
var $this = $(this);
if (!$this.attr('id')) {
return false;
}
};
})(jQuery, top.learun);
第一次加载 init set
init
set
dfop复制 然后调用renderData方法
div class lr-compont-item 里面包含 div-title(有div remove) div-value
保存 get 更新dfop 将dfop整理后放到dfop.data.componts
拖动 sortable jquary