none
C# WebForm的GridView中如何引用外掛的日期程式?

    問題

  • 親愛的各位大大:

           我有一個空的GridView依據使用者要求我們需要在需求日期這一欄給他一個可以選擇日期的表單,請問我該如何添加上去呢?我選擇的是jQuery的DatePicker為外掛路徑在http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js

    我想把它加入在程式的需求日期那欄中,請問我該如何加上去?

    C#  .aspx 程式碼

    <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false">
            <Columns>
            <asp:TemplateField HeaderText="料號" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30"  ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text1"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="品名" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text2"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="規格" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text3"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="數量" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30"  ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text4"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="廠牌" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text5"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="需求日期" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text5"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            </Columns>
            </asp:GridView>

    .aspx.cs程式碼

          protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {     

                bool[] data = new bool[6];
                GridView1.DataSource = data;
                GridView1.DataBind();

             }

    jQuery 部份

    <div class="demo">

    <p>Date:<input type="text" id="datepicker"></p>

    </div>

    <script type="text/javascript">

    $(function(){

       $("#datepicker").datepicker();

    });

    </script>

    問題1:如何才能讓"需求日期"在這六列每一列都有?且都可選取,而取得其值?

    感謝各位大大的指教。

    2010年7月1日 上午 06:55

解答

  •         <asp:TemplateField HeaderText="需求日期" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text5" CssClass="datepicker" ></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>

    給您那個textbox,一個css,然後用css去定位DOM的位置,jQuery的selector換成用css,

    $(function(){

       $('.datepicker ').datepicker();

    });

    這樣就可以了。

     

    感謝hunterpo幫忙糾正我的筆誤,謝謝。


    常用資源參考:
    小弟的blog: In 91
    • 已提議為解答 阿尼Moderator 2010年7月1日 上午 07:41
    • 已編輯 91MVP, Moderator 2010年7月1日 上午 08:23 將jQuery selector的css條件加上引號
    • 已標示為解答 Lolota Lee 2010年7月7日 上午 07:59
    2010年7月1日 上午 07:28
    版主

所有回覆

  •         <asp:TemplateField HeaderText="需求日期" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text5" CssClass="datepicker" ></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>

    給您那個textbox,一個css,然後用css去定位DOM的位置,jQuery的selector換成用css,

    $(function(){

       $('.datepicker ').datepicker();

    });

    這樣就可以了。

     

    感謝hunterpo幫忙糾正我的筆誤,謝謝。


    常用資源參考:
    小弟的blog: In 91
    • 已提議為解答 阿尼Moderator 2010年7月1日 上午 07:41
    • 已編輯 91MVP, Moderator 2010年7月1日 上午 08:23 將jQuery selector的css條件加上引號
    • 已標示為解答 Lolota Lee 2010年7月7日 上午 07:59
    2010年7月1日 上午 07:28
    版主
  •         <asp:TemplateField HeaderText="需求日期" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text5" CssClass="datepicker" ></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>

    給您那個textbox,一個css,然後用css去定位DOM的位置,jQuery的selector換成用css,

    $(function(){
       $(.datepicker ).datepicker();
    });


    更正一下...要寫這樣喔:
    $(function() {
     $('.datepicker').datePicker();
    })
    91 大打字太快了 XD
    Hunterpo's IT Vision - http://www.dotblogs.com.tw/hunterpo/
    2010年7月1日 上午 08:16
  • 親愛的大大:請問一下我那裡弄錯了呢?為何我滑鼠移到那個text 6點它一下的時候沒有跳出日期選擇的表單?程式碼如下:

    <head runat="server">

    <link href="css/css.css" rel="stylesheet" type="text/css" />

            .

            .

    <script type="text/javascript" src="../jquery.ui.datepicker.js"></script>

    </head>

    <script type="text/javascript" language="javascript">
    $(function(){
      $('.datepicker').datePicker(); 
      });
    </script>

    <asp:TemplateField HeaderText="需求日期" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="40" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text6" Class="datepicker"> </asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>

     

    css部份

    .datepicker:hover
    {
      background-color: #FAFAD2;
    }

     

    請問大大我那裡寫錯了?感謝您

    • 已編輯 MichaelTsai10 2010年7月2日 上午 06:09 大小寫問題
    2010年7月2日 上午 06:08
  • 試試看CSS改成CssClass。

    檢查一下最後Render出來的HTML,CSS有沒什麼問題


    常用資源參考:
    小弟的blog: In 91
    2010年7月2日 上午 10:01
    版主
  • 親愛的大大您好:

    雖然將它(ID="text6")改為CssClass。

    為了測試它css是有在運作 我在css檔內加上  PS:css檔位於link href="css/css.css"

    .datepicker:hover
    {
      background-color: #FAFAD2;
     
     
    }

    它能讓text6背景變色當我按滑屬左鍵時。

    我這個text6是位在GridView1之中程式碼如下:

    <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false">
            <Columns>
            <asp:TemplateField HeaderText="料號" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30"  ItemStyle-Width="30" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text1"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="品名" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="25" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text2"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="規格" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="25" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text3"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="數量" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30"  ItemStyle-Width="25" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text4"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="廠牌" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="25" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server" ID="text5"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="需求日期" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Size="Medium" HeaderStyle-BackColor="White" ItemStyle-Height="30" ItemStyle-Width="25" ItemStyle-BackColor="White" ControlStyle-Height="29">
            <ItemTemplate><asp:TextBox runat="server"  ID="text6" CssClass="datepicker"> </asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
            </Columns>
            </asp:GridView>

    問題1:為何以下外掛無作用呢?

    <script type="text/javascript" >
      $(function(){
      $('.datepicker').datePicker();
      });
    </script>

    問題2.是不是因為<link href="css/css.css" rel="stylesheet" type="text/css" />造成的?

            我也有把jQuery載入 但是datepicker這個日曆還是跳不出來

    <script type="text/javascript" src="../ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/innerCalendar.js"></script>

    問題3.是不是要把jQuery這個寫入到link href="css/css.css"之中?如果是要怎麼寫?

    感謝各位大大指教

    2010年7月5日 上午 03:47
  • 有跳javascript的錯誤嗎?
    2010年7月5日 上午 04:19
    版主
  • 親愛的大大:

         沒有看到它有錯誤訊息所以就不知到我是那裡寫錯了

    感謝您

    2010年7月5日 上午 06:41
  • debug的部分,只能靠您自己了。

    我這邊用NorthWind當一下Sample code,使用上是正常的,
    比對正常的sample code跟您自己程式的問題,就得靠你自己了。

    PS:jQuery UI的樣式我就先不管了...

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>  
      <script type="text/javascript">
        $(document).ready(function () {
          $('.date').datepicker();
        });
      </script>
    </head>
    <body>
      <form id="form1" runat="server">
      <div id="mySample">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" 
          DataKeyNames="CustomerID" DataSourceID="NorthWind" EnableModelValidation="True">
          <Columns>
            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" 
              SortExpression="CustomerID" />
            <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" 
              SortExpression="CompanyName" />
              <asp:TemplateField HeaderText="需求日期">
                <ItemTemplate>
                  <asp:TextBox ID="TextBox1" runat="server" CssClass="date"></asp:TextBox>
                </ItemTemplate>
              </asp:TemplateField>
          </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="NorthWind" runat="server" 
          ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
          SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]">
        </asp:SqlDataSource>
      </div>
      </form>
    </body>
    </html>


    常用資源參考:
    小弟的blog: In 91
    2010年7月5日 上午 07:14
    版主