asp.net gridview怎样实现window下的效果
我简单画个图
-------------------------------------------------
编码 | 名称 | 价格 |
@1 | @2 | @3 |
上面的是在GridView中,我在@1单元格处,点击时,就变成输入框,我就可以在里面输入编码,当我输完后,按回车键,后面的@2,@3就会根据@1处我输入文本框中的编码到数据库中把对应的字段显示出来,
[解决办法]
我写了一个，代码比较乱，但是大体上能实现你所说的。给你参考参考！
代码：
public partial class GridView2 : System.Web.UI.Page
{
private DataTable dt1;//显示数据用的
private SqlConnection conn;
private SqlCommand select;
private SqlDataAdapter sd1;
public GridView2()
{
this.conn = new SqlConnection(@ "Data Source=ibm003\sx813;Initial Catalog=Northwind;uid=fengdong;password=fengdong ");
this.select = new SqlCommand();
this.select.Connection = conn;
this.sd1 = new SqlDataAdapter(this.select);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
initDataTable();
insertEmptyRow();
bindData();
}
}
//初始化保存结果的DataTable
private void initDataTable()
{
//设置好DataTable的列
dt1 = new DataTable( "Table1 ");
dt1.Columns.Add( "EmployeeID ");
dt1.Columns.Add( "FirstName ");
dt1.Columns.Add( "LastName ");
}
private void insertEmptyRow()
{
//添加一个空行，供用户填写
DataRow dr = dt1.NewRow();
dr[0] = "请填写代码 ";
dr[1] = " ";
dr[2] = " ";
dt1.Rows.Add(dr);
}
//将产寻到的结果添加进存放结果DataTable
private void insertRow(DataRow dr)
{
this.dt1.Rows.Add(dr.ItemArray);
this.setData();//
}
private void bindData()
{
this.GridView1.DataSource = this.dt1;
this.GridView1.DataBind();
}
//从ViewState中获取以有的数据
private void getData()
{
if (null != ViewState[ "data1 "])
{
this.dt1 = (DataTable)ViewState[ "data1 "];
}
}
//将结果保存至ViewState
private void setData()
{
int a = dt1.Rows.Count;
for (int i=0; i <a; i++)
{
DataRow dr = dt1.Rows[i];
if (dr[ "EmployeeID "].ToString() == "请填写代码 ")
{
dt1.Rows.Remove(dr);
a--;
}
}
ViewState.Add( "data1 ",dt1);
}
private void loadData()
{
initDataTable();
getData();
}
protected void tbx_1_TextChanged(object sender, EventArgs e)
{
TextBox t1 = (TextBox)sender;
string sql = "select EmployeeID,FirstName,LastName from Employees where EmployeeID= " + t1.Text;
this.select.CommandText = sql;
DataTable tab1 = new DataTable();
this.sd1.Fill(tab1);
loadData();
if (tab1.Rows.Count == 1)
{
DataRow dr1 = dt1.NewRow();
dr1 = tab1.Rows[0];
insertRow(dr1);
insertEmptyRow();
bindData();
}
}
}
------解决方案--------------------
ASPX页面如下
<asp:GridView ID= "GridView1 " runat= "server " AutoGenerateColumns= "False " Width= "429px " ShowFooter= "True ">
<Columns>
<asp:TemplateField HeaderText= "EmployeeID " InsertVisible= "False ">
<ItemTemplate>
<asp:TextBox ID= "tbx_1 " Text= ' <%# Bind( "EmployeeID ") %> ' runat= "server " OnTextChanged= "tbx_1_TextChanged " AutoPostBack= "True "> </asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField= "FirstName " HeaderText= "FirstName " SortExpression= "FirstName " />
<asp:BoundField DataField= "LastName " HeaderText= "LastName " SortExpression= "LastName " />
</Columns>
</asp:GridView>
[解决办法]
手边没有开发环境，给楼主讲讲思路：
1 编码列，设置为模板列。放入一个TextBox控件，使用CSS设置鼠标点击与鼠标离开两种样式。鼠标点击式，看上去为编辑框，鼠标离开时，还原为文本显示的效果
2 这个TextBox设置 onblur 事件，javascript请求一个根据编码查询名称、价格的webservice，返回值设置到后面两列对应的文本
javascript请求webservice，以及对gridview中元素改变，请使用Asp.net Ajax 1.0
[解决办法]
异步的那就放到Updatepanel中，其实楼主的要求实现起来比较复杂
