Question

我一直在努力研究这个问题一段时间，而且我的智慧结束了。我有一个带有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： Table row and column number in jQuery

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

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

假设我的隐藏字段“hfColumnId”应该在单击单元格时更新，但是没有发生。我是否需要在OnRowDataBound事件上添加代码才能首先添加click事件？

正如你可能猜到的那样，我还在学习网页表单，而我现在只是在脑海中。任何帮助将不胜感激。

因此，为了解决一个很长的问题，当从GridView控件中通过jquery单击一个单元格时，有没有办法返回列索引？

提前致谢！

修改我从去年找到了这个解决方案的线程，但他们建议将EnableEventValidation设置为false，我知道不建议这样做。因此，如果我能够弄清楚如何实现这种方式而不将其设置为假，那么它可能是一个潜在的解决方案吗？

Get clicked cell index in gridview (not datagridview) asp.net

Answer 1

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

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

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函数在click事件上执行动态呈现的表Row的一些自定义格式（基本上实现Click事件处理程序）：

清单2.用于格式化Table Row on on

的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>

或者，不是按照清单1将onClick属性添加到表的每一行，而是可以使用下面显示的Javascript代码段实现此功能：

清单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) { }
}

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

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

row.cells[0].firstChild.checked

等等。

希望这可能会有所帮助。

C＃GridView从动态创建的DataTable

1 个答案: