zoukankan html css js c++ java

DataList 用法详解

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataList.aspx.cs" Inherits="FileUpload自动上传文件.DataList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <style type="text/css">
    .style1{
        width:784px;
    }
    .style2
    {
     width:126px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
               
    <asp:DataList ID ="dataList1" runat ="server" RepeatColumns ="1" GridLines ="Both"  
                    RepeatLayout ="Table"   RepeatDirection ="Horizontal" 
                    onitemcommand="dataList1_ItemCommand" 
                    oneditcommand="dataList1_EditCommand" 
            oncancelcommand="dataList1_CancelCommand" 
            ondeletecommand="dataList1_DeleteCommand" 
            onselectedindexchanged="dataList1_SelectedIndexChanged" 
            onupdatecommand="dataList1_UpdateCommand"  DataKeyField ="Id"  >
        <HeaderTemplate ><%--页眉模版，和Repeater稍微不同，一般每个模版如果用到了table都应该在当前模版闭合，即当前模版用<table></table>包裹，而不是把<table>放在HeaderTemplate</table>放在FooterTemplate闭合，--%>
            <table><%--因为如果按照后者做会使得RepeatColumns不生效，RepeatColumns意思的每行显示的项个数，即显示多少个ItemTemplate，一般只会显示一项因为这样每列的标题和每列的内容容易对齐，如果不对齐需要用样式设置每列的宽度使其对齐--%>
             <tr class="style1">
                    <th class="style2">标题1</th>
                    <th class="style2">标题2</th>
                    <th class="style2">标题3</th>
                    <th class="style2">标题4</th>
                    <th class="style2">时间</th>
                </tr>
            </table>
        </HeaderTemplate>
        <ItemTemplate>
         <table >
           <tr class="style1">
            <td class="style2"><%#DataBinder.Eval(Container.DataItem,"title1")%></td>
            <td class="style2"><%#DataBinder.Eval(Container.DataItem, "title2")%></td>
            <td class="style2"><%#DataBinder.Eval(Container.DataItem, "title3")%></td>
            <td class="style2"><%#DataBinder.Eval(Container.DataItem, "title4")%></td>
            <td class="style2"><%#DateTime.Now.ToString()%></td>
            <td class="style2" id ="td">
            <ul>
            <li><asp:LinkButton id ="LinkButton2" runat ="server" CommandName ="edit" Text ="edit" ></asp:LinkButton></li>
            <li><asp:LinkButton id ="LinkButton1" runat ="server" CommandName ="select" Text ="select" ></asp:LinkButton></li>
            <li><asp:LinkButton id ="LinkButton3" runat ="server" CommandName ="delete" Text ="删除" ></asp:LinkButton></li>
            </ul>
             </td>
        </tr>
        </table>
        </ItemTemplate>

        <SelectedItemTemplate ><%--SelectedItemTemplate一般选中后需要呈现不同的控件才需要使用这个模版，如果只是样式不同只需要设置SelectedItemStyle--%>
         <table >
           <tr class="style1">
            <td class="style2" style="color:Red;"><asp:TextBox ID ="txtTitle1" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title1")%>'></asp:TextBox></td>
            <td class="style2"><asp:TextBox ID ="txtTitle2" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title2")%>'></asp:TextBox></td>
            <td class="style2"><asp:TextBox ID ="txtTitle3" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title3")%>'></asp:TextBox></td>
            <td class="style2"><asp:TextBox ID ="txtTitle4" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title4")%>'></asp:TextBox></td>
            <td class="style2"><%#DateTime.Now.ToString()%></td>
            <td class="style2" id ="td">
            <ul>
            <li><asp:LinkButton id ="Linkcancel" runat ="server" CommandName ="cancelselect" Text ="取消选中" ></asp:LinkButton></li>
            </ul>
             </td>
        </tr>
        </table>
        </SelectedItemTemplate>

        <EditItemTemplate ><%--EditItemTemplate一般用于编辑时程序文本框给用户输入--%>
            <table >
           <tr class="style1">
            <td class="style2" style="color:Red;"><asp:TextBox ID ="txtTitle1" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title1")%>'></asp:TextBox></td>
            <td class="style2"><asp:TextBox ID ="txtTitle2" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title2")%>'></asp:TextBox></td>
            <td class="style2"><asp:TextBox ID ="txtTitle3" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title3")%>'></asp:TextBox></td>
            <td class="style2"><asp:TextBox ID ="txtTitle4" runat ="server" Text ='<%#DataBinder.Eval(Container.DataItem, "title4")%>'></asp:TextBox></td>
            <td class="style2"><%#DateTime.Now.ToString()%></td>
            <td class="style2" id ="td">
            <ul>
            <li><asp:LinkButton id ="Linkupdate" runat ="server" CommandName ="update" Text ="更新" ></asp:LinkButton></li>
            <li><asp:LinkButton id ="Linkcancel" runat ="server" CommandName ="cancel" Text ="取消" ></asp:LinkButton></li>
            </ul>
             </td>
        </tr>
        </table>
        </EditItemTemplate>
        
        <FooterStyle BackColor="#990000" Font-Bold="true" ForeColor="White" />
        <AlternatingItemStyle BackColor="White" />
         <ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SeparatorStyle BorderStyle="Dashed" />
            <SelectedItemStyle BackColor="#FFCC66" Font-Bold="true" ForeColor="Navy" />

        <FooterTemplate ></FooterTemplate>
    </asp:DataList>
     
    </div>
    </form>
</body>
</html>

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace FileUpload自动上传文件
{
    public partial class DataList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindRptData();
            }
        }

        private void BindRptData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id");
            dt.Columns.Add("title1");
            dt.Columns.Add("title2");
            dt.Columns.Add("title3");
            dt.Columns.Add("title4");

            for (int i = 1; i < 5; i++)
            {
                DataRow row = dt.NewRow();
                row["id"] = i;
                row["title1"] = "title1" + i;
                row["title2"] = "title2" + i;
                row["title3"] = "title3" + i;
                row["title4"] = "title4" + i;
                dt.Rows.Add(row);

            }
            dataList1.DataSource = dt;
            dataList1.DataBind();
        }

        protected void dataList1_ItemCommand(object source, DataListCommandEventArgs e)
        {
            //所有的操作都可以放在这个方法进行，比如编辑，取消，更新，删除都可以放到此处进行，也可以用单独的方法，如dataList1_EditCommand

            switch (e.CommandName.ToLower())
            { 
                case "select":
                    //选中控件时如果使用了SelectedItemTemplate需要重新绑定数据，绑定数据可以在此处进行，也可以在dataList1_SelectedIndexChanged进行，若在此处进行需要设置dataList1.SelectedIndex = e.Item.ItemIndex;，因为此时dataList1.SelectedIndex为-1
                    //dataList1.SelectedIndex = e.Item.ItemIndex;
                    //BindRptData();
                    break;

                //取消操作要根据取消的操作类型做不同动作，如取消选中应该把SelectedIndex设置为-1，取消编辑，应该把EditItemIndex设置为-1，并且设置后都要重新绑定数据
                case "cancelselect":
                    dataList1.SelectedIndex = -1;
                    BindRptData();
                    break;
                
            }
        }

        protected void dataList1_EditCommand(object source, DataListCommandEventArgs e)
        {
            //datalist编辑需要设置编辑索引，然后重新绑定数据，只要用到EditItemTemplate， SelectedItemTemplate这两个模版点击对应的操作时都要重新绑定数据
            dataList1.EditItemIndex = e.Item.ItemIndex;
            BindRptData();
        }

        protected void dataList1_CancelCommand(object source, DataListCommandEventArgs e)
        {
            //这里只对应CommandName 为cancel的动作，每个方法都对应着特定的CommandName，如dataList1_EditCommand对应的CommandName为edit，
            //如果有多种取消动作则需要取不同的CommandName放到dataList1_ItemCommand方法去做

            dataList1.EditItemIndex = -1;
            BindRptData();

        }

        protected void dataList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindRptData();
        }

        protected void dataList1_UpdateCommand(object source, DataListCommandEventArgs e)
        {
            TextBox txtTitle1 = e.Item.FindControl("txtTitle1") as TextBox;
            TextBox txtTitle2 = e.Item.FindControl("txtTitle2") as TextBox;
            TextBox txtTitle3 = e.Item.FindControl("txtTitle3") as TextBox;
            TextBox txtTitle4 = e.Item.FindControl("txtTitle4") as TextBox;


            /*** 更新到数据库代码
             * 
             * 
             * 
             * ***/

            
            //更新后取消编辑状态，重新绑定数据显示到界面
            dataList1.EditItemIndex = -1;
            BindRptData();

        }

        protected void dataList1_DeleteCommand(object source, DataListCommandEventArgs e)
        {
            //DataKeys 存放的是每行记录的主键，需要设置DataKeyField字段
            string id = dataList1.DataKeys[e.Item.ItemIndex].ToString();

            //删除当前记录，重新绑定数据
            //SqlCommand cmd = new SqlCommand("Delete From Union_User Where ID=" + id, conn);
            //cmd.ExecuteNonQuery();

            BindRptData();
        }
    }
}

View Code