首页 > 其他 > 详细

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

时间:2021-03-01 11:50:55      阅读:44      评论:0      收藏:0      [点我收藏+]

简单的控件介绍

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>
    

    效果图
    技术分享图片

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

原文:https://www.cnblogs.com/tkcore/p/14462505.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!