文档章节

FineUI小技巧(2)将表单内全部字段禁用、只读、设置无效标识(另附48张专业版高清大图)

三生石上
 三生石上
发布于 2014/06/23 14:55
字数 1451
阅读 316
收藏 1
点赞 0
评论 1

需求描述

对表单内的所有字段进行操作也是常见需求,这些操作有:

  1. 禁用:表单字段变灰,不响应用户动作。

  2. 只读:表单字段不变灰,但不接受用户输入(实际上是设置DOM节点的readonly属性),有触发器的要隐藏起来

  3. 设置无效标识:一般用在服务器端验证失败的提示信息

界面效果

  1. 默认状态

  2. 禁用状态

  3. 只读状态

  4. 设置无效标识状态

前台代码

 前台代码非常直观,只是一个Form控件外加几个Button控件,按钮的响应事件在后台完成:

<f:PageManager ID="PageManager1" runat="server" />
<f:Form Width="600px" LabelWidth="100px" OffsetRight="10px" LabelSeparator=":"
    BodyPadding="5px" EnableCollapse="true" ID="Form1" runat="server" Title="表单">
    <Rows>
        <f:FormRow>
            <Items>
                <f:Label ID="Label3" Label="电话" Text="0551-1234567" runat="server" />
                <f:Label ID="Label16" runat="server" Label="申请人" Text="admin">
                </f:Label>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:Label ID="Label4" Label="编号" Text="200804170006" runat="server" />
                <f:TextBox ID="TextBox2" Required="true" ShowRedStar="true" Label="电子邮箱" RegexPattern="EMAIL"
                    RegexMessage="请输入有效的邮箱地址!" runat="server">
                </f:TextBox>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:DropDownList ID="DropDownList3" Label="审批人" runat="server" ForceSelection="false" Required="true" ShowRedStar="True">
                    <f:ListItem Text="老大甲" Value="0"></f:ListItem>
                    <f:ListItem Text="老大乙" Value="1"></f:ListItem>
                    <f:ListItem Text="老大丙" Value="2"></f:ListItem>
                </f:DropDownList>
                <f:NumberBox ID="NumberBox1" Label="申请数量" MaxValue="1000" Required="true" runat="server"
                    ShowRedStar="True" />
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:DatePicker runat="server" Required="true" Label="日期" EmptyText="请选择日期"
                    ID="DatePicker1" SelectedDate="2014-07-10" ShowRedStar="True">
                </f:DatePicker>
                <f:TimePicker ID="TimePicker1" ShowRedStar="True" Label="时间" Increment="30"
                    Required="true" Text="08:30" EmptyText="请选择时间" runat="server">
                </f:TimePicker>
            </Items>
        </f:FormRow>

        <f:FormRow>
            <Items>
                <f:FileUpload runat="server" ID="filePhoto" EmptyText="请选择一张照片" Label="个人头像" Required="true"
                    ShowRedStar="true">
                </f:FileUpload>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:TextArea ID="TextArea1" runat="server" Label="描述" ShowRedStar="True" Required="True">
                </f:TextArea>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:CheckBoxList ID="CheckBoxList1" Label="复选框列表" ColumnNumber="3" runat="server">
                    <f:CheckItem Text="可选项 1" Value="value1" />
                    <f:CheckItem Text="可选项 2" Value="value2" Selected="true" />
                    <f:CheckItem Text="可选项 3" Value="value3" Selected="true" />
                    <f:CheckItem Text="可选项 4" Value="value4" Selected="true" />
                    <f:CheckItem Text="可选项 5" Value="value5" Selected="true" />
                </f:CheckBoxList>
            </Items>
        </f:FormRow>
        <f:FormRow>
            <Items>
                <f:RadioButtonList ID="RadioButtonList2" Label="单选框列表" ColumnNumber="3" runat="server">
                    <f:RadioItem Text="可选项 1" Value="value1" />
                    <f:RadioItem Text="可选项 2" Value="value2" />
                    <f:RadioItem Text="可选项 3" Value="value3" Selected="true" />
                    <f:RadioItem Text="可选项 4" Value="value4" />
                    <f:RadioItem Text="可选项 5" Value="value5" />
                </f:RadioButtonList>
            </Items>
        </f:FormRow>
    </Rows>
</f:Form>
<br />
<f:Button ID="btnDisableAll" Text="全部禁用" CssClass="marginr" runat="server" OnClick="btnDisableAll_Click">
</f:Button>
<f:Button ID="btnEnableAll" Text="全部启用" CssClass="marginr" runat="server" OnClick="btnEnableAll_Click">
</f:Button>
<f:Button ID="btnReadOnlyAll" Text="全部只读" CssClass="marginr" runat="server" OnClick="btnReadOnlyAll_Click">
</f:Button>
<f:Button ID="btnCancelReadOnlyAll" Text="取消只读" CssClass="marginr" runat="server" OnClick="btnCancelReadOnlyAll_Click">
</f:Button>
<br />
<br />
<f:Button ID="btnMarkInvalid" Text="设置无效标识" CssClass="marginr" runat="server" OnClick="btnMarkInvalid_Click">
</f:Button>
<f:Button ID="btnClearInvalid" Text="取消无效标识" CssClass="marginr" runat="server" OnClick="btnClearInvalid_Click">
</f:Button>

后台代码

因为几个按钮的逻辑类似,这里我们定义一个代理(delegate),把相同的逻辑放在一个函数中完成,如下所示:

 private delegate void ProcessFormField(Field field);

private void ResolveFormField(ProcessFormField process)
{
    foreach (FormRow row in Form1.Rows)
    {
        foreach (Field field in row.Items)
        {
            if (field != null)
            {
                process(field);
            }
        }
    }
}

几个按钮的只需要调用刚刚定义的ResolveFormField函数,并传入自己的代理实现即可:

protected void btnDisableAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        field.Enabled = false;
    });
}

protected void btnEnableAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        field.Enabled = true;
    });
}

protected void btnReadOnlyAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.Readonly = true;
        }
    });
}

protected void btnCancelReadOnlyAll_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.Readonly = false;
        }
    });
}

protected void btnMarkInvalid_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.MarkInvalid("这个字段出错了!");
        }
    });
}

protected void btnClearInvalid_Click(object sender, EventArgs e)
{
    ResolveFormField(delegate(Field field)
    {
        if (!(field is Label))
        {
            field.ClearInvalid();
        }
    });
}

本章小结

本篇文章介绍了如何对表单内全部字段进行批量操作,要注意禁用和只读的区别,虽然两种情况下表单字段都不响应用户动作,但还是有一些细微的差别,首先是颜色的变化不同,其次只读时会隐藏TriggerBox右侧的触发按钮。

后台的代码实现用到了C#代理(delegate),从JavaScript的角度看其实就是个回调函数,只不过C#的强类型限制,必须把这个回调函数抽象成一个类型而已。

专业版截图

FineUI(专业版)是由三生石上全新打造的基于 jQuery 的专业 ASP.NET 控件库,计划在七月下旬正式发布。

选择FineUI(专业版)的四大理由:
1. 简单:专业版和开源版兼容(v4.x),您现在就可以使用开源版进行开发,等正式版发布时只需替换 DLL 即可。
2. 极速:专业版基于 jQuery 库重写,使得 JS 和 CSS 体积大幅减少,页面加载速度将是开源版的 2 倍以上。
3. 多彩:专业版内置 24 种 jQueryUI 皮肤,用户还可以使用 jQueryUI ThemeRoller 创建专属自己的皮肤。
4. 便宜:专业版不限开发者数量和永久免费升级,使得典型授权案例的费用减少为开源版的 1/3 左右。

声明:

    1. FineUI(专业版)授权协议是商业授权,需购买使用。

    2. FineUI(开源版)授权协议是Apache License v2.0,免费下载使用,并且会继续维护和开发,个人用户推荐使用开源版。

源代码与在线示例

本系列所有文章的源代码均可自行下载:http://fineui.codeplex.com/

在线示例(暂时不可用):http://fineui.com/demo/#/demo/form/form_disabled.aspx

这个示例会添加到下个版本的FineUI(开源版)中,因此在线示例还不可见,需要的同学请自行下载全部源代码,自己运行。 


© 著作权归作者所有

共有 人打赏支持
三生石上

三生石上

粉丝 43
博文 21
码字总数 42096
作品 4
合肥
程序员
加载中

评论(1)

binfenworld
binfenworld
辛苦了
FineUI小技巧(3)表格导出与文件下载(另附24张专业版高清大图)

需求描述 实际应用中,我们可能需要导出表格内容,或者在页面回发时根据用户权限下载文件(注意,这里的导出与下载,都是在后台进行的,和普通的一个链接下载文件不同)。 点击按钮导出表格 ...

三生石上
2014/06/24
0
0
#CSDN刷票门# 有没有人在恶意刷票?CSDN请告诉我!用24小时监控数据说话!

特别声明: 此次并非针对其他参与2013中国十大优秀开源项目的同行,体系有漏洞要谴责的是制定规则并从中获益但不作为的权贵,草根们制定不了规则但可发现和利用漏洞,这是程序员应有反叛精神...

三生石上
2013/06/26
0
18
如何优化 FineUI 控件库的性能,减少 80% 的数据上传量!

不管是第一次使用 FineUI 控件库的网友,还是有着 3 年以上使用经验的网友,都对 FineUI 的简单印象深刻。当然,“一切为了简单”也是 FineUI 一句响亮的口号,不仅如此,一个开源项目要想立...

三生石上
2012/12/21
0
0
纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录...

前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明FineUI旺盛的...

三生石上
2013/08/01
0
20
FineUI小技巧(7)多表头表格导出

前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述。今天我们要更进一步,介绍下如何导出多表头表格。 多表头表格的标签定义 ...

三生石上
2014/11/18
0
0
Java快速开发平台,JEECG 3.7.7闪电版本发布,增加多套主流UI代码生成器模板

JEECG 3.7.7 闪电版本发布,提供5套主流UI代码生成器模板 导读 ⊙平台性能优化,速度闪电般提升 ⊙提供5套新的主流UI代码生成器模板(Bootstrap表单+BootstrapTable列表 ElementUI列表表单)...

Jeecg
今天
0
0
JEECG 3.7.7 发布,增加多套主流 UI 代码生成器模板

JEECG 3.7.7闪电版本发布,提供5套主流UI代码生成器模板 导读 ⊙平台性能优化,速度闪电般提升 ⊙提供5套新的主流UI代码生成器模板 ⊙表单UI深度优化,平台UI风格升级一个级别 ⊙灵活通用代码...

Jeecg
今天
0
0
AppBox升级进行时 - 拥抱Entity Framework的Code First开发模式

AppBox 是基于 FineUI 的通用权限管理框架,包括用户管理、职称管理、部门管理、角色管理、角色权限管理等模块。 从Subsonic到Entity Framework Subsonic最早发布于2008年,当时他的无代码生...

三生石上
2013/08/29
0
0
JEECG 3.7.5 Vue SPA 单页面应用版本发布

此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板ElementUI风格、Bootstrap分隔,大家速度体验,新鲜出炉,哇咔咔!! JEECG 是一款基...

Jeecg
05/31
0
0
FineUI (ASP.NET UI控件) v4.1.0 正式版

FineUI(开源版) 基于 ExtJS 的开源 ASP.NET 控件库 FineUI的使命 创建 No JavaScript,No CSS,No UpdatePanel,No ViewState,No WebServices 的网站应用程序 支持的浏览器 IE 8.0+、Chr...

三生石上
2014/07/21
6.1K
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

分布式之抉择分布式锁

前言: 目前网上大部分的基于zookpeer,和redis的分布式锁的文章都不够全面。要么就是特意避开集群的情况,要么就是考虑不全,读者看着还是一脸迷茫。坦白说,这种老题材,很难写出新创意,博...

Java大蜗牛
1分钟前
0
0
rm: cannot remove `xxx’: Operation not permitted

rm: cannot remove `xxx': Operation not permitted可以先用lsattr xxx查看文件的隐藏属性。如果看到-----a-------的情况,可以用chattr -a xxx去除a属性,然后再进行删除就可以了....

殘留回憶
1分钟前
0
0
oracle 如何查看当前用户的表空间名称

如何查询当前用户的表空间名称?因为oracle建立索引,需要知道当前用户的表空间,查找了一下资料 --查询语法-- select default_tablespace from dba_users where username='登录用户' 如,...

youfen
5分钟前
0
0
MicroPython-TPYBoard开发板DIY小型家庭气象站

对于喜欢登山的人来说,都会非常关心自己所处的高度跟温度,海拔高度的测量方法,海拔测量一般常用的有两种方式,一是通过GPS全球定位系统,二是通过测出大气压,根据气压值算出海拔高度。 ...

bodasisiter
5分钟前
0
0
抓取沪A股票资金流向数据

library(rvest)mydata<-list()day1<-Sys.Date()day2<-Sys.Date()-7stock<-c("600695","600734","603693","601990","603650","603045","603895","600735","601999","603970","600619"......

cuyi
5分钟前
0
0
Java中mqtt消息队列发送和订阅消息

1.首先本地建立mqtt协议的服务器 2.直接上代码 package io.powerx.test;import java.util.Date;import org.eclipse.paho.client.mqttv3.IMqttDeliveryToken;import org.eclipse.p......

江湖鱼大虾
7分钟前
0
0
数据结构-树的学习

1. 相关连接 维基-二叉搜索树 维基-红黑树 思否-红黑树

liuyan_lc
9分钟前
0
0
Nginx upstream 负载均衡

Nginx upstream 负载均衡 了了情空 关注 2016.05.31 16:16* 字数 612 阅读 537评论 1喜欢 0 上周五同事跟我提一个需求,大概描述是酱紫:“我们现在终端都在访问同一台服务器,如果流量过大造...

linjin200
10分钟前
0
0
Dubbo 源码解读——自定义 Classloader 之 ExtensionLoader

众所周知,Dubbo 是阿里巴巴公司自主研发开源的一个高性能的服务框架(现已捐献给 Apache 基金会组织),应用之间可以通过 RPC 的方式来互相调用并返回结果。主要基于 Java 语言开发,它提供...

Ryan-瑞恩
18分钟前
0
0
Sonar Maven/IDEA集成(未完待续)

前言:在上一篇(SonarQube安装步骤)的基础上,我们来集成maven/IDEA 1.首先是集成maven(maven的安装配置就不多说了) 找到maven安装目录下-conf文件夹-setting.xml文件 然后添加以下配置信...

张艺兴女朋友
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部