ASP.NET-FineUI開發實踐-8

標籤：blog   http   io   os   ar   java   for   sp   div   

  上回類比的是下拉grid，這回我把下拉grid和表格自動不全放一起了，實在是好做，但是也有很多要注意的，現在分享下，大家學習。

接上回 傳送門

 1. 有個tbxMyBox1_TriggerClick方法直接重寫了，目的是顯示下拉的列表，直接上代碼注意看注釋，grid ID是grid2

     function tbxMyBox1_TriggerClick() {            //先隱藏            F(‘<% =Grid2.ClientID%>‘).hide();            //位置設定樣式            $(‘#Grid2_wrapper‘).css(‘top‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());            $(‘#Grid2_wrapper‘).css(‘left‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);            $(‘#Grid2_wrapper‘).css(‘position‘, ‘fixed‘);            $(‘#Grid2_wrapper‘).css(‘z-index‘, ‘9999‘);            //顯示方法            F(‘<% =Grid2.ClientID%>‘).show(F(‘<% =TriggerBox1.ClientID %>‘).getEl(), function () {            });        }

　　

下面問題來了：學習...不是這個  grid 顯示出來老在那獃著，找了半天才找見解決方案，點擊grid2以外自動隱藏grid2，加上這句 

                //頁面的點擊事件                $(document).click(function (e) {                    var target = $(e.target);                    //判斷是否點擊的位置，是gird和當前編輯的TriggerBox1就不變，點擊其他位置就隱藏grid                    //closest是一層層找上層元素，找不到返回0，可以在網上看看例子                    //第二個判斷是grid是否隱藏，顯示的再觸發隱藏                    if (target.closest("#<% =Grid2.ClientID%>").length == 0 && !F(‘<% =Grid2.ClientID%>‘).isHidden() && target.closest("#<% =TriggerBox1.ClientID%>").length == 0) {                        showhide();                    }                });

　　加到show方法裡，在grid2show出來之後觸發。全：

 function tbxMyBox1_TriggerClick(t) {            //先隱藏            F(‘<% =Grid2.ClientID%>‘).hide();            //位置設定樣式            $(‘#Grid2_wrapper‘).css(‘top‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().top + $("#<% =TriggerBox1.ClientID %>-triggerWrap").height());            $(‘#Grid2_wrapper‘).css(‘left‘, $("#<% =TriggerBox1.ClientID %>-triggerWrap").offset().left);            $(‘#Grid2_wrapper‘).css(‘position‘, ‘fixed‘);            $(‘#Grid2_wrapper‘).css(‘z-index‘, ‘9999‘);            //顯示方法            F(‘<% =Grid2.ClientID%>‘).show(F(‘<% =TriggerBox1.ClientID %>‘).getEl(), function () {                //頁面的點擊事件                $(document).click(function (e) {                    var target = $(e.target);                    //判斷是否點擊的位置，是gird和當前編輯的TriggerBox1就不變，點擊其他位置就隱藏grid                    //closest是一層層找上層元素，找不到返回0，可以在網上看看例子                    //第二個判斷是grid是否隱藏，顯示的再觸發隱藏                    if (target.closest("#<% =Grid2.ClientID%>").length == 0 && !F(‘<% =Grid2.ClientID%>‘).isHidden() && target.closest("#<% =TriggerBox1.ClientID%>").length == 0) {                        showhide();                    }                });            });        }

　　

 showhide();以前寫了，就不寫了。顯示出來了。2. 問題又來了，當點擊grid1外的位置編輯列還原了，就是又變為正常狀態，輸入框沒了，好像是以前寫過startEditByPosition是編輯方法，在ext-part2.js裡找到的，有圖為證 字面意思就是開始編輯的位置，參數是行號和列號。這個方法的用處就是點擊gird2時參數grid1的beforeedit事件

        F.ready(function () {            //浮動grid2能跑加上就不跑了            F(‘<% =Grid2.ClientID%>‘).draggable = false;            //編輯之前的事件            F(‘<% = Grid1.ClientID %>‘).on(‘beforeedit‘, function (editor, e) {                //列名                if (e.field == ‘Name‘) {                    //列號                    window._selectrowIndex = e.rowIdx;                    window._selectcellIndex = e.colIdx;                }                return true;            });        });

　當項目點擊事件裡隨時改變編輯位置，這個事件也是斟酌過的，其他的事件有重新整理，一眼就看出來了，這個事件看不見重新整理。

　

            //項點擊事件            F(‘<%= Grid2.ClientID %>‘).on(‘itemmousedown‘, function (View, record, item, index, e) {                F(‘<% =Grid1.ClientID%>‘).f_cellEditing.cancelEdit();                F(‘<% =Grid1.ClientID%>‘).f_cellEditing.startEditByPosition({                    row: _selectrowIndex, column: _selectcellIndex                });            });

　　3. 就差點擊事件了，我用了表格的雙擊事件，前台js觸發，可能是用慣了

            F(‘<% =Grid2.ClientID%>‘).on(‘itemdblclick‘, function (grid, record, item, index) {                F.customEvent(‘Grid2_click_‘ + index);                F(‘<% =Grid2.ClientID%>‘).hide();            });

　　後台：

protected void PageManager1_CustomEvent(object sender, CustomEventArgs e)        {            if (e.EventArgument.IndexOf("Grid2_click_") >= 0)            {                int index = Convert.ToInt32(e.EventArgument.Split(‘_‘)[2].ToString());                string name = Grid2.Rows[index].Values[Grid2.FindColumn("Name").ColumnIndex].ToString();                DataTable table = GetDataTable();                foreach (DataRow row in table.Rows)                {                    if (row["Name"].ToString() == name)                    {                        string deleteScript = Grid1.GetDeleteIndexReference();                        //string deleteScript = "";                        JObject defaultObj = new JObject();                        defaultObj.Add("Name", row["Name"].ToString());                        defaultObj.Add("Gender", row["Gender"].ToString());                        defaultObj.Add("EntranceYear", row["EntranceYear"].ToString());                        defaultObj.Add("EntranceDate", row["EntranceDate"].ToString());                        defaultObj.Add("AtSchool", (bool)row["AtSchool"]);                        defaultObj.Add("Major", row["Major"].ToString());                        PageContext.RegisterStartupScript(                            deleteScript //刪除當前行                            + Grid1.GetAddNewRecordReferenceByindex(defaultObj) //新增定義的行                            + "");//把表單管理                    }                }            }        }

　　

ASP.NET-FineUI開發實踐-8