OneCode 组件功能属性速查手册

{
  type: 'button', // 按钮类型: button, submit, reset
  caption: '确定', // 按钮文本
  imageClass: 'icon-save', // 图标类名
  iconFontCode: '', // 图标字体编码
  disabled: false, // 是否禁用
  visible: true, // 是否可见
  onClick: () => {}, // 点击事件
  style: { width: '100px' } // 样式
}

{
  value: '', // 输入值
  type: 'text', // 输入类型: text, password, number
  placeholder: '请输入', // 占位文本
  readonly: false, // 是否只读
  disabled: false, // 是否禁用
  maxlength: 50, // 最大长度
  onChange: (value) => {}, // 值变化事件
  labelCaption: '用户名', // 标签文本
  labelSize: 80 // 标签宽度
}

{
  value: false, // 选中状态
  caption: '同意协议', // 文本
  disabled: false, // 是否禁用
  onChange: (checked) => {} // 变化事件
}

{
  caption: '显示文本', // 文本内容
  fontSize: '14px', // 字体大小
  fontColor: '#333', // 字体颜色
  fontWeight: 'bold', // 字体粗细
  dock: 'left', // 停靠方式
  onClick: () => {} // 点击事件
}

{
  value: '', // 当前值
  items: [ // 选项列表
    { id: '1', caption: '选项1' },
    { id: '2', caption: '选项2' }
  ],
  disabled: false, // 是否禁用
  editable: true, // 是否可编辑
  onSelect: (item) => {}, // 选择事件
  labelCaption: '选择', // 标签文本
  iconFontCode: '' // 图标
}

{
  html: '', // HTML内容
  className: 'my-div', // CSS类名
  style: { padding: '10px' }, // 样式
  overflow: 'auto', // 溢出处理
  dock: 'fill', // 停靠方式
  dataBinder: 'dataSource' // 数据绑定
}

{
  caption: '标题', // 标题
  borderType: 'solid', // 边框类型
  background: '#fff', // 背景色
  html: '', // HTML内容
  overflow: 'hidden', // 溢出处理
  dock: 'fill' // 停靠方式
}

{
  caption: '分组标题', // 标题
  folded: false, // 是否折叠
  html: '', // HTML内容
  onExpand: () => {}, // 展开事件
  onFold: () => {}, // 折叠事件
  dock: 'top', // 停靠方式
  height: 200 // 高度
}

{
  value: 'tab1', // 当前选中选项卡ID
  items: [ // 选项卡列表
    {
      id: 'tab1',
      caption: '标签1',
      html: '<div>内容1</div>', // 内容
      iconFontCode: '&#xe602;' // 图标
    },
    {
      id: 'tab2',
      caption: '标签2',
      html: '<div>内容2</div>'
    }
  ],
  onItemSelected: (item) => {}, // 选择事件
  dock: 'fill', // 停靠方式
  height: 300 // 高度
}

{
  type: 'hbox', // 布局类型: hbox, vbox
  items: [ // 子组件
    {
      id: 'left',
      size: 200, // 大小
      min: 100, // 最小大小
      max: 300, // 最大大小
      html: '左侧面板'
    },
    {
      id: 'main',
      pos: 'main', // 主区域
      html: '主内容区'
    },
    {
      id: 'right',
      size: 150,
      html: '右侧面板'
    }
  ],
  dock: 'fill' // 停靠方式
}

{
  header: [ // 列定义
    {
      id: 'name',
      caption: '名称',
      width: 200,
      editable: true,
      type: 'input'
    },
    {
      id: 'type',
      caption: '类型',
      width: 100,
      type: 'combobox',
      editorListItems: ['文本', '数字', '日期']
    }
  ],
  rows: [ // 行数据
    {
      id: 'row1',
      caption: '节点1',
      cells: [ // 单元格数据
        { value: '项目1' },
        { value: '文本' }
      ],
      sub: [ // 子节点
        {
          id: 'row1-1',
          caption: '子节点1',
          cells: [ { value: '子项目1' }, { value: '数字' } ]
        }
      ]
    }
  ],
  uidColumn: 'id', // 唯一标识列
  rowNumbered: true, // 是否显示行号
  selMode: 'single', // 选择模式: single, multiple
  onRowSelected: (rows) => {}, // 行选择事件
  dock: 'fill', // 停靠方式
  height: 400 // 高度
}

{
  items: [ // 列表项
    { id: '1', caption: '选项1', imageClass: 'icon-item' },
    { id: '2', caption: '选项2', disabled: true }
  ],
  value: '1', // 当前选中值
  onItemSelected: (item) => {}, // 选择事件
  dock: 'left', // 停靠方式
  width: 200 // 宽度
}

{
  items: [ // 树形节点
    {
      id: 'node1',
      caption: '节点1',
      imageClass: 'icon-folder',
      sub: [ // 子节点
        { id: 'node1-1', caption: '子节点1' },
        { id: 'node1-2', caption: '子节点2' }
      ]
    },
    { id: 'node2', caption: '节点2', imageClass: 'icon-file' }
  ],
  value: 'node1', // 当前选中值
  onItemSelected: (item) => {}, // 选择事件
  dock: 'left', // 停靠方式
  width: 250 // 宽度
}

{
  items: [ // 图片项
    {
      id: 'img1',
      image: 'path/to/image1.jpg',
      caption: '图片1',
      itemWidth: 150,
      itemHeight: 100
    },
    {
      id: 'img2',
      image: 'path/to/image2.jpg',
      caption: '图片2',
      itemWidth: 150,
      itemHeight: 100
    }
  ],
  onItemSelected: (item) => {}, // 选择事件
  dock: 'fill', // 停靠方式
  height: 300 // 高度
}

{
  name: 'api1', // 名称
  queryURL: '/api/data', // 请求URL
  requestType: 'GET', // 请求类型: GET, POST
  responseType: 'json', // 响应类型: json, text
  queryArgs: { param1: 'value1' }, // 请求参数
  onData: (data) => {}, // 成功回调
  onError: (error) => {}, // 错误回调
  beforeData: (data) => { return data; } // 数据预处理
}

{
  interval: 1000, // 间隔时间(毫秒)
  autoStart: true, // 是否自动启动
  onTime: () => {} // 定时回调
}

{
  caption: '对话框标题', // 标题
  width: 500, // 宽度
  height: 300, // 高度
  modal: true, // 是否模态
  minBtn: true, // 是否显示最小化按钮
  maxBtn: true, // 是否显示最大化按钮
  html: '<div>对话框内容</div>', // 内容
  beforeClose: () => { return true; }, // 关闭前回调
  dock: 'center' // 停靠方式
}

{
  chartOption: { // ECharts配置
    title: { text: '图表标题' },
    series: [{ type: 'pie', data: [{ value: 30, name: '数据1' }, { value: 70, name: '数据2' }] }]
  },
  dataset: [], // 数据集
  chartTheme: 'light', // 主题
  onChartEvent: (event) => {}, // 图表事件
  dock: 'fill', // 停靠方式
  height: 400 // 高度
}

{
  attr: { // SVG属性
    x: 10, // x坐标
    y: 10, // y坐标
    width: 100, // 宽度
    height: 50, // 高度
    fill: '#ff0000', // 填充色
    stroke: '#000', // 边框色
    'stroke-width': 2 // 边框宽度
  },
  onClick: () => {}, // 点击事件
  animDraw: true // 是否启用绘制动画
}

{
  attr: { // SVG属性
    cx: 50, // 圆心x坐标
    cy: 50, // 圆心y坐标
    r: 40, // 半径
    fill: '#00ff00', // 填充色
    stroke: '#000', // 边框色
    'stroke-width': 2 // 边框宽度
  },
  onClick: () => {}, // 点击事件
  animDraw: true // 是否启用绘制动画
}

{
  attr: { // SVG属性
    x: 100, // x坐标
    y: 50, // y坐标
    text: 'SVG文本', // 文本内容
    fill: '#0000ff', // 颜色
    'font-size': 14, // 字体大小
    'text-anchor': 'middle' // 文本对齐
  },
  onClick: () => {} // 点击事件
}

{
  attr: { // SVG属性
    d: 'M10 10 L100 10 L100 100 Z', // 路径数据
    fill: '#ffff00', // 填充色
    stroke: '#000', // 边框色
    'stroke-width': 2 // 边框宽度
  },
  onClick: () => {}, // 点击事件
  animDraw: true // 是否启用绘制动画
}

{
  editorListItems: [ // 静态列表
    { id: '1', caption: '选项1' },
    { id: '2', caption: '选项2' }
  ],
  // 或使用动态数据源
  editorListItems: {
    url: '/api/dictionary', // 数据源URL
    valueField: 'id', // 值字段
    textField: 'name' // 文本字段
  }
}

{
  cellRenderer: function(row, col, value) {
    // 自定义渲染函数
    return `<span style="color: red">${value}</span>`;
  },
  editorType: 'combobox', // 编辑器类型
  editorOptions: { // 编辑器选项
    items: [ { id: '1', caption: '是' }, { id: '0', caption: '否' } ]
  }
}