2013年6月12日 星期三

【JQuery】製作Sortable下拉時ScrollBar也會跟著捲動


JQuery Sortable套件

這個常常被我用來設定排序的套件,但有個缺點就是它在拉動時父容器不會跟著滾動ScrollBar,所以自己稍做修改了一下(包含上下按鈕的功能)
  • 先看一下成果
  • HTML
             <ul id="sortable">
                    <li class="ui-state-default" data-sort="a">1</li>
                    <li class="ui-state-default" data-sort="b">2</li>
                    <li class="ui-state-default">3</li>
                    <li class="ui-state-default">4</li>
                    <li class="ui-state-default">5</li>
                    <li class="ui-state-default">6</li>
                    <li class="ui-state-default">7</li>
                    <li class="ui-state-default">8</li>
                    <li class="ui-state-default">9</li>
                    <li class="ui-state-default">10</li>
                    <li class="ui-state-default">11</li>
                    <li class="ui-state-default">12</li>
                    <li class="ui-state-default">13</li>
                    <li class="ui-state-default">14</li>
                    <li class="ui-state-default">15</li>
                    <li class="ui-state-default">16</li>
                    <li class="ui-state-default">17</li>
                    <li class="ui-state-default">18</li>
                    <li class="ui-state-default">19</li>
                    <li class="ui-state-default">20</li>
                    <li class="ui-state-default">21</li>
             </ul>
             <div id="sortbtn">
                    <input type="button" value="▲" id="btnUp" class="btn btn-info" />
                    <input type="button" value="▼" id="btnDown" class="btn btn-info"/>
             </div>
    
  • CSS
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 150px; }
    #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    html>body #sortable li { height: 1.5em; line-height: 1.2em; }
    .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
    
    #sortable
    {
        border:1px dotted gray;
        overflow:auto;
        height:500px;
        display:inline-block;
        width:130px;
    }
    #sortbtn
    {
        display:inline-block;
        width:30px;
        vertical-align:top;
        position:relative;
        top:180px;
    }
    
  • JavaScript
    $(function () {
        var is_dragging = false;
        $('#sortable').disableSelection().sortable({
            placeholder: "ui-state-highlight",
            axis: 'y',
            start: function (event, ui) { is_dragging = true; itemSelect(ui.item); },
            stop: function (event, ui) { is_dragging = false;}
        }).mousemove(function (e) {
            if (is_dragging) {
                $('#sortable').scrollTop(function (i, v) {
                    var h = $('#sortable').height();
                    var y = e.clientY - h / 2;
                    return v + y * 0.05;
                });
            }
        });
    
        //=== 點擊Item時
        $('#sortable > li').click(function (event) {
            itemSelect(this);
        });
    
        ////=== 上下按鈕
        $('#btnUp,#btnDown').click(function () {
            var Container_height = $('#sortable').height();
            var position_top = $('#sortable').position().top;
    
            if (lastSelect != null) {
                if ($(this).prop('id') == "btnUp") {
                    lastSelect.prev().before(lastSelect);
                    //卷軸向上滾動
                    $('#sortable').scrollTop(function (i, v) {
                        if (lastSelect.position().top <= position_top + Container_height / 2) {
                            return v - lastSelect.height();
                        }
                    });
                }
                else {
                    lastSelect.next().after(lastSelect);
                    //卷軸向下滾動
                    $('#sortable').scrollTop(function (i, v) {
                        if (lastSelect.position().top >= position_top + Container_height / 2) {
                            return v + lastSelect.height();
                        }
                    });
                }
            }
        });
    });
    

2013年6月10日 星期一

【ASP】 動態新增GridView的 TemplateField欄位


因為某些搜尋條件的不同,造成要顯示的欄位可能也略有差異
一般可以透過多個GridView隱藏來隱藏去的方法,或是動態將某些Column隱藏起來
今天試的方法是在搜尋完後DataBind之前先將GridView的欄位換成自己想要的
新增一般BoundField沒什麼太特別的,但TemplateField就卡關了....參考很多資料後來做個筆記!!!

  • 先將該準備的類別與方法準備好
        ''' <summary>
        ''' 複製控制項
        ''' </summary>
        ''' <param name="taget"></param>
        ''' <param name="source"></param>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Shared Function Clone(ByVal taget As Object, ByVal source As Object) As Object
            For Each p As System.Reflection.PropertyInfo In source.GetType().GetProperties()
                If p.CanRead AndAlso p.CanWrite Then
                    p.SetValue(taget, p.GetValue(source, p.GetIndexParameters()), p.GetIndexParameters())
                End If
            Next
            Return taget
        End Function
    
     '新增一個類別實作ITemplate介面,就會跑出InstantiateIn的方法
    Public Class gvTemplate
            Implements ITemplate
    
            Private Property templateType As DataControlRowType
            Private Property columnName As String
            Private Property Control As Object
            Public Sub New(type As DataControlRowType, colname As String, ctrl As Object)
                templateType = type
                columnName = colname
                Control = ctrl
            End Sub
    
            Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn
                Select Case templateType
                    Case DataControlRowType.Header
                        If Control Is Nothing Then
                            '如果沒有沒有控制項,則塞入粗體字
                            Dim lt As Literal = New Literal()
                            lt.Text = "<B>" + columnName + "</B>"
                            container.Controls.Add(lt)
                        ElseIf TypeOf Control Is CheckBox Then
                            '否則塞入控制項
                            container.Controls.Add(Control)
                        End If
                    Case DataControlRowType.DataRow
                        Dim obj As Object
                        If Not Control Is Nothing Then
                            Select Case Control.GetType().Name
                                Case "CheckBox"
                                    obj = New CheckBox()
                                    
                                    '如果有傳入WebControl的話,複製一個新的並把它加到DataRow中
                                    '如果沒這麼做就直接將傳入的Control加入Container當中
                                    '會變成只有最後一行有那個Control(Control為Reference型別)
                                    SysHelper.Clone(obj, Control)
                            End Select
                            obj = SysHelper.Clone(obj, Control)
                        Else
                            obj = New Label()
                            AddHandler CType(obj, Label).DataBinding, AddressOf data_DataBinding
                        End If
                        container.Controls.Add(obj)
                End Select
            End Sub
    
            Private Sub data_DataBinding(sender As Object, e As EventArgs)
                Dim lbl As Label = CType(sender, Label)
                Dim row As GridViewRow = CType(lbl.NamingContainer, GridViewRow)
                lbl.Text = DataBinder.Eval(row.DataItem, columnName).ToString()
            End Sub
        End Class
    
  • 使用方法如下
    Private Sub setGridViewColumns(ByVal mode As GriviewMode)
            gvSummons.Columns.Clear()
            '新增TemplateField的方法
            Dim TemplateField As TemplateField = New TemplateField()
            TemplateField.ItemStyle.HorizontalAlign = HorizontalAlign.Center
            Dim cb As CheckBox = New CheckBox()
            cb.ID = "cbSelectAll"
            cb.Text = "註記"
            cb.CssClass = "gvSummonsSelectAll"
            TemplateField.HeaderTemplate = New SysHelper.gvTemplate(DataControlRowType.Header, "", cb)
    
            cb = New CheckBox()
            cb.ID = "cbSelect"
            cb.CssClass = "gvSummonsSelect"
            TemplateField.ItemTemplate = New SysHelper.gvTemplate(DataControlRowType.DataRow, "", cb)        
            gvSummons.Columns.Add(TemplateField)
    
                  
            '新增BoundField的方法
            Dim BoundField As BoundField = New BoundField()
            BoundField.DataField = "voucherno"
            BoundField.HeaderText = "傳票號碼"
            BoundField.ItemStyle.HorizontalAlign = HorizontalAlign.Center
            gvSummons.Columns.Add(BoundField)
        End Sub
    

【JavaScript】網址傳遞中文參數亂碼解決問題


參考

今天網址列傳遞參數時,透過Request.QueryString轉回來時變成亂碼。參考該部落格的解法後做個小筆記避免自己忘記
  • 如果是用JavaScript串網址的話,用encodeURI()這個方法
    var Feature = 'dialogWidth:500px;dialogHeight:200px;status:0;help:0;';
    var Url = 'wFrmAccount_Insert.aspx?src=' + src + '&bancode=' + bancode + '&ym=' + ym + '&type=' + type;
    //將網址先編譯過後再傳遞
    window.showModalDialog(encodeURI(Url), window, Feature
    
  • 如果是在ServerSide串網址,則用以下方法
    Response.Redirect("WebForm2.aspx?id=" + Server.UrlEncode("中文"))