当前博客:UI设计器中可否出一个“更新表格”的实例

70 次浏览【转载需注明来源】

博客作者:【1580****8581】

个性签名:寒窗苦读十年,一朝凤舞九天

UI设计器中可否出一个“更新表格”的实例,由于缺少实例,一直摸不着路。

例如:更新设计器的数据表格、表格、文本框等

默认排序
Generic placeholder image
Generic placeholder image
快码FOF编程 Time: 2024-03-05 11:22:54

设计器使用参考案例:

1709608913697513.zip

 

案例中所使用UI源码:

源码可以直接导入到设计器中:

{
  "version": "1.0.0",
  "formName": "表单示例",
  "Author": "快码编程UI设计器",
  "formId": "formPreviewForm",
  "generateId": 4,
  "data": [
    {
      "id": "table_1",
      "index": 0,
      "tag": "table",
      "tagIcon": "layui-icon layui-icon-layer",
      "width": "100%",
      "height": "0",
      "margin": "",
      "padding": "",
      "left": 0,
      "top": 0,
      "zIndex": 1,
      "url": "",
      "page": false,
      "toolbar": true,
      "addEvent": "",
      "delEvent": "",
      "updateEvent": "",
      "options": [
        {
          "type": "checkbox",
          "title": "复选框",
          "field": "复选框",
          "arrindex": 1,
          "key": "0-0",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "unresize": true,
          "width": 50,
          "colGroup": false
        },
        {
          "title": "姓名",
          "field": "姓名",
          "arrindex": 1,
          "edit": true,
          "key": "0-1",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "年龄",
          "field": "年龄",
          "arrindex": 1,
          "key": "0-2",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "性别",
          "field": "性别",
          "arrindex": 1,
          "key": "0-3",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "省",
          "field": "省",
          "arrindex": 1,
          "key": "0-4",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "市",
          "field": "市",
          "arrindex": 1,
          "key": "0-5",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "区",
          "field": "区",
          "arrindex": 1,
          "key": "0-6",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        }
      ],
      "defaultoption": {
        "title": "",
        "field": "",
        "arrindex": 1
      },
      "importData": [
        {
          "id": 1,
          "姓名": "小明",
          "年龄": "12岁",
          "性别": "男",
          "省": "四川省",
          "市": "成都市",
          "区": "青羊区",
          "LAY_TABLE_INDEX": 0
        },
        {
          "id": 2,
          "姓名": "小红",
          "年龄": "12岁",
          "性别": "女",
          "省": "四川省",
          "市": "成都市",
          "区": "青羊区",
          "LAY_TABLE_INDEX": 1
        },
        {
          "id": 3,
          "姓名": "小华",
          "年龄": "13岁",
          "性别": "男",
          "省": "四川省",
          "市": "成都市",
          "区": "金牛区",
          "LAY_TABLE_INDEX": 2
        }
      ]
    },
    {
      "id": "reportFormsTable_2",
      "index": 1,
      "tag": "reportFormsTable",
      "tagIcon": "layui-icon layui-icon-picture",
      "title": "打印表格",
      "width": 786,
      "height": 148,
      "margin": "",
      "padding": "",
      "left": 0,
      "top": 220,
      "zIndex": 2,
      "reportFormsColumn": 1,
      "reportFormsRow": false,
      "reportFormsColumnMargin": 5,
      "reportFormsSqlType": "普通数据模式",
      "reportFormsDataType": "不跟随数据库变动",
      "reportFormsTableType": false,
      "reportFormsTableRowsSize": "默认尺寸",
      "reportFormsTableLine": "",
      "reportFormsTableHead": "[{\"数据\": [{ \"内容\": \"姓名\",\"宽度\":100 },{ \"内容\": \"年龄\" }]}]",
      "reportFormsTableHeadToolJson": {
        "宽度": 100,
        "高度": 100,
        "内容": "",
        "字体": "微软雅黑",
        "字体尺寸": 14,
        "背景色": "#FFFFFF",
        "文本色": "#000000",
        "元素ID": "",
        "允许输入": true,
        "合并行": 0,
        "合并列": 0,
        "垂直对齐-居中": "居中对齐",
        "垂直对齐-顶部": "顶部对齐",
        "垂直对齐-底部": "底部对齐",
        "水平对齐-居中": "居中对齐",
        "水平对齐-左侧": "左侧对齐",
        "水平对齐-右侧": "右侧对齐",
        "字体类型-加粗": "粗体",
        "字体类型-正常": "正常",
        "边框颜色": "#000",
        "边框粗细": 1,
        "上边框颜色": "#000",
        "上边框粗细": 1,
        "右边框颜色": "#000",
        "右边框粗细": 1,
        "下边框颜色": "#000",
        "下边框粗细": 1,
        "左边框颜色": "#000",
        "左边框粗细": 1,
        "自定义CSS": ""
      },
      "reportFormsTableData": "[{\"数据\": [{ \"内容\": \"张三\" },{ \"内容\": \"24\" }]},{\"数据\": [{ \"内容\": \"李四\" },{ \"内容\": \"25\" }]}]",
      "reportFormsTableDataToolJson": {
        "宽度": 100,
        "高度": 100,
        "内容": "",
        "字体": "微软雅黑",
        "字体尺寸": 14,
        "背景色": "#FFFFFF",
        "文本色": "#000000",
        "元素ID": "",
        "允许输入": true,
        "合并行": 0,
        "合并列": 0,
        "垂直对齐-居中": "居中对齐",
        "垂直对齐-顶部": "顶部对齐",
        "垂直对齐-底部": "底部对齐",
        "水平对齐-居中": "居中对齐",
        "水平对齐-左侧": "左侧对齐",
        "水平对齐-右侧": "右侧对齐",
        "字体类型-加粗": "粗体",
        "字体类型-正常": "正常",
        "边框颜色": "#000",
        "边框粗细": 1,
        "上边框颜色": "#000",
        "上边框粗细": 1,
        "右边框颜色": "#000",
        "右边框粗细": 1,
        "下边框颜色": "#000",
        "下边框粗细": 1,
        "左边框颜色": "#000",
        "左边框粗细": 1,
        "自定义CSS": ""
      },
      "reportFormsStyle": "{\"边框颜色\": \"#eee\"}",
      "reportFormsStyleToolJson": {
        "宽度": 100,
        "高度": 100,
        "字体": "微软雅黑",
        "字体尺寸": 14,
        "背景色": "#FFFFFF",
        "文本色": "#000000",
        "水平对齐-居中": "居中对齐",
        "水平对齐-左侧": "左侧对齐",
        "水平对齐-右侧": "右侧对齐",
        "字体类型-加粗": "粗体",
        "字体类型-正常": "正常",
        "边框颜色": "#000",
        "上边框颜色": "#000",
        "右边框颜色": "#000",
        "下边框颜色": "#000",
        "左边框颜色": "#000",
        "自定义CSS": "",
        "上级组件ID": "",
        "上级组件ID间隔": "10",
        "上级组件加载时间": "100"
      },
      "reportFormsSqlCode_NoBut": "",
      "reportFormsSqlDataName": "[]",
      "reportFormsCode_NoBut": "",
      "grid": false
    },
    {
      "id": "textBox_3",
      "index": 2,
      "tag": "textBox",
      "tagIcon": "layui-icon layui-icon-picture",
      "title": "文本框",
      "width": "100",
      "height": "30",
      "margin": "",
      "padding": "",
      "transformRotate": "0",
      "writingMode": "",
      "left": 5,
      "top": 390,
      "zIndex": 3,
      "TextValue": "文本框",
      "TextSize": "15",
      "fontFamily": "微软雅黑",
      "textBoxDataType": "普通文本框",
      "HorizontalAlignment": "center",
      "VerticalAlignment": "center",
      "BorderLineStyle": "",
      "BorderLineSize": "1",
      "BorderLineColor": "#000000",
      "BackgroundValue": "",
      "ColorValue": "#000",
      "grid": false
    },
    {
      "id": "textBox_4",
      "index": 3,
      "tag": "textBox",
      "tagIcon": "layui-icon layui-icon-picture",
      "title": "文本框",
      "width": "100",
      "height": "30",
      "margin": "",
      "padding": "",
      "transformRotate": "0",
      "writingMode": "",
      "left": 155,
      "top": 390,
      "zIndex": 4,
      "TextValue": "文本框",
      "TextSize": "15",
      "fontFamily": "微软雅黑",
      "textBoxDataType": "普通文本框",
      "HorizontalAlignment": "center",
      "VerticalAlignment": "center",
      "BorderLineStyle": "",
      "BorderLineSize": "1",
      "BorderLineColor": "#000000",
      "BackgroundValue": "",
      "ColorValue": "#000",
      "grid": false
    }
  ],
  "optionsArray": [
    {
      "id": "table_1",
      "index": 0,
      "tag": "table",
      "tagIcon": "layui-icon layui-icon-layer",
      "width": "100%",
      "height": "0",
      "margin": "",
      "padding": "",
      "left": 0,
      "top": 0,
      "zIndex": 1,
      "url": "",
      "page": false,
      "toolbar": true,
      "addEvent": "",
      "delEvent": "",
      "updateEvent": "",
      "options": [
        {
          "type": "checkbox",
          "title": "复选框",
          "field": "复选框",
          "arrindex": 1,
          "key": "0-0",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "unresize": true,
          "width": 50,
          "colGroup": false
        },
        {
          "title": "姓名",
          "field": "姓名",
          "arrindex": 1,
          "edit": true,
          "key": "0-1",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "年龄",
          "field": "年龄",
          "arrindex": 1,
          "key": "0-2",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "性别",
          "field": "性别",
          "arrindex": 1,
          "key": "0-3",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "省",
          "field": "省",
          "arrindex": 1,
          "key": "0-4",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "市",
          "field": "市",
          "arrindex": 1,
          "key": "0-5",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        },
        {
          "title": "区",
          "field": "区",
          "arrindex": 1,
          "key": "0-6",
          "hide": false,
          "colspan": 1,
          "rowspan": 1,
          "type": "normal",
          "colGroup": false,
          "width": 0
        }
      ],
      "defaultoption": {
        "title": "",
        "field": "",
        "arrindex": 1
      },
      "importData": [
        {
          "id": 1,
          "姓名": "小明",
          "年龄": "12岁",
          "性别": "男",
          "省": "四川省",
          "市": "成都市",
          "区": "青羊区",
          "LAY_TABLE_INDEX": 0
        },
        {
          "id": 2,
          "姓名": "小红",
          "年龄": "12岁",
          "性别": "女",
          "省": "四川省",
          "市": "成都市",
          "区": "青羊区",
          "LAY_TABLE_INDEX": 1
        },
        {
          "id": 3,
          "姓名": "小华",
          "年龄": "13岁",
          "性别": "男",
          "省": "四川省",
          "市": "成都市",
          "区": "金牛区",
          "LAY_TABLE_INDEX": 2
        }
      ]
    },
    {
      "id": "reportFormsTable_2",
      "index": 1,
      "tag": "reportFormsTable",
      "tagIcon": "layui-icon layui-icon-picture",
      "title": "打印表格",
      "width": 786,
      "height": 148,
      "margin": "",
      "padding": "",
      "left": 0,
      "top": 220,
      "zIndex": 2,
      "reportFormsColumn": 1,
      "reportFormsRow": false,
      "reportFormsColumnMargin": 5,
      "reportFormsSqlType": "普通数据模式",
      "reportFormsDataType": "不跟随数据库变动",
      "reportFormsTableType": false,
      "reportFormsTableRowsSize": "默认尺寸",
      "reportFormsTableLine": "",
      "reportFormsTableHead": "[{\"数据\": [{ \"内容\": \"姓名\",\"宽度\":100 },{ \"内容\": \"年龄\" }]}]",
      "reportFormsTableHeadToolJson": {
        "宽度": 100,
        "高度": 100,
        "内容": "",
        "字体": "微软雅黑",
        "字体尺寸": 14,
        "背景色": "#FFFFFF",
        "文本色": "#000000",
        "元素ID": "",
        "允许输入": true,
        "合并行": 0,
        "合并列": 0,
        "垂直对齐-居中": "居中对齐",
        "垂直对齐-顶部": "顶部对齐",
        "垂直对齐-底部": "底部对齐",
        "水平对齐-居中": "居中对齐",
        "水平对齐-左侧": "左侧对齐",
        "水平对齐-右侧": "右侧对齐",
        "字体类型-加粗": "粗体",
        "字体类型-正常": "正常",
        "边框颜色": "#000",
        "边框粗细": 1,
        "上边框颜色": "#000",
        "上边框粗细": 1,
        "右边框颜色": "#000",
        "右边框粗细": 1,
        "下边框颜色": "#000",
        "下边框粗细": 1,
        "左边框颜色": "#000",
        "左边框粗细": 1,
        "自定义CSS": ""
      },
      "reportFormsTableData": "[{\"数据\": [{ \"内容\": \"张三\" },{ \"内容\": \"24\" }]},{\"数据\": [{ \"内容\": \"李四\" },{ \"内容\": \"25\" }]}]",
      "reportFormsTableDataToolJson": {
        "宽度": 100,
        "高度": 100,
        "内容": "",
        "字体": "微软雅黑",
        "字体尺寸": 14,
        "背景色": "#FFFFFF",
        "文本色": "#000000",
        "元素ID": "",
        "允许输入": true,
        "合并行": 0,
        "合并列": 0,
        "垂直对齐-居中": "居中对齐",
        "垂直对齐-顶部": "顶部对齐",
        "垂直对齐-底部": "底部对齐",
        "水平对齐-居中": "居中对齐",
        "水平对齐-左侧": "左侧对齐",
        "水平对齐-右侧": "右侧对齐",
        "字体类型-加粗": "粗体",
        "字体类型-正常": "正常",
        "边框颜色": "#000",
        "边框粗细": 1,
        "上边框颜色": "#000",
        "上边框粗细": 1,
        "右边框颜色": "#000",
        "右边框粗细": 1,
        "下边框颜色": "#000",
        "下边框粗细": 1,
        "左边框颜色": "#000",
        "左边框粗细": 1,
        "自定义CSS": ""
      },
      "reportFormsStyle": "{\"边框颜色\": \"#eee\"}",
      "reportFormsStyleToolJson": {
        "宽度": 100,
        "高度": 100,
        "字体": "微软雅黑",
        "字体尺寸": 14,
        "背景色": "#FFFFFF",
        "文本色": "#000000",
        "水平对齐-居中": "居中对齐",
        "水平对齐-左侧": "左侧对齐",
        "水平对齐-右侧": "右侧对齐",
        "字体类型-加粗": "粗体",
        "字体类型-正常": "正常",
        "边框颜色": "#000",
        "上边框颜色": "#000",
        "右边框颜色": "#000",
        "下边框颜色": "#000",
        "左边框颜色": "#000",
        "自定义CSS": "",
        "上级组件ID": "",
        "上级组件ID间隔": "10",
        "上级组件加载时间": "100"
      },
      "reportFormsSqlCode_NoBut": "",
      "reportFormsSqlDataName": "[]",
      "reportFormsCode_NoBut": "",
      "grid": false
    },
    {
      "id": "textBox_3",
      "index": 2,
      "tag": "textBox",
      "tagIcon": "layui-icon layui-icon-picture",
      "title": "文本框",
      "width": "100",
      "height": "30",
      "margin": "",
      "padding": "",
      "transformRotate": "0",
      "writingMode": "",
      "left": 5,
      "top": 390,
      "zIndex": 3,
      "TextValue": "文本框",
      "TextSize": "15",
      "fontFamily": "微软雅黑",
      "textBoxDataType": "普通文本框",
      "HorizontalAlignment": "center",
      "VerticalAlignment": "center",
      "BorderLineStyle": "",
      "BorderLineSize": "1",
      "BorderLineColor": "#000000",
      "BackgroundValue": "",
      "ColorValue": "#000",
      "grid": false
    },
    {
      "id": "textBox_4",
      "index": 3,
      "tag": "textBox",
      "tagIcon": "layui-icon layui-icon-picture",
      "title": "文本框",
      "width": "100",
      "height": "30",
      "margin": "",
      "padding": "",
      "transformRotate": "0",
      "writingMode": "",
      "left": 155,
      "top": 390,
      "zIndex": 4,
      "TextValue": "文本框",
      "TextSize": "15",
      "fontFamily": "微软雅黑",
      "textBoxDataType": "普通文本框",
      "HorizontalAlignment": "center",
      "VerticalAlignment": "center",
      "BorderLineStyle": "",
      "BorderLineSize": "1",
      "BorderLineColor": "#000000",
      "BackgroundValue": "",
      "ColorValue": "#000",
      "grid": false
    }
  ],
  "dataSource": {},
  "formData": {},
  "globalDisable": false,
  "viewOrDesign": true,
  "formDefaultButton": true,
  "formProperty": {},
  "selectItems": [],
  "model": "H5",
  "page": {
    "id": ""
  },
  "elem": {
    "0": {
      "sizzle1709605075233": {
        "undefined": {
          "parentNode": [
            73,
            32,
            true
          ]
        }
      },
      "sizzle1709605074956": {
        "undefined": {
          "parentNode": [
            4837,
            65,
            false
          ]
        }
      }
    },
    "length": 1
  },
  "id": "formdesigner",
  "size": [
    "100%",
    "100%"
  ],
  "selectItem": {
    "id": "textBox_3",
    "index": 2,
    "tag": "textBox",
    "tagIcon": "layui-icon layui-icon-picture",
    "title": "文本框",
    "width": "100",
    "height": "30",
    "margin": "",
    "padding": "",
    "transformRotate": "0",
    "writingMode": "",
    "left": 5,
    "top": 390,
    "zIndex": 3,
    "TextValue": "文本框",
    "TextSize": "15",
    "fontFamily": "微软雅黑",
    "textBoxDataType": "普通文本框",
    "HorizontalAlignment": "center",
    "VerticalAlignment": "center",
    "BorderLineStyle": "",
    "BorderLineSize": "1",
    "BorderLineColor": "#000000",
    "BackgroundValue": "",
    "ColorValue": "#000",
    "grid": false
  },
  "selectItemsAttr": false
}

UI设计器中可否出一个“更新表格”的实例