DataGrid应用(一)——ItemDataBound
2005-11-19 21:16
375 查看
前几天,有个网友问我这么一个问题:“当点击DataGrid中的某行或某个Cell时(DataGrid中的数据是通过DataSet得到的),能弹出一个对话框,这个对话框能显示点击的这一行的所有字段信息,应该如何实现?”
正好,我前一阵子写了个小例子,现在我来介绍怎么结合JavaScript来实现这个需求。
我们知道web控件最终都是被转化成html控件在客户端显示的,所以了解了DataGrid里的元素都一一对应着哪些html元素是解决问题的关键。
首先,我们要在DataGrid的 ItemDataBound 事件里,将我们所需要的 javascript 处理添加进去。
private int index = 0; // 绑定数据的下标。
private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
e.Item.Attributes.Add("id", "row_" + index.ToString());
e.Item.Attributes.Add("onmouseover", "Mouse_Over(this)");
e.Item.Attributes.Add("onclick", "Item_Click(this)");
index++;
}
解释一下, DataGrid1 将被转化成名为"DataGrid1"的<table>HTML标签, e.Item 其实就这个Table中的<TR>即每一行。
我将把每一行的唯一标识 row_0 ... 添加到这个<TR>里。然后呢,我添加了这行鼠标滑过的客户端事件的处理函数(javascript) —— Mouse_Over(this),最后添加了这一行鼠标点击的客户端事件处理函数 —— Item_Click(this)。
这样,我知道在aspx页内添加两个相关javascript的实现就可以啦。
var preId = "";
function Mouse_Over(item)
{
var preItem = document.getElementById(preId);
if(preItem != null)
preItem.setAttribute("bgcolor", "#ffffff", 0);
var id = item.getAttribute("id");
if( preId != id );
{
item.setAttribute("bgcolor", "AliceBlue", 0);
preId = id;
}
}
function Item_Click(item)
{
var record = [];
var id = item.getAttribute("id");
for(var i=0; i<item.cells.length; i++)
record[record.length] = item.cells[i].innerText;
var style = "dialogHeight: 170px; dialogWidth: 340px; dialogTop: 458px; dialogLeft: 166px; edge: Raised; center: Yes; help: no; resizable: no; status: no;";
var val = window.showModalDialog("detail.html", record, style);
if(val != null)
{
item.cells[0].innerText = val[0];
item.cells[1].innerText = val[1];
item.cells[2].innerText = val[2];
}
}
这个鼠标滑过的处理,当然还可以用css来做。 这里使用了javascript 来操作html元素, 通过setAttribute 和 getAttribute 方法来获取 html 元素的属性。
在点击某一行的事件处理里, 使用 showModalDialog() , showModalDailog方法里的第二个参数是父窗体向子窗体传递的值。 这个值可以是数组也可以是对象。 然后它的返回值呢, 是在子窗体里通过window.returnValue 来传递的。 当然这里的传递手段有好多, 比如: 你可以在showModalDialog里请求一个aspx页面, 通过querystring来传递参数。 也可以通过Session来传递(不建议使用Session)。
总结: 我们只要了解了web控件的最终html形式,那么通过强大的javascript控制,我们可以很轻松的实现我们所想要的效果。
正好,我前一阵子写了个小例子,现在我来介绍怎么结合JavaScript来实现这个需求。
我们知道web控件最终都是被转化成html控件在客户端显示的,所以了解了DataGrid里的元素都一一对应着哪些html元素是解决问题的关键。
首先,我们要在DataGrid的 ItemDataBound 事件里,将我们所需要的 javascript 处理添加进去。
private int index = 0; // 绑定数据的下标。
private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
e.Item.Attributes.Add("id", "row_" + index.ToString());
e.Item.Attributes.Add("onmouseover", "Mouse_Over(this)");
e.Item.Attributes.Add("onclick", "Item_Click(this)");
index++;
}
解释一下, DataGrid1 将被转化成名为"DataGrid1"的<table>HTML标签, e.Item 其实就这个Table中的<TR>即每一行。
我将把每一行的唯一标识 row_0 ... 添加到这个<TR>里。然后呢,我添加了这行鼠标滑过的客户端事件的处理函数(javascript) —— Mouse_Over(this),最后添加了这一行鼠标点击的客户端事件处理函数 —— Item_Click(this)。
这样,我知道在aspx页内添加两个相关javascript的实现就可以啦。
var preId = "";
function Mouse_Over(item)
{
var preItem = document.getElementById(preId);
if(preItem != null)
preItem.setAttribute("bgcolor", "#ffffff", 0);
var id = item.getAttribute("id");
if( preId != id );
{
item.setAttribute("bgcolor", "AliceBlue", 0);
preId = id;
}
}
function Item_Click(item)
{
var record = [];
var id = item.getAttribute("id");
for(var i=0; i<item.cells.length; i++)
record[record.length] = item.cells[i].innerText;
var style = "dialogHeight: 170px; dialogWidth: 340px; dialogTop: 458px; dialogLeft: 166px; edge: Raised; center: Yes; help: no; resizable: no; status: no;";
var val = window.showModalDialog("detail.html", record, style);
if(val != null)
{
item.cells[0].innerText = val[0];
item.cells[1].innerText = val[1];
item.cells[2].innerText = val[2];
}
}
这个鼠标滑过的处理,当然还可以用css来做。 这里使用了javascript 来操作html元素, 通过setAttribute 和 getAttribute 方法来获取 html 元素的属性。
在点击某一行的事件处理里, 使用 showModalDialog() , showModalDailog方法里的第二个参数是父窗体向子窗体传递的值。 这个值可以是数组也可以是对象。 然后它的返回值呢, 是在子窗体里通过window.returnValue 来传递的。 当然这里的传递手段有好多, 比如: 你可以在showModalDialog里请求一个aspx页面, 通过querystring来传递参数。 也可以通过Session来传递(不建议使用Session)。
|
相关文章推荐
- [原创]DATAGRID的应用(双向排序,包括checkbox控件,分页,修改,保存,取消)
- DataGrid的ItemCreated和ItemDataBound以及合计平均行
- 浅谈WebForm中DataGrid的ItemDataBound事件
- 关于datagrid的几点简单应用
- DataGrid的ItemCreated和ItemDataBound事件
- jQuery EasyUI教程之datagrid应用(二)
- 按钮列的应用。(在datagrid中加入按钮列,winforms)
- 浅谈WebForm中DataGrid的ItemDataBound事件
- DataGrid模板列应用——在DataGrid中用CheckBox控制TextBox的Enabled属性
- datagrid和combobox简单应用
- datagrid的一些简单应用
- DATAGRID的一些应用(二)
- MVVM下DataGrid的简单应用
- datagrid和combobox简单应用
- jQuery EasyUI教程之datagrid应用
- jQuery EasyUI教程之datagrid应用
- ASP.NET基础教程-DataGrid表格控件-利用ItemDataBound事件给表格第一列添加行号
- 记录点学习的东西-flex.datagrid应用
- WinForm中DataGrid(C#)应用 - 如何控制DataGrid显示规定行数.
- 解决EasyUI-Datagrid和LinqToEntity结合应用时排序问题