力软 表单

/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拼接  

<div class="lr-custmerform-designer-layout-left"  id="lr_custmerform_compont_list_step-3"></div>
//左边
<div class="lr-custmerform-designer-layout-center">
    <div class="lr-custmerform-designer-layout-header">
        <div class="lr-custmerform-designer-tabs" id="lr_custmerform_designer_tabs_step-3"></div>
    </div>
    <div class="lr-custmerform-designer-layout-area" id="lr_custmerform_designer_layout_area_step-3" ></div>
    <div class="lr-custmerform-designer-layout-footer">
        <div class="lr-custmerform-designer-layout-footer-item" id="lr_custmerform_tabsEdit_btn_step-3">
            <i class="fa fa-pencil-square-o"></i>
            <span>选项卡编辑</span>
        </div>
        <div class="lr-custmerform-designer-layout-footer-item" id="lr_custmerform_preview_btn_step-3">
            <i class="fa fa-eye"></i>
            <span>预览表单</span>
        </div>
    </div>
    <div class="lr-custmerform-designer-layout-center-bg">
        <img src="/Content/images/tableform.png" />
    </div>
    <div class="lr-custmerform-designer-layout-tabedit" id="lr_custmerform_designer_layout_tabedit_step-3" ></div>
</div>
//中间
<div class="lr-custmerform-designer-layout-right" id="lr_custmerform_compont_property_step-3"></div>
//右边

   

            $.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