FineUI 相關

FineUI 相關（ExtAsp.Net 2008-2017），記在這把，省得找不到了。

不知道同年代的相似項目Coolite怎麼樣了？改名爲Ext.net了，在國外活得還算滋潤，在國內嘛。。死貴死貴的東西那是沒人用的。

 

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("&nbsp;&nbsp;", texts.ToArray()),
                    String.Join("&nbsp;&nbsp;", 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="&nbsp;" Width="80px" CommandName="Action1" Text="按鈕 1" />
        <f:LinkButtonField HeaderText="&nbsp;" 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();
    }