C#网格视图从动态创建的DataTable中实现可点击单元格

C# GridView Implementing clickable cells from dynamically created DataTable

本文关键字：实现 单元格 DataTable 视图 网格 动态 创建      更新时间：2023-09-26

我已经试着做了一段时间了，我已经智穷了。我有一个带有GridView控件的web窗体。数据源是一个动态创建的DataTable，如果可能的话，我希望在没有模板字段的情况下完成这项工作。我的目标是拥有4个复选框列，用户可以单击这些列来更改值。我刚刚将4列数据类型设置为bool，以便它们自动显示为复选框。我知道如何在javascript的帮助下选择一行，但我无法检测点击了哪一列

显示我当前如何选择行的相关代码：

function getSelectedRow(row) 
{
    jQuery(row).children(":first").children(":first")[0].click();
}

代码背后：

protected void gvReviewOrder_OnRowDataBound(object sender,  GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string onClick = "javascript: getSelectedRow(this);";
        e.Row.Attributes["onclick"] = onClick;
        e.Row.Style["cursor"] = "pointer";
    }
}

我最近尝试的一件事是从以下线程使用JQuery：jQuery 中的表行和列编号

我没有使用警报，而是尝试将单击的列索引更新为隐藏字段，所以这就是我当前的Javascript函数：

$("td").click(function () 
{
    var colIndex = $(this).parent().children().index($(this));
    $("#hfColumnId").val(colIndex);
});

因此，假设我的隐藏字段"hfColumnId"应该在单击单元格时更新，但这并没有发生。我需要在我的OnRowDataBound事件上添加代码才能首先添加单击事件吗？

正如你可能猜到的，当涉及到网络表单时，我仍在学习，而我现在只是不知所措。任何帮助都将不胜感激。

长话短说，当从GridView控件通过jquery单击单元格时，有没有方法返回列索引？

提前感谢！

编辑我在去年的一个解决方案中找到了这个线程，但他们建议将EnableEventValidation设置为false，我知道这是不推荐的。所以，如果我能想出如何在不设置为false的情况下实现这种方式，这可能是一个潜在的解决方案？

在gridview（而不是datagridview）asp.net 中获取点击的单元格索引

中描述了可能的解决方案：http://www.codeproject.com/Tips/209416/Click-select-row-in-ASP-NET-GridView-or-HTML-Table：

清单1。向ASP.NET GridView动态呈现的表添加onClick属性

protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
    if (e.Row.RowType == DataControlRowType.DataRow){
        // javascript function to call on row-click event
        e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
    }
}

以及相应的示例Javascript函数，用于在点击事件时对动态呈现的表Row执行一些自定义格式化（本质上实现点击事件处理程序）：

清单2。Javascript函数在点击时格式化表行

<script type="text/javascript">
// format current row
function SelectRow(row) {
 var _selectColor = "#303030";
 var _normalColor = "#909090";
 var _selectFontSize = "3em";
 var _normalFontSize = "2em";
 // get all data rows - siblings to current
 var _rows = row.parentNode.childNodes;
 // deselect all data rows
 try {
     for (i = 0; i < _rows.length; i++) {
         var _firstCell = _rows[i].getElementsByTagName("td")[0];
         _firstCell.style.color = _normalColor;
         _firstCell.style.fontSize = _normalFontSize;
         _firstCell.style.fontWeight = "normal";
     }
 }
 catch (e) { }
 // select current row (formatting applied to first cell)
 var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
 _selectedRowFirstCell.style.color = _selectColor;
 _selectedRowFirstCell.style.fontSize = _selectFontSize;
 _selectedRowFirstCell.style.fontWeight = "bold";
}
</script>

或者，可以使用如下所示的Javascript代码片段来实现此功能，而不是像清单1那样向表的每一行添加onClick属性：

清单3。Javascript表行onClick事件处理程序

// ** table row click event **
function row_OnClick(tblId) {
    try {
        var rows = document.getElementById(tblId).rows;
        for (i = 0; i < rows.length; i++) {
            var _row = rows[i];
            _row.onclick = null;
            _row.onclick = function () {
                return function () {selectRow(this);};
            }(_row);
        }
    }
    catch (err) { }
}

上面显示的具有完整Javascript代码库的解决方案（清单3）的实际实现可以在这里找到：http://busny.net.

客户端Javascript（或jQuery）脚本提供了高响应性。该核心解决方案可以根据特定需求进行进一步扩展。例如，行对象var中的各个复选框可以使用以下语法进行寻址：

row.cells[0].firstChild.checked

等等

希望这能有所帮助。

相关文章：