REBUILD FrontJS 实战示例FrontJS 可以便捷的将 JavaScript 代码插入到指定的页面中。配合

FrontJS 可以便捷的将 JavaScript 代码插入到指定的页面中。配合 REBUILD 提供的 FrontJS-API 可以对页面进行轻量级的前端开发。

本文将通过一些示例介绍 FrontJS 的使用，希望对您有一定启发。开始前我们假定您对 JavaScript 编程语言有一定了解，若同时了解 jQuery 或 React 更佳，否则可能无法理解本文所涉内容。

基本使用

从最简单的例子开始，如下图所示。

红框1 表示此 JS 将在指定的页面（地址）中才加载，也可以填写为 /，将在所有页面加载
红框2 就是我们的 JS 代码，此示例弹出一个提示框

是不是非常简单？接下来，我们将列举一些实际的案例供您参考。

示例列表

下列示例结合了 FrontJS-API 的使用，关于 FrontJS-API 详情请参考文档。

在表单字段中加入链接型提示文字

效果

代码

// Support ES6, jsx, React and jQuery

FrontJS.ready(() => {
  // 对象:表单
  const _Form = FrontJS.Form

  // 回调方法:表单打开时执行
  _Form.onOpen((data) => {
    // `data` 是表单打开时传递的参数，可以通过浏览器控制台观察数据结构内容
    console.log('_Form.onOpen', data)

    // 方法详情可查阅 FrontJS 表单 API 文档说明
    _Form.setFieldTip(
      'AccountId',
      <div>
        <a href="https://www.getrebuild.com/" target="_blank">
          我是链接可以点击
        </a>
        其实你可以在这里写所有的HTML代码
      </div>
    )
  })
})

在列表字段中加入复制按钮

效果

代码

// Support ES6, jsx, React and jQuery

FrontJS.ready(() => {
  // 对象:数据列表
  const _List = FrontJS.DataList

  // 为指定字段复写一个渲染方法，以便加入复制按钮
  _List.regCellRender('SalesOrder.OrderNumber', function () {
    // 打印入参结构内容
    console.log(arguments)

    // 字段值备用
    let bianhao = arguments[0]
    return (
      <a
        class="text-bold"
        title="点击复制"
        onClick={function (e) {
          copyToClipboard(bianhao)
          // 停止事件传播，避免点击复制时勾选（可选）
          $stopEvent(e, true)
        }}>
        {bianhao}
      </a>
    )
  })

  // 更多方法可查看 FrontJS 文档 https://getrebuild.com/docs/rbv/frontapi/
})

// 复制方法（DeepSeek生成）
function copyToClipboard(text) {
  if (navigator.clipboard) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        // 可以在这里添加复制成功的提示
        RbHighbar.success('文本已复制到剪贴板')
      })
      .catch((err) => {
        // 可以在这里添加复制失败的提示
        RbHighbar.error('无法复制文本')
      })
  } else {
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    RbHighbar.success('已复制')
  }
}

从其他接口获取数据填充

本例完成输入IP地址，获取IP地址的所在城市

效果

代码

// Support ES6, jsx, React and jQuery

FrontJS.ready(() => {
  // 对象:表单
  const _Form = FrontJS.Form

  // 回调方法:表单打开时执行
  _Form.onOpen((data) => {
    console.log('_Form.onOpen', data)

    // 添加按钮
    _Form.addButton({
      text: '获取KPI',
      onClick: () => {
        // 获取某个字段的值
        let ip = _Form.getFieldValue('ipdizhi')
        if (!ip) {
          alert('请输入IP地址')
          return
        }
        let url = `/commons/ip-location?ip=${ip}`
        // 调用接口
        $.get(url, (res) => {
          console.log('获取结果', res)
          // 获取的结果填写到某个字段
          if (res.data) {
            _Form.setFieldValue('ipdizhiweizhi', res.data.city)
          } else {
            alert('无法获取')
          }
        })
      },
    })
  })

  // 更多方法可查看 FrontJS 文档 https://getrebuild.com/docs/rbv/frontapi/
})

修改页面样式（为表格添加边框线）

效果

代码

// Support ES6, jsx, React and jQuery

const style = document.createElement('style')
style.innerHTML = `
  .data-list td,
  .data-list th {
    border-right: 1px solid #dee2e6;
  }
`
document.head.appendChild(style)

如果您有想编写的 JS 可留言说明。