Kinlink开发者中心

表单字段操作

本指南介绍如何使用 Kinlink API 操作表单字段，包括获取和设置字段值、控制字段状态、样式定制等。

基础操作

了解如何进行基本的字段操作，包括获取/设置字段值和控制字段显示状态。

JavaScript
// 基础字段操作示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    
    // 设置初始值
    form.setFieldValue('创建日期', new Date().toISOString());
    
    // 批量设置多个字段值
    form.setFieldsValue({
      '部门': '技术部',
      '状态': '待处理'
    });
    
    // 根据条件显示/隐藏字段
    const userRole = getCurrentUserRole(); // 获取用户角色
    if (userRole === 'admin') {
      form.showField('高级设置');
    } else {
      form.hideField('高级设置');
    }
  });
})();

字段联动

学习如何实现字段之间的联动效果，根据某个字段的值自动更新其他字段。

JavaScript
// 字段联动示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
    const { fieldName, value } = data;
    const form = kinlink.formApi;
    
    // 根据部门自动设置审批人
    if (fieldName === '部门') {
      switch (value) {
        case '技术部':
          form.setFieldValue('审批人', '张工');
          break;
        case '财务部':
          form.setFieldValue('审批人', '王经理');
          break;
        default:
          form.setFieldValue('审批人', '');
      }
    }
    
    // 根据金额显示/隐藏额外审批字段
    if (fieldName === '申请金额') {
      const amount = parseFloat(value);
      if (amount > 10000) {
        form.showField('额外审批人');
        form.setFieldRequired('额外审批人', true);
      } else {
        form.hideField('额外审批人');
        form.setFieldRequired('额外审批人', false);
      }
    }
  });
})();

样式定制

了解如何自定义字段的样式，包括标签和输入框的样式设置。

JavaScript
// 字段样式定制示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    
    // 设置字段标签样式
    form.setFieldLabelStyle('重要信息', {
      color: '#ff4d4f',
      fontWeight: 'bold'
    });
    
    // 设置字段输入框样式
    form.setFieldComponentStyle('备注', {
      fontSize: '14px',
      padding: '8px',
      borderRadius: '4px',
      backgroundColor: '#f5f5f5'
    });
    
    // 移动端适配
    if (kinlink.layoutApi.checkIsMobileDevice()) {
      form.setFieldComponentStyle('手机号', {
        fontSize: '16px', // 避免iOS自动缩放
        padding: '12px 8px' // 增大点击区域
      });
    }
  });
})();

常见用例

  • 设置默认值
  • 字段显示/隐藏控制
  • 字段值联动更新
  • 字段样式定制

最佳实践

  • 使用 IIFE 封装代码
  • 在 FORM_LOADED 中初始化
  • 合理使用批量操作
  • 注意移动端适配

注意事项

  • 字段操作会立即生效
  • 注意处理字段值为空的情况
  • 避免循环联动
  • 考虑性能影响

相关资源