力软 表单_jjj_nantong的博客-程序员宅基地

/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   

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jd16manson/article/details/103818791

智能推荐

python 光标位置输入文字_jQuery往textarea中光标所在位置插入文本的方法_emi0wb的博客-程序员宅基地

$(function() {/* 在textarea处插入文本--Start */(function($) {$.fn.extend({insertContent : function(myValue, t) {var $t = $(this)[0];if (document.selection) { // iethis.focus();var sel = document.selection.c...

跟混乱的页面弹窗说再见_weixin_34212762的博客-程序员宅基地

对于一些快速迭代的产品来说,特别是移动端 C端产品,基于用户运营的目的,在 app首页给用户展示各种各样的弹窗是很常见的事情,在产品初期,由于迭代版本和运营策略变化地还不是太大,所以可能觉得没什么,但当产品运营到后期,各种八竿子打不着的运营策略轮番上阵,弹窗的样式、逻辑等都变了不知道多少遍的时候,问题就出来了由于前期没有做好规划,首页的弹窗组件可能放了十多个甚至更多,不仅是首页有,首页内又引入...

php连接amqp的方式,php amqp 消息队列 RabbitMQ 交换器类型 直连 (三)_PHP教程_鄙板姓许的博客-程序员宅基地

1、AMQP_EX_TYPE_DIRECT:直连型直连型又包括: 1对1 和1对N(N对1、 N对N) 接收端receive.php代码如下connect();$channel = new AMQPChannel($connect);$exchange = new AMQPExchange($channel);$exchange-&gt;setName('exchange');$exchange-...

华为模拟器基础实验_weixin_34342578的博客-程序员宅基地

华为模拟器基础实验需读华为实验手册!!!此实验所需命令:1.system-view命令功能system-view命令用来使用户从用户视图进入系统视图。命令格式system-view2.interface命令功能interface命令用来进入指定的接口视图。命令格式interface { gigabitethernet | xgigabitetherne...

四川大学计算机科学研究生,四川大学计算机学院2018年硕士研究生招生拟录取名单及成绩公示(全日制)..._素寰韶的博客-程序员宅基地

四川大学计算机学院2018年硕士研究生招生拟录取名单公示(全日制)姓名 拟录取专业 总成绩初试成绩 复试成绩 备注白迪 计算机技术75.3 353 160白婉玉 计算机技术79.35 369 169.8曾春明 ...

随便推点

2019第十届蓝桥杯C/C++ B组省赛题解 试题A:组队_纠结的菜鸡的博客-程序员宅基地

答案:490注:每一个编号是一个人,一共是20个人,每个人只能选一次。画图工具画一下就出来,3个98,1,97,一个99。 也就是98*5 = 490当时没仔细看题,以为每一组都有20个人,就把每一列的最大值加起来了…得了个492 o(╥﹏╥)o泪奔!!!...

STM32F0x HAL库学习笔记(3)使用HAL库延时函数(HAL_Delay())_Yonas-Luo的博客-程序员宅基地_hal_delay

本文开发环境:MCU型号:STM32F051R8T6IDE环境: MDK 5.25代码生成工具:STM32CubeMx 5.0.1本文内容:systick 定时器简介使用HAL_Delay()延时函数实现LED灯闪烁Systick 定时器HAL_Delay()延时函数 while (1) { /* USER CODE END WHI...

js起始内容_某技术人员的博客-程序员宅基地_js代码一开始@

js的书写方式1.在html文件内script标签放在head标签内容,那么需要执行onload事件,才能获取页面元素。页面window.onload 只执行一次2.在标签里面点击按钮3.外部脚本文件声明变量变量的命名:不能出现中文不能出现特殊字符 ~!@#¥% ……&amp;可以使用英文的下划线_ 可以使用 $不能以数字开头可以以数字结尾不能使用关键字和保留字数据类型1.基本数据类型1.string(字符串) 2.number(数字) 3.boolean(布尔值

我的JAVA学习(2)——描述自己调试曾经遇到异常的过程_小夏沫丶的博客-程序员宅基地_描述自己如何调试曾经遇到过异常的过程。

学习过程中调试遇到的异常解决曾经在写冒泡算法时遇到的数组越界异常java.lang.ArrayIndexOutOfBoundsExceptionimport java.util.Arrays; public class BubbleSort { public static void main(String[] args) { int[] num = {3, 23, 84, 12 ,24 ,52, 15, 90, 27}; bubbleSort(num);

加载进度条php代码,js如何创建动态加载的进度条?(代码示例)_weixin_39949584的博客-程序员宅基地

本篇文章给大家带来的内容是介绍js如何创建动态加载的进度条?(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。进度条可以用来描述正在执行的任何任务的进度,它通常会被用于显示下载和上传时的状态。换句话说,进度条可以用来描述正在进行的任何事情的状态。下面我们就来看看使用JavaScript如何实现动态加载的进度条?我们需要执行以下步骤:1、为进度条创建HTML结构:下面的代...

推荐文章

热门文章

相关标签