TKCORE框架学习之入门篇（三）--简单的控件介绍

简单的控件介绍

Toolkit 封装了很多 Html 原生以及扩展控件，这些控件可以方便用户在不同场景上使用。现在介绍部分简单配置就可以使用的控件。
在 DataXml 中，每一个 Field 都有一个 Control 节点，可以在 Control 节点这里配置相应的控件。

• Text：文本输入框。最常见的控件，输入文本数据。

  <tk:Field DataType="string">
    <tk:FieldName>USER_EMAIL</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>EMail</tk:Content>
    </tk:DisplayName>
    <tk:Length>100</tk:Length>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="Text" Order="90" DefaultShow="AllNoList"/>
  </tk:Field>
  

  效果图
  

• Date：日期控件。可以输入日期，此控件只支持日期，不支持时间。

  <tk:Field DataType="Date">
    <tk:FieldName>USER_BIRTHDAY</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>生日</tk:Content>
    </tk:DisplayName>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="Date" Order="120" DefaultShow="AllNoList"/>
  </tk:Field>
  

  效果图
  

• Label：文本。该字段的数据就只能显示，不能进行修改。

  <tk:Field DataType="string" IsEmpty="false">
    <tk:FieldName>USER_LOGIN_NAME</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>登录帐号</tk:Content>
    </tk:DisplayName>
    <tk:Length>50</tk:Length>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="Label" Order="40" DefaultShow="All"/>
      </tk:Field>
  

  效果图
  

• DateTime：日期时间控件。该控件即支持输入日期同时也包括相应的时间，通常精确到分。

  <tk:Field DataType="DateTime">
    <tk:FieldName>USER_OUT_DATE</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>离职时间</tk:Content>
    </tk:DisplayName>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="DateTime" Order="250" DefaultShow="AllNoList"/>
  </tk:Field>
  

  效果图

• CheckBox：开关控件。该控件一般支持字段是 0/1 值的情况。如果不是0/1，可以在tk:Extension的CheckValue和UnCheckedValue两个属性设置选中的值和没有选中的值。

  <tk:Field DataType="short">
    <tk:FieldName>USER_ADMIN</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>超级用户</tk:Content>
    </tk:DisplayName>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="CheckBox" Order="330" DefaultShow="All"/>
    <tk:Extension CheckValue="1" UnCheckValue="0"/>
  </tk:Field>
  

  效果图

• Password：密码输入控件。和 Text 有些类似，但是输入的数据不显示，适合密码的输入。

  <tk:Field DataType="string" IsEmpty="false">
    <tk:FieldName>USER_LOGIN_PASSWD</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>新密码</tk:Content>
    </tk:DisplayName>
    <tk:Length>50</tk:Length>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="Password" Order="50" DefaultShow="AllNoList"/>
  </tk:Field>
  

  效果图
  

• Hidden：隐藏控件。即数据存在在 Html 页面上，但是该数据对用户不可见。本质上就是 input 的 type=“hidden”这种情况。

  <tk:Field DataType="Date">
    <tk:FieldName>USER_IN_DATE</tk:FieldName>
    <tk:DisplayName>
      <tk:Content>进公司时间</tk:Content>
    </tk:DisplayName>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="Hidden" Order="190" DefaultShow="AllNoList"/>
  </tk:Field>
  

• TextArea：多行文本输入控件。通常是要在该字段输入框中输入比较多的文本信息时，采用该控件类型。

  <tk:Field DataType="string">
    <tk:FieldName>remark</tk:FieldName>
    <tk:NickName>remark</tk:NickName>
    <tk:DisplayName>
      <tk:Content>备注</tk:Content>
    </tk:DisplayName>
    <tk:Length>255</tk:Length>
    <tk:Layout Layout="PerUnit" UnitNum="1"/>
    <tk:Control Control="TextArea" Order="180" DefaultShow="AllNoList"/>    
  </tk:Field>
  

  效果图

• RichText：富文本编辑控件。如果字段需要存储 Html 数据，可以采用该控件输入数据。

  <tk:Field DataType="text">
    <tk:FieldName>desciption</tk:FieldName>
    <tk:NickName>desciption</tk:NickName>
    <tk:DisplayName>
      <tk:Content>描述</tk:Content>
    </tk:DisplayName>
    <tk:Layout Layout="PerLine" UnitNum="1"/>
    <tk:Control Control="RichText" Order="70" DefaultShow="AllNoList"/>
  </tk:Field>
  

  效果图