ASP.NET-FineUI開發實踐-7

下拉顯示grid列表。其實很簡單，但是試了很多方法，水平有限，主要是都不好使，還是簡單的好使了，分享下。

先是看了看網上的，是直接寫個了extjs控件類（我也不懂），然后直接用就行了，要寫成FineUI的我還沒那個水平，就放棄了。又看了看其他的例子，沒多大用。

原理就是點擊下拉時把grid在指定位置顯示出來，選擇grid行后賦值給下拉控件。

下拉的控件DropDownList其實並不適合，首先要捕捉展開事件，難在賦值上，這個思路是給DropDownList綁定數據下拉顯示grid而不是自動的數據，grid選完后控制DropDownList選擇的數據，給DropDownList綁定后出現下拉框和grid同時出現，下拉的列表弄不沒，看源碼得知下拉的列表時自動生成的，ID不固定，沒規律獲取不到，如果只綁定數據不顯示數據也會出現一個自動生成的div只是沒內容，但是不好看，總之不要DropDownList，用TriggerBox原因是這倆長得一樣。

1.TriggerBox下拉事件就是點擊事件 OnClientTriggerClick 就可以了，grid的位置還是選擇了用jq控制，extjs也能控制，但不適合FineUI。

 

2.利用在form下grid會先生成_wrapper div標簽，挪了_wrapper 就等於挪了grid

3.上代碼

 

function showgrid() {
            //獲取的是TriggerBox1里那個輸入框的位置，不是TriggerBox1的位置，因為還有個lable的寬度
            //alert($("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
            //alert($("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top);
            //設置位置，top和left
            $('#Grid1_wrapper').css('top', $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());
            $('#Grid1_wrapper').css('left', $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);
            //設置該div是浮動
            $('#Grid1_wrapper').css('position', 'fixed');
            //顯示grid，第二個參數是顯示完成后執行的函數，先放着可以跟后台交互重新加載grid啥的
            F('<% =Grid1.ClientID%>').show(F('<% =TriggerBox1.ClientID %>').getEl(), function () {
            });
            //extjs 的方法showAt好像不管用，沒試
            //F('<% =Grid1.ClientID%>').showAt(F('<% =TriggerBox1.ClientID%>').getXY(),true);
        }

　　

恩就這幾行，已知問題是Grid1_wrapper老長了，挪完了可能會出滾動條，這個就不解決了，應該好弄。

如果grid能移動把在ready把這句加上

F('<% =Grid1.ClientID%>').draggable = false;

4.賦值，前台grid選擇事件老是沒試成功，只能選擇了后台事件，注冊grid的行點擊事件，咋寫就不說了，看例子，后台是獲取數據和顯示

TriggerBox1.Text = Grid1.Rows[index].Values[Grid1.FindColumn("Name").ColumnIndex].ToString();

　　

這句是顯示名字的，如果是ID就放隱藏空間里，然后在取，就不寫了。

上個圖

5.grid的分頁條弄出來了，放了個取消就是關閉grid，直接在前台實現是

F('<% =Grid1.ClientID%>').hide();

　　

這個功能可以放在TriggerBox控件的第二個按鈕X完成，就不寫了。

6.點着點着發現我的頁簽總保持一個，不知道啥時候改的，也放出來吧

7.DropDownList的展開收起事件

F('<% =DropDownList1.ClientID%>').on('expand', function (combo) {
            });
            F('<% =DropDownList1.ClientID%>').on('collapse', function (combo) {
                //F('<% =Grid1.ClientID%>').hide();
            });

　　

后記：DropDownList可以判斷選擇位置，地方不夠了會顯示到上面或者改變選項div的大小。我這個沒判斷，想弄的自己加吧，多測測