FineUI 开源版（原ExtAsp.Net) Last updated: 2017-03 SURFSKY http://pan.baidu.com/share/home?uk=170857326#category/type=0 --------------------------------------------------- 配置&预设 http://fineui.com/demo/#/demo/config/modify_webconfig.htm --------------------------------------------------- install-package fineui 修改web.config <configSections> <section name="FineUI" type="FineUI.ConfigSection, FineUI"/> </configSections> <!-- 可用的配置项（这里列的都是默认值）: Theme="Neptune" Language="zh_CN" AjaxTimeout="120" EnableAjax="true" DebugMode="false" FormMessageTarget="Qtip" FormOffsetRight="0" FormLabelWidth="100" FormLabelSeparator="：" FormLabelAlign="Left" EnableAjaxLoading="true" AjaxLoadingType="Default" CustomTheme="" IconBasePath="~/res/icon" CustomThemeBasePath="~/res/theme" JSBasePath="~/extjs" IEEdge="true" LoadingImageNumber="1" --> <FineUI DebugMode="false" /> <system.web> <pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID"> <controls> <add assembly="FineUI" namespace="FineUI" tagPrefix="f" /> </controls> </pages> <httpModules> <add name="FineUIScriptModule" type="FineUI.ScriptModule, FineUI"/> </httpModules> <httpHandlers> <add verb="GET" path="res.axd" type="FineUI.ResourceHandler, FineUI" validate="false"/> </httpHandlers> <system.web> 页面上放置 <f:PageManager ID="PageManager1" runat="server" /> --------------------------------------------------- 客户端脚本 --------------------------------------------------- 标准的aspnet服务器端生成客户端脚本 Page.ClientScript.RegisterStartupScript(this.GetType(), "alert_hello", "alert('你好 Asp.Net！');", true); PageContext.RegisterStartupScript(wnd.GetShowReference()); PageContext.RegisterStartupScript("closeActiveTab();"); FineUI客户端脚本 F.alert("定义在页面中的客户端事件！"); 客户端错误捕捉 // 参考：http://stackoverflow.com/questions/951791/javascript-global-error-handling/10556743#10556743 window.onerror = function (msg, url, line, col, error) { var errors = []; errors.push('消息：' + msg); errors.push('网址：' + url); errors.push('行：' + line); errors.push('列：' + col); F.alert(errors.join('<br/>'), 'JavaScript错误！'); return true; // 返回 true 阻止浏览器弹出错误提示框（比如在IE浏览器中） }; 网页对话框 Alert Alert.Show("你好 FineUI！", MessageBoxIcon.Warning); Alert.ShowInTop("你好 FineUI！", MessageBoxIcon.Information); Confirm PageContext.RegisterStartupScript( Confirm.GetShowReference("操作成功！点击确定按钮开始下载文件，点取消按钮弹出对话框", String.Empty, MessageBoxIcon.Question, PageManager1.GetCustomEventReference(false, "Confirm_OK"), // 第一个参数 false 用来指定当前不是AJAX请求 PageManager1.GetCustomEventReference("Confirm_Cancel")) ); 组件/窗体 Window wnd = FindControl(wndID) as Window; btnClose.OnClientClick = ActiveWindow.GetHideReference(); 定制客户端事件（CustomEvent） <f:PageManager ID="PageManager1" OnCustomEvent="PageManager1_CustomEvent" runat="server" /> <f:TextBox ID="TextBox1" runat="server" ShowLabel="false" EmptyText="输入一些文字并按 ENTER 键"> <Listeners> <f:Listener Event="specialkey" Handler="onTextBoxSpecialkey" /> </Listeners> </f:TextBox> <script type="text/javascript"> function onTextBoxSpecialkey(box, e) { if (e.getKey() == e.ENTER) { F.customEvent('TextBox1_ENTER'); } } </script> protected void PageManager1_CustomEvent(object sender, CustomEventArgs e) { if (e.EventArgument == "TextBox1_ENTER") { TextBox2.Text = TextBox1.Text; TextBox2.Focus(true); } } 客户端事件监听（Listener） 改变另外一个控件 <f:TextBox ID="TextBox1" runat="server" ShowLabel="false" EmptyText="输入一些文字，下面的文本框会随之改变"> <Listeners> <f:Listener Event="change" Handler="onTextBoxChange" /> </Listeners> </f:TextBox> <f:TextBox ID="TextBox2" runat="server" ShowLabel="false" /> <script type="text/javascript"> var textbox2ClientID = '<%= TextBox2.ClientID %>'; function onTextBoxChange() { F(textbox2ClientID).setValue(this.getValue()); } </script> --------------------------------------------------- 表单控件 http://fineui.com/demo/ 大部分表单控件都有Label属性 Label="这是标签" LabelWidth="150px" LabelAlign="Left" --------------------------------------------------- Timer <f:Timer ID="Timer1" Interval="5" Enabled="false" OnTick="Timer1_Tick" EnableAjaxLoading="false" runat="server" /> Label <f:Label ID="labResult" EncodeText="false" runat="server"/> <f:Label ID="Label1" Text="普通的 Label 标签，会自动编码字符串（比如：<strong></strong>）" runat="server" /> <f:Label ID="Label4" EncodeText="false" Text="<a href='http://www.ustc.edu.cn/' target='_blank'>中国科学技术大学（Label 标签生成的链接）</a>" runat="server" /> <f:Label ID="Label2" EncodeText="false" CssClass="customlabel" Text="修改文本的样式（CssClass）" runat="server" /> <f:Label ID="Label3" Enabled="true" EncodeText="false" Text="<span style='color:red;font-weight:bold;'>修改文本的样式（内嵌HTML）</span>" runat="server" /> Button 图标 <f:Button ID="btnIcon2" Text="图标在右侧" IconAlign="Right" Icon="Report" runat="server" OnClick="btnHello_Click"> <f:Button ID="btnCustomIcon" Text="自定义图标（点击修改图标）" OnClick="btnCustomIcon_Click" IconUrl="~/res/images/16/1.png" runat="server" /> 客户端事件 <f:Button ID="btnClientClick" Text="客户端事件" OnClientClick="alert('这是客户端事件');" EnablePostBack="false" CssClass="marginr" runat="server"> 服务器端点击事件 protected void btnHello_Click(object sender, EventArgs e) { Alert.Show("你好 FineUI！", MessageBoxIcon.Warning); Alert.ShowInTop("你好 FineUI！", MessageBoxIcon.Information); } 客户端脚本 btnClientClick2.OnClientClick = Alert.GetShowInTopReference("这是在服务器端生成的客户端事件"); 菜单按钮 <f:Button ID="btnMenu" Text="中国科学技术大学" EnablePostBack="false" runat="server"> <Menu runat="server"> <f:MenuHyperLink runat="server" Icon="TagGreen" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/" Text="化学与材料科学学院" /> <f:MenuHyperLink runat="server" Icon="TagBlue" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/" Text="管理学院"> <Menu runat="server"> <f:MenuHyperLink runat="server" Icon="TagPink" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/" Text="工商管理系" /> <f:MenuHyperLink runat="server" Icon="TagPurple" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/" Text="统计与金融系" /> </Menu> </f:MenuHyperLink> </Menu> </f:Button> 自定义按钮 <f:Button ID="Button2" Text="" CssClass="bgbtn" runat="server" OnClick="Button2_Click" /> <style type="text/css"> .bgbtn { background-image: url(../res/images/login.png) !important; width: 320px; height: 50px; border-width: 0; background-color: transparent; } .bgbtn .x-frame-ml, .bgbtn .x-frame-mc, .bgbtn .x-frame-mr, .bgbtn .x-frame-tl, .bgbtn .x-frame-tc, .bgbtn .x-frame-tr, .bgbtn .x-frame-bl, .bgbtn .x-frame-bc, .bgbtn .x-frame-br { background-image: none; background-color: transparent; } </style> LinkButton <f:LinkButton ID="LinkButton2" Text="客户端事件（服务器生成）" EnablePostBack="false" runat="server"> HyperLink <f:HyperLink ID="HyperLink3" Text="新窗口打开百度首页" Target="_blank" NavigateUrl="http://www.baidu.com/" runat="server"> Image <f:Image ID="Image1" runat="server" Icon="World"/> <f:Image ID="Image2" runat="server" ImageUrl="../res/icon/world.png"> Calendar <f:Calendar runat="server" EnableDateSelectEvent="true" DateFormatString="yyyy-MM-dd" OnDateSelect="Calendar1_DateSelect" ID="Calendar1"> <f:Calendar runat="server" EnableDateSelectEvent="true" DateFormatString="yyyy-MM-dd" OnDateSelect="Calendar1_DateSelect" ID="Calendar1"> Calendar1.MinDate = DateTime.Now; Calendar1.MaxDate = DateTime.Now.AddDays(20); Calendar1.SelectedDate = DateTime.Now.AddDays(10); protected void Calendar1_DateSelect(object sender, EventArgs e) { labResult1.Text = String.Format("选择的日期：{0}", Calendar1.SelectedDate.Value.ToString(Calendar1.DateFormatString)); } TextBox <f:TextBox runat="server" Label="用户名" ID="tbxUseraName" Required="true" /> <f:TextBox runat="server" ID="tbxPassword" Label="密码" TextMode="Password" Required="true" /> <f:TextBox runat="server" ID="TextBox1" Label="文本框一（自动回发）" EmptyText="输入字符会立即触发TextChanged事件" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged" /> <f:TextBox ID="TextBox2" runat="server" Label="文本框二" OnTextChanged="TextBox2_TextChanged" EmptyText="输入字符后点击提交按钮，会触发TextChanged事件" /> <f:TextBox runat="server" ID="TextBox3" Label="文本框三（失去焦点事件）" EmptyText="输入字符后失去焦点，会触发Blur事件" EnableBlurEvent="true" OnBlur="TextBox3_Blur" /> 文本位置 <style> .text-align-center input {text-align: center;} .text-align-right input {text-align: right;} </style> CssClass="text-align-center" TextArea <f:TextArea runat="server" ID="TextArea1" EmptyText="文本框的高度会自动扩展" Label="自动扩展高度的文本输入框" AutoGrowHeight="true" AutoGrowHeightMin="100" AutoGrowHeightMax="200" /> HtmlEditor <f:HtmlEditor runat="server" Label="文本编辑器" ID="HtmlEditor1" Height="250px" /> TriggerBox（带小图标的输入框） <f:TriggerBox ID="tbxMyBox1" ShowLabel="false" TriggerIcon="Search" OnTriggerClick="tbxMyBox1_TriggerClick" EmptyText="打开弹出窗口" runat="server" /> TriggerIconUrl="~/res/icon/application_edit.png" Trigger1IconUrl="~/res/icon/bullet_cross.png" Trigger2IconUrl="~/res/icon/zoom.png" TwinTriggerBox（带两个小图标的输入框，如清除按钮） <f:TwinTriggerBox ID="ttbxMyBox2" ShowLabel="false" runat="server" OnTrigger1Click="ttbxMyBox2_Trigger1Click" OnTrigger2Click="ttbxMyBox2_Trigger2Click" Trigger1Icon="Clear" ShowTrigger1="False" Trigger2Icon="Search" EmptyText="搜索用户名" /> ttbxMyBox2.ShowTrigger1 = true; NumberBox <f:NumberBox Label="0 到 9 的整数" ID="NumberBox1" runat="server" MaxValue="9" MinValue="0" NoDecimal="true" NoNegative="True" Required="True" EmptyText="比如 8" ShowRedStar="True" /> <f:NumberBox Label="非负整数" ID="NumberBox3" runat="server" EmptyText="比如 99" Required="True" ShowRedStar="True" NoDecimal="True" NoNegative="True" /> <f:NumberBox ID="NumberBox4" runat="server" EmptyText="精度为 2，比如 0.35" Label="0 到 1 之间的小数" MaxValue="1" MinValue="0" NoDecimal="false" NoNegative="True" DecimalPrecision="2" Required="True" ShowRedStar="True" /> <f:NumberBox Label="任意整数" ID="NumberBox5" NoDecimal="true" runat="server" /> DataPicker <f:DatePicker runat="server" Required="true" Label="开始日期" DateFormatString="yyyy-MM-dd" EmptyText="请选择开始日期" ID="DatePicker1" ShowRedStar="True" /> <f:DatePicker ID="DatePicker2" Required="true" Readonly="false" CompareControl="DatePicker1" DateFormatString="yyyy-MM-dd" CompareOperator="GreaterThan" CompareMessage="结束日期应该大于开始日期" Label="结束日期" runat="server" ShowRedStar="True" /> TimePicker <f:TimePicker ID="TimePicker1" ShowRedStar="True" EnableEdit="false" Label="时间" Increment="30" Required="true" EmptyText="请选择时间" runat="server" /> CheckBox <f:CheckBox ID="CheckBox2" ShowLabel="false" runat="server" Text="复选框" Checked="True" /> <f:CheckBox ID="CheckBox1" ShowLabel="false" runat="server" Text="自动回发的复选框（AutoPostBack=True）" OnCheckedChanged="CheckBox1_CheckedChanged" Checked="True" AutoPostBack="True" /> CheckBoxList <f:CheckBoxList ID="CheckBoxList1" Label="列表一" 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:CheckBoxList> RadioButton <f:RadioButton ID="rbtnSingleRadio" Label="单选框" Text="可选项" runat="server" /> RadioButtonList <f:RadioButtonList ID="RadioButtonList1" Label="列表一" runat="server"> <f:RadioItem Text="可选项 1" Value="value1" /> <f:RadioItem Text="可选项 2" Value="value2" /> <f:RadioItem Text="可选项 3" Value="value3" Selected="true" /> </f:RadioButtonList> DropDownList eg <f:DropDownList runat="server" ID="DropDownList1" EnableEdit="true"> <f:ListItem Text="可选项1" Value="Value1" Selected="true" /> <f:ListItem Text="可选项2（不可选择）" Value="Value2" EnableSelect="false" /> <f:ListItem Text="可选项3（不可选择）" Value="Value3" EnableSelect="false" /> <f:ListItem Text="可选项4" Value="Value4" /> <f:ListItem Text="可选项5" Value="Value5" /> <f:ListItem Text="可选项6" Value="Value6" /> <f:ListItem Text="可选择项7" Value="Value7" /> <f:ListItem Text="可选择项8" Value="Value8" /> <f:ListItem Text="普通型1 < L > 1.5" Value="普通型1 < L > 1.5" /> <f:ListItem Text="一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的可选择项" Value="Value11" /> </f:DropDownList> 绑定到字符串列表 private void BindStringListToDropDownList() { List<string> strList = new List<string>(); strList.Add("可选项1"); strList.Add("可选项2"); strList.Add("可选项3"); strList.Add("可选项4"); strList.Add("可选项5"); strList.Add("可选项6"); strList.Add("可选择项7"); strList.Add("可选择项8"); strList.Add("可选择项9"); strList.Add("这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的可选项"); DropDownList1.DataSource = strList; DropDownList1.DataBind(); } 绑定到对象列表（或DataTable） private void BindEnumrableToDropDownList() { List<CustomClass> myList = new List<CustomClass>(); myList.Add(new CustomClass("1", "可选项1")); myList.Add(new CustomClass("2", "可选项2")); myList.Add(new CustomClass("3", "可选项3")); myList.Add(new CustomClass("4", "可选项4")); myList.Add(new CustomClass("5", "可选项5")); myList.Add(new CustomClass("6", "可选项6")); myList.Add(new CustomClass("7", "可选择项7")); myList.Add(new CustomClass("8", "可选择项8")); myList.Add(new CustomClass("9", "可选择项9")); DropDownList1.DataTextField = "Name"; DropDownList1.DataValueField = "ID"; DropDownList1.DataSource = myList; DropDownList1.DataBind(); } 多选 EnableMultiSelect="true" protected void btnGetSelection_Click(object sender, EventArgs e) { if (DropDownList1.SelectedItem != null) { List<string> texts = new List<string>(); List<string> values = new List<string>(); foreach (ListItem item in DropDownList1.SelectedItemArray) { texts.Add(item.Text); values.Add(item.Value); } labResult.Text = String.Format("选中项文本：{0}<br/>选中项值：{1}", String.Join(" ", texts.ToArray()), String.Join(" ", values.ToArray())); } else { labResult.Text = "无选中项"; } } 模拟树 http://fineui.com/demo/#/demo/dropdownlist/dropdownlist_simulate_tree.aspx private void BindEnumrable() { List<JQueryFeature> myList = new List<JQueryFeature>(); myList.Add(new JQueryFeature("0", "jQuery", 0, false)); myList.Add(new JQueryFeature("1", "核心", 1, false)); myList.Add(new JQueryFeature("2", "选择符", 1, false)); myList.Add(new JQueryFeature("3", "基本选择符", 2, true)); myList.Add(new JQueryFeature("4", "内容选择符", 2, true)); myList.Add(new JQueryFeature("5", "属性选择符", 2, true)); myList.Add(new JQueryFeature("6", "筛选", 1, false)); myList.Add(new JQueryFeature("7", "过滤", 2, true)); myList.Add(new JQueryFeature("8", "查找", 2, true)); myList.Add(new JQueryFeature("9", "事件", 1, false)); myList.Add(new JQueryFeature("10", "页面载入", 2, true)); myList.Add(new JQueryFeature("11", "事件处理", 2, true)); myList.Add(new JQueryFeature("12", "事件委托", 2, true)); ddlBox.DataTextField = "Name"; ddlBox.DataValueField = "Id"; ddlBox.DataSimulateTreeLevelField = "Level"; ddlBox.DataEnableSelectField = "EnableSelect"; ddlBox.DataSource = myList; ddlBox.DataBind(); ddlBox.SelectedValue = "3"; } FileUpload 不能上传大文件。大文件可用SwfUpload来上传 <f:FileUpload runat="server" ID="filePhoto" EmptyText="请选择一张照片" Label="个人头像" Required="true" ShowRedStar="true"> protected void btnSubmit_Click(object sender, EventArgs e) { if (filePhoto.HasFile) { string fileName = filePhoto.ShortFileName; if (!ValidateFileType(fileName)) { Alert.Show("无效的文件类型！"); return; } fileName = fileName.Replace(":", "_").Replace(" ", "_").Replace("\\", "_").Replace("/", "_"); fileName = DateTime.Now.Ticks.ToString() + "_" + fileName; filePhoto.SaveAs(Server.MapPath("~/upload/" + fileName)); labResult.Text = "<p>用户名：" + tbxUseraName.Text + "</p>" + "<p>头像：<br /><img src=\"" + ResolveUrl("~/upload/" + fileName) + "\" /></p>"; //// 清空表单字段（第一种方法） //tbxUseraName.Reset(); //filePhoto.Reset(); // 清空表单字段（第三种方法） SimpleForm1.Reset(); } } --------------------------------------------------- Menu/Toolbar/ToolTip --------------------------------------------------- Menu <f:Button EnablePostBack="false" ID="btnLangMenu" Text="系统语言" runat="server"> <Menu runat="server"> <f:MenuCheckBox Text="English" ID="MenuLangEnglish" GroupName="MenuLang" AutoPostBack="true" OnCheckedChanged="MenuLang_CheckedChanged" Checked="true" runat="server" /> <f:MenuCheckBox Text="简体中文" ID="MenuLangZHCN" GroupName="MenuLang" AutoPostBack="true" OnCheckedChanged="MenuLang_CheckedChanged" runat="server" /> <f:MenuCheckBox Text="繁體中文" ID="MenuLangZHTW" GroupName="MenuLang" AutoPostBack="true" OnCheckedChanged="MenuLang_CheckedChanged" runat="server" /> </Menu> </f:Button> <f:Menu ID="Menu1" runat="server"> <f:MenuButton ID="btnSelectRows" EnablePostBack="false" runat="server" Text="全选行"> <Listeners> <f:Listener Event="click" Handler="onSelectRows" /> </Listeners> </f:MenuButton> <f:MenuButton ID="btnUnselectRows" EnablePostBack="false" runat="server" Text="取消行"> <Listeners> <f:Listener Event="click" Handler="onUnselectRows" /> </Listeners> </f:MenuButton> </f:Menu> Toolbar（很多容器控件都有Toolbar属性） <f:Toolbar ID="Toolbar1" runat="server" ToolbarAlign="Right" Position="Bottom"> <Items> <f:ToolbarSeparator ID="ToolbarSeparator1" runat="server" /> <f:ToolbarFill ID="ToolbarFill1" runat="server" /> <f:ToolbarText Text="工具条文本一" ID="ToolbarText1" runat="server" /> <f:Button ID="Button1" Text="工具条按钮" runat="server" EnablePostBack="false" /> <f:Button ID="btnLogin" Text="登录" Type="Submit" ValidateForms="SimpleForm1" ValidateTarget="Top" runat="server" OnClick="btnLogin_Click" /> <f:Button ID="btnReset" Text="重置" Type="Reset" EnablePostBack="false" runat="server" /> </Items> </f:Toolbar> Tooltip <f:HyperLink ID="HyperLink1" Text="中国科学技术大学" ToolTip="1958年9月创建于北京，首任校长由郭沫若兼任。它的创办被称为“我国教育史和科学史上的一项重大事件”。" ToolTipTitle="中国科学技术大学" ToolTipAutoHide="false" Target="_blank" NavigateUrl="http://www.ustc.edu.cn/" runat="server" /> --------------------------------------------------- 容器类 Panel/Form/Windows/SimpleForm/... --------------------------------------------------- Panel Fit布局： 子容器撑满自己 <f:Panel ID="Panel2" Layout="HBox" BoxConfigAlign="Stretch" CssClass="formitem" runat="server" ShowHeader="false" ShowBorder="false" EnableCollapse="True" IconUrl="~/res/images/16/8.png" Layout="Fit" Margin="0 0 5 0" BodyPadding="5px" > <Items> <f:Label runat="server" ShowRedStar="true" Label="姓名" /> <f:TextBox ID="TextBox2" ShowLabel="false" CssClass="marginr" Required="true" ShowRedStar="true" BoxFlex="2" runat="server" /> <f:TextBox ID="TextBox4" ShowLabel="false" Required="true" ShowRedStar="true" BoxFlex="3" runat="server" /> </Items> </f:Panel> Anchor 锚布局 <f:Panel ID="Panel2" runat="server" Height="300px" Width="850px" ShowBorder="True" EnableCollapse="true" BodyPadding="5px" Layout="Anchor" ShowHeader="True" Title="面板二（Height=300px Width=750px Layout=Anchor）"> <Items> <f:Panel ID="Panel4" AnchorValue="60% 30%" runat="server" Margin="0 0 5 0" BodyPadding="5px" ShowBorder="True" ShowHeader="false"> ... </f:Panel> <f:Form ID="Form2" AnchorValue="100% 70%" runat="server" BodyPadding="5px" ShowBorder="True" ShowHeader="false"> ... </f:Form> </Items> </f:Panel> Region 区域布局（类似vs） <f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" Layout="Region"> <Items> <f:Panel runat="server" ID="panelTopRegion" RegionPosition="Top" RegionSplit="true" EnableCollapse="true" Height="100px" Title="顶部面板" ShowBorder="true" ShowHeader="true" BodyPadding="5px"> ... </f:Panel> <f:Panel runat="server" ID="panelLeftRegion" RegionPosition="Left" RegionSplit="true" EnableCollapse="true" Width="200px" Title="左侧面板" ShowBorder="true" ShowHeader="true" BodyPadding="5px"> ... </f:Panel> <f:Panel runat="server" ID="panelCenterRegion" RegionPosition="Center" Title="中间面板" ShowBorder="true" ShowHeader="true" BodyPadding="5px"> ... </f:Panel> <f:Panel runat="server" ID="panelRightRegion" RegionPosition="Right" RegionSplit="true" EnableCollapse="true" Width="200px" Title="右侧面板" ShowBorder="true" ShowHeader="true" BodyPadding="5px"> ... </f:Panel> <f:Panel runat="server" ID="panelBottomRegion" RegionPosition="Bottom" RegionSplit="true" EnableCollapse="true" Height="100px" Title="底部面板" ShowBorder="true" ShowHeader="true" BodyPadding="5px"> ... </f:Panel> </Items> </f:Panel> HBox、VBox可用于左右上下结构的页面 <f:Panel ID="Panel1" runat="server" BodyPadding="0px" ShowBorder="false" Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" ShowHeader="false" Title="左右结构"> <Items> <f:Form ID="Form2" runat="server" Height="36px" BodyPadding="5px" ShowHeader="false" ShowBorder="false" LabelAlign="Right" > ... </f:Form> <f:Grid...> .... </f:Grid> </Items> </f:Panel> 更多布局（Column/Absolute/Table/HBox/VBox/Region)请查看 http://fineui.com/demo/#/demo/layout/anchor.aspx ConentPanel 首页那种有个标题框框起来的、可收缩的那种面板。常用来容纳用户控件。 <f:ContentPanel ID="ContentPanel1" BodyPadding="5px" ShowBorder="true" ShowHeader="true" Title="内容面板" runat="server"> <uc1:UserInfoControl ID="UserInfoControl1" UserName="陈萍萍" UserAge="20" UserCountry="合肥" runat="server" /> </f:ContentPanel> UserInfoControl ctrl = LoadControl("~/usercontrol/UserInfoControl.ascx") as UserInfoControl; ctrl.UserName = "陈萍萍"; ctrl.UserAge = 20; ctrl.UserCountry = "合肥"; Panel1.Controls.Add(ctrl); UserControlConnector 专门容纳用户控件的东东 <f:UserControlConnector ID="UserControlConnector4" runat="server"> <uc1:UserInfoControl ID="UserInfoControl4" UserName="陈萍萍" UserAge="20" UserCountry="合肥" runat="server" /> <uc1:UserInfoControl ID="UserInfoControl5" UserName="胡斐" UserAge="22" UserCountry="驻马店" runat="server" /> </f:UserControlConnector> CPHConnector http://fineui.com/demo/#/demo/master/simple.aspx 母版页中容纳ContentPlaceHolder的东东 <f:CPHConnector ID="CPHConnector1" runat="server"> <asp:ContentPlaceHolder ID="mainCPH" runat="server" /> </f:CPHConnector> GroupPanel windows form 样式的面板，有个线框框起来，顶部有个文字的矩形 <f:GroupPanel Layout="Anchor" Title="联系人信息" runat="server"> <Items> <f:Panel ID="Panel2" Layout="HBox" BoxConfigAlign="Stretch" CssClass="formitem" ShowHeader="false" ShowBorder="false" runat="server"> <Items> <f:Label runat="server" ShowRedStar="true" Label="姓名" /> <f:TextBox ID="TextBox2" ShowLabel="false" CssClass="marginr" Required="true" ShowRedStar="true" BoxFlex="2" runat="server" /> <f:TextBox ID="TextBox4" ShowLabel="false" Required="true" ShowRedStar="true" BoxFlex="3" runat="server" /> </Items> </f:Panel> <f:Panel ID="Panel1" Layout="HBox" BoxConfigAlign="Stretch" CssClass="formitem" ShowHeader="false" ShowBorder="false" runat="server"> <Items> <f:TextBox ID="TextBox1" Required="true" ShowRedStar="true" Label="电子邮箱" RegexPattern="EMAIL" RegexMessage="请输入有效的邮箱地址！" BoxFlex="1" runat="server" /> <f:TextBox ID="TextBox6" Label="电话号码" Width="200px" LabelWidth="80px" Required="true" ShowRedStar="true" runat="server" /> </Items> </f:Panel> </Items> </f:GroupPanel> TabStrip ASPX <f:TabStrip ID="TabStrip1" Width="850px" Height="350px" ShowBorder="true" TabPosition="Top" EnableTabCloseMenu="false" ActiveTabIndex="0" runat="server"> <Tabs> <f:Tab Title="FineUI 论坛" EnableIFrame="true" IFrameUrl="http://fineui.com/bbs/" runat="server" /> <f:Tab Title="标签一" BodyPadding="5px" Layout="Fit" runat="server"> <Items> ... </Items> </f:Tab> <f:Tab Title="<span class='highlight'>标签二（高亮）</span>" BodyPadding="5px" runat="server"> <Items> ... </Items> </f:Tab> </Tabs> </f:TabStrip> 点击 AutoPostBack="true" OnTabIndexChanged="TabStrip1_TabIndexChanged" protected void TabStrip1_TabIndexChanged(object sender, EventArgs e) { if (TabStrip1.ActiveTabIndex == 0) Label1.Text = "标签回发时间：" + DateTime.Now.ToLongTimeString(); else if (TabStrip1.ActiveTabIndex == 1) Label2.Text = "标签回发时间：" + DateTime.Now.ToLongTimeString(); else if (TabStrip1.ActiveTabIndex == 2) Label3.Text = "标签回发时间：" + DateTime.Now.ToLongTimeString(); } script btnShowInClient.OnClientClick = Tab3.GetShowReference(); btnAddTab1.OnClientClick = TabStrip1.GetAddTabReference("dynamic_tab1", "http://fineui.com/version_pro/", "专业版", IconHelper.GetIconUrl(Icon.Application), true); btnRemoveTab2.OnClientClick = TabStrip1.GetRemoveTabReference("dynamic_tab2"); PageContext.RegisterStartupScript(TabStrip1.GetAddTabReference("dynamic_tab3", "http://fineui.com/version_pro/", "专业版（服务器）", IconHelper.GetIconUrl(Icon.Application), true)); 向父页面添加选项卡 <f:Button ID="Button1" runat="server" EnablePostBack="false" OnClientClick="openHelloFineUI();" Text="向父页面添加选项卡" /> var basePath = '<%= ResolveUrl("~/") %>'; function openHelloFineUI() { parent.addExampleTab.apply(null, ['hello_fineui_tab', basePath + 'basic/hello.aspx', '你好 FineUI', basePath + 'res/images/filetype/vs_aspx.png', true]); } Accordion <f:Accordion ID="Accordion1" Title="手风琴控件" runat="server" Width="300px" Height="450px" ShowCollapseTool="true" ShowBorder="True" ActivePaneIndex="1" EnableCollapse="true"> <Panes> <f:AccordionPane ID="AccordionPane1" runat="server" Title="面板一" IconUrl="~/res/images/16/1.png" BodyPadding="2px 5px" ShowBorder="false"> <Items> ... </Items> </f:AccordionPane> <f:AccordionPane ID="AccordionPane2" runat="server" Title="面板二" IconUrl="~/res/images/16/4.png" BodyPadding="2px 5px" ShowBorder="false"> <Items> ... </Items> </f:AccordionPane> <f:AccordionPane ID="AccordionPane3" runat="server" Title="面板三" IconUrl="~/res/images/16/7.png" BodyPadding="2px 5px" ShowBorder="false"> <Items> ... </Items> </f:AccordionPane> </Panes> </f:Accordion> Accordion1.ActivePaneIndex Accordion1.Panes.Count SimpleForm 一行一行布局的简单表单 简单表单 <f:SimpleForm ID="SimpleForm1" BodyPadding="5px" runat="server" Width="550px" EnableCollapse="true" Title="登录表单" ShowHeader="True"> <Items> <f:TextBox runat="server" Label="用户名" ID="tbxUseraName" Required="true" /> <f:TextBox runat="server" ID="tbxPassword" Label="密码" TextMode="Password" Required="true" /> <f:Button runat="server" ID="btnSubmit" CssClass="marginr" OnClick="btnSubmit_Click" ValidateForms="SimpleForm1" Text="登录" /> </Items> </f:SimpleForm> 表单验证 <f:SimpleForm ID="SimpleForm1" BodyPadding="5px" Width="550px" LabelWidth="100px" EnableCollapse="true" runat="server" ShowBorder="True" ShowHeader="True" Title="简单表单"> <Items> <f:DatePicker ID="DatePicker1" Label="开始日期" Required="true" runat="server" /> <f:DatePicker ID="DatePicker2" Label="结束日期（大于开始日期）" Required="true" CompareControl="DatePicker1" CompareOperator="GreaterThan" CompareMessage="结束日期应该大于开始日期！" runat="server" /> <f:TextBox ID="TextBox1" Required="true" Label="文本框 1" runat="server" /> <f:TextBox ID="TextBox2" Required="true" Label="文本框 2（等于文本框 1）" CompareControl="TextBox1" CompareOperator="Equal" CompareMessage="文本框 2 应该等于文本框 1！" runat="server" /> <f:NumberBox ID="NumberBox1" Required="true" Label="数字框 1" runat="server" /> <f:NumberBox ID="NumberBox2" Required="true" Label="数字框 2（大于等于数字框 1）" CompareControl="NumberBox1" CompareOperator="GreaterThanEqual" CompareMessage="数字框 2 应该大于等于数字框 1!" runat="server" /> <f:NumberBox ID="NumberBox3" Required="true" Label="文本框 3（大于等于标签 1）" CompareControl="Label1" CompareOperator="GreaterThanEqual" CompareType="Int" CompareMessage="文本框 3 应该大于等于标签 1！" runat="server" /> <f:Button runat="server" ID="btnSubmit" CssClass="marginr" OnClick="btnSubmit_Click" ValidateForms="SimpleForm1" Text="登录" /> <f:Button runat="server" ID="btnReset" EnablePostBack="false" Text="重置" /> </Items> </f:SimpleForm> btnReset.OnClientClick = SimpleForm1.GetResetReference(); 禁用、只读、数据无效 Form1.Enabled = false; field.Enabled = true; field.Readonly = true; field.MarkInvalid("这个字段出错了！"); field.ClearInvalid(); 遍历表单控件 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); } } } Window eg <f:Window ID="Window1" runat="server" Title="登录表单" WindowPosition="GoldenSection" Width="350px" IsModal="false" EnableClose="false" Hidden="true" EnableMaximize="true" EnableResize="true" MinWidth="300px" MinHeight="300px" MaxHeight="600px" MaxWidth="600px" CloseAction="HidePostBack" OnClose="Window2_Close" > <Toolbars> <f:Toolbar ID="Toolbar1" runat="server" ToolbarAlign="Right" Position="Bottom"> <Items> <f:Button ID="btnLogin" Text="登录" Type="Submit" ValidateForms="SimpleForm1" ValidateTarget="Top" runat="server" OnClick="btnLogin_Click" /> <f:Button ID="btnReset" Text="重置" Type="Reset" EnablePostBack="false" runat="server" /> </Items> </f:Toolbar> </Toolbars> <Items> 放多个复杂控件，如Form </Items> <Content> <f:Label runat="server" ID="labTextInWindow" /> </Content> </f:Window> Reference Window1.Hidden = true; btnShowInClient.OnClientClick = Window2.GetShowReference(); btnHideInClient.OnClientClick = Window2.GetHideReference(); btnHideInClient2.OnClientClick = Window2.GetHidePostBackReference("btnHideInClient2"); Window wnd = FindControl(wndID) as Window; PageContext.RegisterStartupScript(wnd.GetShowReference()); 内嵌IFrame <f:Window ID="Window1" IconUrl="~/res/images/16/10.png" runat="server" Hidden="true" WindowPosition="Center" Title="Popup Window 1" EnableMaximize="true" IsModal="true" EnableResize="true" Target="Self" Height="500px" Width="650px" EnableIFrame="true" CloseAction="HidePostBack" OnClose="Window1_Close"> </f:Window> Button1.OnClientClick = Window1.GetShowReference("../grid/grid_iframe_window.aspx", "弹出窗口一"); protected void Window1_Close(object sender, WindowCloseEventArgs e) { Alert.ShowInTop("Window1被关闭了！"); } 表格中弹出窗体 <Columns> <f:WindowField TextAlign="Center" Width="80px" WindowID="Window1" Icon="Pencil" ToolTip="编辑" DataIFrameUrlFields="Id,Name" DataIFrameUrlFormatString="../grid/grid_iframe_window.aspx?id={0}&name={1}" Title="编辑" IFrameUrl="~/alert.aspx" /> </Columns> <f:Window ID="Window1" Title="弹出窗体" Hidden="true" EnableIFrame="true" EnableMaximize="true" Target="Top" EnableResize="true" runat="server" OnClose="Window1_Close" IsModal="true" Width="850px" Height="550px"> </f:Window> Reference Button1.OnClientClick = Window1.GetSaveStateReference(tbxProvince.ClientID) + Window1.GetShowReference(openUrl); Form 标准布局采用FormRow方式 <f:Form Width="600px" BodyPadding="5px" ID="Form1" LabelWidth="100px" EnableCollapse="true" runat="server" Title="表单"> <Rows> <f:FormRow ColumnWidths="40% 60%"> <Items> <f:Label ID="Label1" runat="server" Label="标签" Text="标签的值" /> <f:CheckBox ID="CheckBox1" runat="server" Text="复选框" Label="复选框" /> </Items> </f:FormRow> ... <Rows> </f:Form> 复杂布局可嵌套Panel <f:Form ID="Form1" MessageTarget="Qtip" Width="600px" BodyPadding="5px" Title="表单" runat="server"> <items> <f:Panel ID="Panel2" ShowHeader="false" CssClass="formitem" ShowBorder="false" Layout="Column" runat="server"> <Items> <f:Label ID="Label2" Width="100px" runat="server" CssClass="marginr" ShowLabel="false" Text="用户名：" /> <f:TextBox ID="TextBox2" ShowLabel="false" Label="用户名" Required="true" Width="150px" CssClass="marginr" runat="server" /> <f:Button ID="Button3" Text="按钮一" CssClass="marginr" runat="server" /> <f:Button ID="Button4" Text="按钮二" runat="server" /> </Items> </f:Panel> <f:Panel ID="Panel1" ShowHeader="false" ShowBorder="false" Layout="Column" CssClass="formitem" runat="server"> <Items> <f:Label ID="Label1" runat="server" Width="100px" CssClass="marginr" ShowLabel="false" Text="作息起止时间：" /> <f:DatePicker ID="DatePicker1" ShowLabel="false" Label="作息开始时间" Required="true" CssClass="marginr" Width="150px" runat="server" /> <f:DatePicker ID="DatePicker2" ShowLabel="false" Label="作息结束时间" Required="true" CompareControl="DatePicker1" CompareOperator="GreaterThan" CompareMessage="结束日期应该大于开始日期！" Width="150px" runat="server" /> </Items> </f:Panel> ... <f:Button ID="Button1" Text="提交表单" ValidateForms="Form1" ValidateMessageBox="true" runat="server" /> </items> </f:Form> --------------------------------------------------- 复杂控件Tree --------------------------------------------------- Tree <f:Tree ID="Tree1" Width="650px" ShowHeader="true" Title="树控件（内联）" EnableCollapse="true" runat="server"> <Nodes> <f:TreeNode Text="中国" Expanded="true"> <f:TreeNode Text="河南省" Expanded="true"> <f:TreeNode Text="驻马店市" NodeID="zhumadian"> <f:TreeNode Text="遂平县" Leaf="false" NodeID="suiping"> <f:TreeNode Text="槐树乡" Leaf="false" NodeID="huaishu"> <f:TreeNode Text="陈庄村" NodeID="chenzhuang"> </f:TreeNode> </f:TreeNode> </f:TreeNode> </f:TreeNode> <f:TreeNode Text="漯河市" NodeID="luohe" /> </f:TreeNode> <f:TreeNode Text="安徽省" Expanded="true" NodeID="anhui"> <f:TreeNode Text="合肥市" Expanded="true" NodeID="hefei"> <f:TreeNode Text="金色池塘小区" NodeID="golden"> </f:TreeNode> <f:TreeNode Text="中国科学技术大学" NodeID="ustc"> </f:TreeNode> </f:TreeNode> </f:TreeNode> </f:TreeNode> </Nodes> </f:Tree> 延迟加载 OnNodeLazyLoad="Tree1_NodeLazyLoad" <f:TreeNode Text="驻马店市（此节点延迟加载）" NodeID="zhumadian"> protected void Tree1_NodeLazyLoad(object sender, TreeNodeEventArgs e) { DynamicAppendNode(e.Node); } private void DynamicAppendNode(TreeNode parentNode) { parentNode.Expanded = true; TreeNode node = null; switch (parentNode.NodeID) { case "zhumadian": node = new TreeNode(); node.Text = "遂平县"; node.Leaf = false; node.NodeID = "suiping"; parentNode.Nodes.Add(node); node = new TreeNode(); node.Text = "西平县"; node.Leaf = true; node.NodeID = "xiping"; parentNode.Nodes.Add(node); break; case "suiping": node = new TreeNode(); node.Text = "槐树乡"; node.Leaf = false; node.NodeID = "huaishu"; parentNode.Nodes.Add(node); break; case "huaishu": node = new TreeNode(); node.Text = "陈庄村"; node.Leaf = true; node.NodeID = "chenzhuang"; parentNode.Nodes.Add(node); break; } } 绑定到DataTable（或类） 自己构造，参考http://fineui.com/demo/#/demo/tree/databind/tree_datatable.aspx <f:Tree ID="Tree1" Width="650px" ShowHeader="true" EnableCollapse="true" Title="树控件" runat="server" /> private void ResolveSubTree(DataRow dataRow, TreeNode treeNode) { DataRow[] rows = dataRow.GetChildRows("TreeRelation"); if (rows.Length > 0) { treeNode.Expanded = true; foreach (DataRow row in rows) { TreeNode node = new TreeNode(); node.Text = row["Text"].ToString(); treeNode.Nodes.Add(node); ResolveSubTree(row, node); } } } 绑定到SiteMap <f:Tree ID="Tree1" Width="650px" ShowHeader="true" Title="树控件（绑定到 SiteMap）" EnableCollapse="true" runat="server"> <Mappings> <f:XmlAttributeMapping From="url" To="NavigateUrl" /> <f:XmlAttributeMapping From="title" To="Text" /> <f:XmlAttributeMapping From="description" To="ToolTip" /> <f:XmlAttributeMapping From="target" To="Target" /> </Mappings> </f:Tree> <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/tree/databind/Web.sitemap"></asp:XmlDataSource> Tree1.DataSource = XmlDataSource2; Tree1.DataBind(); --------------------------------------------------- 复杂控件Grid --------------------------------------------------- Grid eg <f:Grid ID="Grid1" Title="表格" EnableCollapse="true" AllowSorting="true" SortField="Gender" SortDirection="ASC" Width="850px" runat="server" EnableCheckBoxSelect="true" DataKeyNames="Id,Name,AtSchool" > <Toolbars> <f:Toolbar ID="Toolbar1" runat="server"> <Items> <f:Button ID="btnNew" Text="新增数据" Icon="Add" EnablePostBack="false" runat="server" /> <f:Button ID="btnDelete" Text="删除选中行" Icon="Delete" OnClick="btnDelete_Click" runat="server" /> <f:LinkButtonField ColumnID="deleteField" Width="50px" TextAlign="Center" Icon="Delete" ToolTip="删除" ConfirmText="确定删除此记录？" ConfirmTarget="Top" CommandName="Delete"/> </Items> </f:Toolbar> </Toolbars> <Columns> <f:CheckBoxField Width="80px" SortField="AtSchool" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" /> <f:HyperLinkField HeaderText="所学专业" DataToolTipField="Major" DataTextField="Major" DataTextFormatString="{0}" DataNavigateUrlFields="Major" DataNavigateUrlFormatString="http://gsa.ustc.edu.cn/search?q={0}" UrlEncode="true" Target="_blank" ExpandUnusedSpace="True" /> <f:ImageField Width="80px" DataImageUrlField="Group" DataImageUrlFormatString="~/res/images/16/{0}.png" HeaderText="分组" /> </Columns> </f:Grid> 各种列 编号列 <f:RowNumberField /> 绑定列 <f:BoundField Width="100px" SortField="Name" DataField="Name" DataFormatString="{0}" HeaderText="姓名" /> <f:BoundField Width="100px" SortField="EntranceYear" DataField="EntranceYear" HeaderText="入学年份" /> 模板列 <f:TemplateField Width="60px"> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label> </ItemTemplate> </f:TemplateField> <f:TemplateField Width="80px" SortField="Gender" HeaderText="性别"> <ItemTemplate> <asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label> </ItemTemplate> </f:TemplateField> 购物车示例：http://fineui.com/demo/#/demo/grid/grid_edit_cart.aspx 弹窗列 <f:WindowField ColumnID="myWindowField" Width="80px" WindowID="Window1" HeaderText="窗口列" Icon="Pencil" ToolTip="编辑" DataTextFormatString="{0}" DataIFrameUrlFields="Id" DataIFrameUrlFormatString="grid_iframe_window.aspx?id={0}" DataWindowTitleField="Name" DataWindowTitleFormatString="编辑 - {0}" /> 模拟树列 <f:BoundField DataField="Name" DataSimulateTreeLevelField="TreeLevel" DataFormatString="{0}" HeaderText="地区" ExpandUnusedSpace="True" /> 删除提示 <f:LinkButtonField TextAlign="Center" ConfirmText="你确定要这么做么？" ConfirmTarget="Top" ColumnID="lbfAction1" Width="60px" CommandName="Action1" Text="按钮" /> 扩展列（点击加号会展开） <f:TemplateField ColumnID="expander" RenderAsRowExpander="true"> <ItemTemplate> <div class="expander"> <strong>姓名：</strong><%# Eval("Name") %> <strong>简介：</strong><%# Eval("Desc") %> </div> </ItemTemplate> </f:TemplateField> 扩展列（嵌套表格） http://fineui.com/demo/#/demo/grid/grid_rowexpander_grid.aspx 多表头 http://fineui.com/demo/#/demo/grid/grid_groupheader.aspx <f:GroupField HeaderText="河南省"> <Columns> <f:GroupField HeaderText="驻马店市"> <Columns> <f:BoundField Width="100px" DataField="HZData1" HeaderText="数据一" /> <f:BoundField Width="100px" DataField="HZData2" HeaderText="数据二" /> </Columns> </f:GroupField> <f:GroupField HeaderText="漯河市"> <Columns> <f:BoundField Width="100px" DataField="HLData1" HeaderText="数据一" /> <f:BoundField Width="100px" DataField="HLData2" HeaderText="数据二" /> </Columns> </f:GroupField> </Columns> </f:GroupField> 列的特殊属性 列扩展填满 ExpandUnusedSpace="True" 列锁定 AllowColumnLocking="true" <f:BoundField DataField="Year" EnableLock="true" Locked="true" Width="100px" HeaderText="统计年份<br>2000-2009" /> 分页排序 内存分页 AllowPaging="true" PageSize="5" IsDatabasePaging="false" 数据库分页 AllowPaging="true" PageSize="5" IsDatabasePaging="true" OnPageIndexChange="Grid1_PageIndexChange" protected void Grid1_PageIndexChange(object sender, GridPageEventArgs e) { BindGrid(Grid1.PageIndex); } 内存排序 AllowSorting="true" SortField="Gender" SortDirection="ASC" 数据库排序 http://fineui.com/demo/#/demo/grid/grid_paging_database_sorting.aspx AllowSorting="true" SortField="Gender" SortDirection="ASC" OnSort="Grid1_Sort" protected void Grid1_Sort(object sender, GridSortEventArgs e) { //Grid1.SortDirection = e.SortDirection; //Grid1.SortField = e.SortField; BindGrid(); } 分页区增加功能 <PageItems> <f:ToolbarSeparator ID="ToolbarSeparator3" runat="server" /> <f:ToolbarText ID="ToolbarText1" runat="server" Text="每页记录数：" /> <f:DropDownList ID="ddlGridPageSize" Width="80px" AutoPostBack="true" OnSelectedIndexChanged="ddlGridPageSize_SelectedIndexChanged" runat="server"> <f:ListItem Text="10" Value="10" /> <f:ListItem Text="20" Value="20" /> <f:ListItem Text="50" Value="50" /> <f:ListItem Text="100" Value="100" /> </f:DropDownList> </PageItems> ddlGridPageSize.SelectedValue = DbConfig.PageSize.ToString(); protected void ddlGridPageSize_SelectedIndexChanged(object sender, EventArgs e) { Grid1.PageSize = Convert.ToInt32(ddlGridPageSize.SelectedValue); BindGrid(); } 事件 行选择 EnableCheckBoxSelect="true" EnableMultiSelect="false" Button3.OnClientClick = Grid1.GetNoSelectionAlertInTopReference("没有选中项！"); Grid1.SelectedRowIndexArray = new int[] { 4, 9 }; 行点击 EnableRowClickEvent="true" OnRowClick="Grid1_RowClick" protected void Grid1_RowClick(object sender, GridRowClickEventArgs e) { Alert.ShowInTop(String.Format("你点击了第 {0} 行（单击）", e.RowIndex + 1)); } 行双击 EnableRowDoubleClickEvent="true" OnRowDoubleClick="Grid1_RowDoubleClick" protected void Grid1_RowDoubleClick(object sender, GridRowClickEventArgs e) { Alert.ShowInTop(String.Format("你点击了第 {0} 行（双击）", e.RowIndex + 1)); } 命令 OnRowCommand="Grid1_RowCommand" <f:LinkButtonField HeaderText=" " Width="80px" CommandName="Action1" Text="按钮 1" /> <f:LinkButtonField HeaderText=" " Width="80px" ConfirmText="你确定要这么做么？" ConfirmTarget="Top" CommandName="Action2" Text="按钮 2" /> protected void Grid1_RowCommand(object sender, GridCommandEventArgs e) { if (e.CommandName == "Action1" || e.CommandName == "Action2") { labResult.Text = String.Format("你点击了第 {0} 行，第 {1} 列，行命令是 {2}", e.RowIndex + 1, e.ColumnIndex + 1, e.CommandName); } } OnPreRowDataBound OnPreRowDataBound="Grid1_PreRowDataBound" <f:LinkButtonField ColumnID="deleteField" ...../> // 行绑定事件（若是admin，删除按钮无效） protected void Grid1_PreRowDataBound(object sender, FineUI.GridPreRowEventArgs e) { User user = e.DataItem as User; if (user.Name == "admin") { FineUI.LinkButtonField deleteField = Grid1.FindColumn("deleteField") as FineUI.LinkButtonField; deleteField.Enabled = false; // 按钮不能点（如果能隐藏更好，估计要用RowPreDataBound事件) deleteField.ToolTip = "不能删除超级管理员！"; } } protected void Grid1_PreRowDataBound(object sender, GridPreRowEventArgs e) { LinkButtonField lbfAction1 = Grid1.FindColumn("lbfAction1") as LinkButtonField; LinkButtonField lbfAction2 = Grid1.FindColumn("lbfAction2") as LinkButtonField; CheckBoxField cbxAtSchool = Grid1.FindColumn("cbxAtSchool") as CheckBoxField; HyperLinkField linkField = Grid1.FindColumn("hlMajor") as HyperLinkField; if (e.RowIndex < 5) { ... } // 如果绑定到 DataTable，那么这里的 DataItem 就是 DataRowView DataRowView row = e.DataItem as DataRowView; if (linkField != null && row != null) { linkField.DataTextFormatString = "{0} (" + row["EntranceYear"].ToString() + ")"; } } RowDataBound OnRowDataBound="Grid1_RowDataBound" protected void Grid1_RowDataBound(object sender, GridRowEventArgs e) { // e.DataItem -> System.Data.DataRowView 或者自定义类 // e.RowIndex -> 当前行序号（从 0 开始） // e.Values -> 当前行每一列渲染后的 HTML 片段 //object a = Grid1.DataKeys[e.RowIndex][0]; DataRowView row = e.DataItem as DataRowView; if (row != null) e.Values[4] = String.Format("{0} ({1})", e.Values[4], row["EntranceYear"]); } 合计行 EnableSummary="true" SummaryPosition="Flow" private void OutputSummaryData() { DataTable source = DataSourceUtil.GetDataTable2(); float donateTotal = 0.0f; float feeTotal = 0.0f; foreach (DataRow row in source.Rows) { donateTotal += Convert.ToInt32(row["Donate"]); feeTotal += Convert.ToInt32(row["Fee"]); } JObject summary = new JObject(); summary.Add("fee", feeTotal.ToString("F2")); summary.Add("donate", donateTotal.ToString("F2")); Grid1.SummaryData = summary; } 行内编辑(RenderField) http://fineui.com/demo/#/demo/grid/grid_editor_cell.aspx AllowCellEditing="true" ClicksToEdit="1" DataIDField="Id" <Columns> <f:RenderField Width="100px" ColumnID="Name" DataField="Name" FieldType="String" HeaderText="姓名"> <Editor> <f:TextBox ID="tbxEditorName" Required="true" runat="server" /> </Editor> </f:RenderField> <f:RenderField Width="100px" ColumnID="Gender" DataField="Gender" FieldType="Int" RendererFunction="renderGender" HeaderText="性别"> <Editor> <f:DropDownList ID="ddlGender" Required="true" runat="server"> <f:ListItem Text="男" Value="1" /> <f:ListItem Text="女" Value="0" /> </f:DropDownList> </Editor> </f:RenderField> <f:RenderField Width="100px" ColumnID="EntranceYear" DataField="EntranceYear" FieldType="Int" HeaderText="入学年份"> <Editor> <f:NumberBox ID="tbxEditorEntranceYear" NoDecimal="true" NoNegative="true" MinValue="2000" MaxValue="2025" runat="server" /> </Editor> </f:RenderField> <f:RenderField Width="120px" ColumnID="LogTime" DataField="LogTime" FieldType="Date" Renderer="Date" RendererArgument="yyyy-MM-dd" HeaderText="入学日期"> <Editor> <f:DatePicker ID="DatePicker1" Required="true" runat="server" /> </Editor> </f:RenderField> <f:RenderCheckField Width="100px" ColumnID="AtSchool" DataField="AtSchool" HeaderText="是否在校" /> <f:RenderField Width="100px" ColumnID="Major" DataField="Major" FieldType="String" ExpandUnusedSpace="true" HeaderText="所学专业"> <Editor> <f:TextBox ID="tbxEditorMajor" Required="true" runat="server" /> </Editor> </f:RenderField> </Columns> 右键菜单 http://fineui.com/demo/#/demo/grid/grid_checkboxfield_rowcheckall_contextmenu.aspx <f:Menu ID="Menu1" runat="server"> <f:MenuButton ID="btnSelectRows" EnablePostBack="false" runat="server" Text="全选行"> <Listeners> <f:Listener Event="click" Handler="onSelectRows" /> </Listeners> </f:MenuButton> <f:MenuButton ID="btnUnselectRows" EnablePostBack="false" runat="server" Text="取消行"> <Listeners> <f:Listener Event="click" Handler="onUnselectRows" /> </Listeners> </f:MenuButton> </f:Menu> 批量删除 <f:Grid EnableCheckBoxSelect="true" ...> <f:Button ID="btnDeleteSelected" Icon="Delete" runat="server" Text="删除" OnClick="btnDeleteSelected_Click" /> protected void btnDeleteSelected_Click(object sender, EventArgs e) { if (!Common.CheckPower("CoreUserDelete")) return; List<int> ids = GridHelper.GetSelectedRowKeyIDs(Grid1); Common.Db.Users.Where(u => ids.Contains(u.ID)).Delete(); BindGrid(); } 自定义分页大小 <PageItems> <f:ToolbarSeparator ID="ToolbarSeparator3" runat="server" /> <f:ToolbarText ID="ToolbarText1" runat="server" Text="每页记录数：" /> <f:DropDownList ID="ddlGridPageSize" Width="80px" AutoPostBack="true" OnSelectedIndexChanged="ddlGridPageSize_SelectedIndexChanged" runat="server"> <f:ListItem Text="10" Value="10" /> <f:ListItem Text="20" Value="20" /> <f:ListItem Text="50" Value="50" /> <f:ListItem Text="100" Value="100" /> </f:DropDownList> </PageItems> ddlGridPageSize.SelectedValue = DbConfig.PageSize.ToString(); protected void ddlGridPageSize_SelectedIndexChanged(object sender, EventArgs e) { Grid1.PageSize = Convert.ToInt32(ddlGridPageSize.SelectedValue); BindGrid(); }
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。