在jqGrid中单击一行时获取列的值

时间:2012-04-28 06:07:50

标签: c# asp.net jqgrid jqgrid-asp.net

我正在使用Asp.Net/C#,在我的某个页面中,我使用jqGrid来显示Admin的用户列表,jqGrid包含以下列

  1. 用户代码
  2. 名字
  3. 中间名
  4. 姓氏
  5. 电子邮件
  6. 这是我的标记

    <cc1:JQGrid ID="ModifyAccountUserDetailsjqGrid"    AppearanceSettings-Caption="User Details"         runat="server" Width=800   DataSourceID=ModifyAccountDataSource>
        <Columns>
        <cc1:JQGridColumn HeaderText="User Code" ShowToolTip=false   PrimaryKey=true    DataField="UserCode"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="First Name" ShowToolTip=false    DataField="FirstName"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="Middle Name" ShowToolTip=false   DataField="MiddleName"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="Last Name" ShowToolTip=false     DataField="LastName"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="Email"  ShowToolTip=false        DataField="Email"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="Contact No" ShowToolTip=false    DataField="ContactNo"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="Division Name" ShowToolTip=false   DataField="DivisionName"></cc1:JQGridColumn>
        <cc1:JQGridColumn HeaderText="Last Name" ShowToolTip=false     DataField="BranchName"></cc1:JQGridColumn>
        </Columns> 
    </cc1:JQGrid>
    

    我需要的是,当管理员点击一行时,我想获取所点击行的用户代码的值。我是jqGrid的新用户,所以我对于如何我不清楚可以解决这个问题。 任何人都可以指出我正确的方向。欢迎提出任何建议。

    由于

4 个答案:

答案 0 :(得分:5)

首先,您应该选择符合您要求的最佳回调。通常它会是onSelectRow,但在其他一些情况下,onCellSelectbeforeSelectRowondblClickRow等其他回调会更好。

在回调中,您获得rowidid<tr>行)作为第一个参数。您可以使用getCellgetRowDatagetLocalRow来获取某些单元格的内容。例如

onSelectRow: function (id) {
    // get data from the column 'userCode'
    var userCode = $(this).jqGrid('getCell', 'userCode');
    alert(userCode);
}

onSelectRow: function (id) {
    var localRowData = $(this).jqGrid('getLocalRow');
    alert(localRowData.userCode);
}

如果jqGrid具有本地数据(您使用datatype: 'local'或远程数据类型,如datatype: 'json'并结合loadonce: true),则最后一种方法是最佳方式。

更新:在评论中的一些帖子和问题文本的更新后,我看到您使用jqSuite for ASP.NET WebForms或其他一些商业产品基于jqGrid而不是免费的开源JavaScript库jqGrid。我不使用jqSuite,也不知道如何在jqSuite中实现JavaScript回调。

我建议您使用新的jqGrid 4.3.2功能:jQuery like events。您可以做的是像

这样的代码
var $grid = jQuery("#<%= ModifyAccountUserDetailsjqGrid.ClientID %>");
$grid.bind("jqGridSelectRow", function (id) {
    var userCode = $(this).jqGrid('getCell', 'userCode');
    alert(userCode);
});

var $grid = jQuery("#<%= ModifyAccountUserDetailsjqGrid.ClientID %>");
$grid.bind("jqGridSelectRow", function (id) {
    var localRowData = $(this).jqGrid('getLocalRow');
    alert(localRowData.userCode);
});

可以在创建网格之前或之后定义事件的事件处理程序,例如“jqGridSelectRow”(但在创建<table>等于id的{​​{1}}元素之后。此外,如果需要,您可以将其定义为一个事件处理程序非常实用的是你想要实现所有网格的一些常见操作。

答案 1 :(得分:1)

以下代码可以帮助您通过进行一些修改来获取用户代码

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" 
    ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>" 
     SelectCommand="SELECT [OrderID], [RequiredDate], [ShipName],
      [ShipCity], [Freight] FROM [Orders]">    </asp:SqlDataSource>    
      <trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1" 

宽度=“600px”&gt;

以下是jquery,它为您提供了列ID

<script type="text/javascript">
function getSelectedRow() { 
       var grid = jQuery("#<%= JQGrid1.ClientID %>");
        var rowKey = grid.getGridParam("selrow");
        if (rowKey)
            alert("Selected row primary key is: " + rowKey); 
          else
            alert("No rows are selected");
      }
    function selectSecondRow() {
        var grid = jQuery("#<%= JQGrid1.ClientID %>");
        grid.setSelection('10249');
        } 
   </script>

或查看以下网址:

http://www.trirand.net/examples/grid/selection/selectedrow_client/default.aspx

答案 2 :(得分:1)

请仔细阅读API。

希望这就是您所寻找的:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

onSelectRow事件

答案 3 :(得分:0)

最后为了得到我需要的东西,我从Example获得了很多帮助,所以解决方案是在jqGrid的Rowselecting事件上,我使用了jqGrid.SelectedRow来获取我的单元格的值。

示例:

protected void ModifyAccountUserDetailsjqGrid_RowSelecting(object sender, Trirand.Web.UI.WebControls.JQGridRowSelectEventArgs e)
        {
            ModifyAccountUserDetailsjqGrid.SelectedRow;   
        }

P.S Oleg非常感谢您的慷慨帮助。非常感谢。