gridPanel事件--初学ext.net框架

最新推荐文章于 2016-07-06 17:01:00 发布
最新推荐文章于 2016-07-06 17:01:00 发布
阅读量125 收藏
点赞数
文章标签： javascript json ViewUI

http://blog.csdn.net/alisa525/article/details/8081092

1、行双击事件

首先设置选择方式为RowSelectionModel单行选中

[html] view plain copy print ?
  1. <SelectionModel>
  2. <ext:RowSelectionModelID="RowSelectionModel1"runat="server"SingleSelect="true">
  3. </ext:RowSelectionModel>
  4. </SelectionModel>
 <SelectionModel>
      <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
      </ext:RowSelectionModel>
 </SelectionModel>

1.1 注册行双击事件，响应代码写在前台js中

[html] view plain copy print ?
  1. <Listeners>
  2. <RowDblClickHandler="returnrowDbClick(#{GridPanel1},#{Store1})"/>
  3. </Listeners>
  <Listeners>
         <RowDblClick Handler="return rowDbClick(#{GridPanel1},#{Store1})" />
  </Listeners>

前台js代码：

[javascript] view plain copy print ?
  1. <scripttype="text/javascript">
  2. functionFnRowDbClick(paramgrid,paramstore){
  3. varrow=paramgrid.getSelectionModel().getSelections();//选择行的个数
  4. if(row==null||row==undefined||row.length==0){
  5. }
  6. paramID=row[0].data.员工编号.toString();
  7. paraName=row[0].data.姓名.toString();
  8. this.Window1.setTitle("["+paraName+"]迟发日期明细表");
  9. //this.Window1.Title("["+paraName+"]迟发日期明细表");错误
  10. this.Window1.show();
  12. }
  13. </script>
 <script type="text/javascript">
           function FnRowDbClick(paramgrid, paramstore) {
               var row = paramgrid.getSelectionModel().getSelections(); //选择行的个数
               if (row == null || row == undefined || row.length == 0) {
               }
               paramID = row[0].data.员工编号.toString();
               paraName = row[0].data.姓名.toString();
               this.Window1.setTitle("[" + paraName + "] 迟发日期明细表");
              // this.Window1.Title("[" + paraName + "] 迟发日期明细表"); 错误
                 this.Window1.show();
              
           }
      </script>


1.2注册行双击事件，响应代码写在后台cs文件中

<DirectEvents>
<RowDblClick OnEvent="Row_DblClick" ></RowDblClick>
< /DirectEvents>

后台代码：

protected void OnRow_DblClick(object sender, DirectEventArgs e)

{

this.Window1.Title = "未发日期明细表";

this.Window1.Show();

}

1.3 定义带参数的行双击事件

注册事件

[html] view plain copy print ?
  1. <DirectEvents>
  2. <RowDblClickOnEvent="Row_DblClick">
  3. <ExtraParams>
  4. <ext:ParameterName="ID"Value="(GridPanel1.getSelectionModel().getSelections())[0].data.员工编号.toString()"Mode="Raw"/>
  5. <ext:ParameterName="EmployName"Value="(GridPanel1.getSelectionModel().getSelections())[0].data.姓名.toString()"Mode="Raw"/>
  6. <ext:ParameterName="Name"Value="(GridPanel1.getSelectionModel().getSelections())[0].data"Mode="Raw"/>
  7. <%--<ext:ParameterName="Values"Value="Ext.encode(#{GridPanel1}.getRowsValues())"Mode="Raw"/>--%>
  8. <ext:ParameterName="Values"Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))"Mode="Raw"/>
  9. </ExtraParams>
  10. </RowDblClick>
  11. </DirectEvents>
 <DirectEvents>
     <RowDblClick OnEvent="Row_DblClick" >
        <ExtraParams>
             <ext:Parameter Name="ID" Value="(GridPanel1.getSelectionModel().getSelections())[0].data.员工编号.toString()" Mode="Raw" />
              <ext:Parameter Name="EmployName" Value="(GridPanel1.getSelectionModel().getSelections())[0].data.姓名.toString()" Mode="Raw" />
              <ext:Parameter Name="Name" Value="(GridPanel1.getSelectionModel().getSelections())[0].data" Mode="Raw" />
              <%--   <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues())" Mode="Raw" />--%>
               <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))" Mode="Raw" />
        </ExtraParams>                    
     </RowDblClick>
 </DirectEvents>

后台代码：

[csharp] view plain copy print ?
  1. protectedvoidRow_DblClick(objectsender,DirectEventArgse)//
  2. {
  3. stringjson=e.ExtraParams["Values"];
  4. stringKey;
  5. Dictionary<string,string>[]dic=JSON.Deserialize<Dictionary<string,string>[]>(json);
  6. if(dic.Length>0)//选择当行时，获取选择行的数据
  7. {
  8. stringID1=dic[0]["员工编号"].ToString();
  9. stringName1=dic[0]["姓名"].ToString();
  10. stringOut=dic[0]["出差总天数"].ToString();
  11. stringOut2=dic[0]["出差地点总数"].ToString();
  12. }
  13. else//选择多行时，获取选择行的数据
  14. {
  15. foreach(Dictionary<string,string>rowindic)
  16. {
  17. foreach(KeyValuePair<string,string>keyValuePairinrow)
  18. {
  19. Key=keyValuePair.Key;
  20. if(Key=="员工编号")
  21. {
  22. stringID=keyValuePair.Value;
  23. continue;
  24. }
  25. elseif(Key=="姓名")
  26. {
  27. stringName=keyValuePair.Value;
  28. continue;
  29. }
  30. }
  31. }
  32. }
  33. }
 protected void Row_DblClick(object sender, DirectEventArgs e)  //
 {
            string json = e.ExtraParams["Values"];
            string Key;
            Dictionary<string, string>[] dic = JSON.Deserialize<Dictionary<string, string>[]>(json);
            if (dic.Length > 0)   //选择当行时，获取选择行的数据
            {
                string ID1 = dic[0]["员工编号"].ToString();
                string Name1 = dic[0]["姓名"].ToString();
                string Out = dic[0]["出差总天数"].ToString();
                string Out2 = dic[0]["出差地点总数"].ToString();
            }
            else  //选择多行时，获取选择行的数据
            {
                foreach (Dictionary<string, string> row in dic)
                {
                    foreach (KeyValuePair<string, string> keyValuePair in row)
                    {
                        Key = keyValuePair.Key;
                        if (Key == "员工编号")
                        {
                            string ID = keyValuePair.Value;
                            continue;
                        }
                        else if (Key == "姓名")
                        {
                            string Name = keyValuePair.Value;
                            continue;
                        }
                    }
                }
            }
 }

2、单元格命令事件，cell command（ImageCommand），自定义事件参数

在列中定义ImageCommand

[html] view plain copy print ?
  1. <ext:ColumnHeader="未发次数"DataIndex="未发次数"Width="200">
  2. <Commands>
  3. <ext:ImageCommandCommandName="query"Icon="ApplicationViewList"Text="查看">
  4. <ToolTipText="未发日期列表"/>
  5. </ext:ImageCommand>
  6. </Commands>
  7. </ext:Column>
 <ext:Column Header="未发次数" DataIndex="未发次数" Width="200">
     <Commands>
           <ext:ImageCommand CommandName="query" Icon="ApplicationViewList" Text="查看">
               <ToolTip Text="未发日期列表" />
           </ext:ImageCommand>
    </Commands> 
</ext:Column>

2.1 定自定事件及事件参数，后台响应事件

[html] view plain copy print ?
  1. <DirectEvents>
  2. <CommandOnEvent="OnCell_Click">
  3. <ext:ParameterName="colName"Value="this.getColumnModel().getDataIndex(colIndex)"Mode="Raw"/>
  4. </ExtraParams>
  5. <ExtraParams>
  6. <ext:ParameterName="ID"Value="record.data.编号"Mode="Raw"/>
  7. </ExtraParams>
  8. <ExtraParams>
  9. <ext:ParameterName="Name"Value="record.data.姓名"Mode="Raw"/>
  10. </ExtraParams>
  11. </Command>
  12. </DirectEvents>
 <DirectEvents>
     <Command OnEvent="OnCell_Click">
         <ext:Parameter Name="colName" Value="this.getColumnModel().getDataIndex(colIndex)" Mode="Raw" />
         </ExtraParams>
         <ExtraParams>
         <ext:Parameter Name="ID" Value="record.data.编号" Mode="Raw" />
         </ExtraParams>
         <ExtraParams>
         <ext:Parameter Name="Name" Value="record.data.姓名" Mode="Raw" />
         </ExtraParams>                                  
      </Command> 
 </DirectEvents>

定义后台响应代码：

[csharp] view plain copy print ?
  1. protectedvoidOnCell_Click(objectsender,DirectEventArgse)
  2. {
  3. stringm_No=e.ExtraParams["ID"].ToString();
  4. stringparaName=e.ExtraParams["Name"].ToString();
  5. stringparaColName=e.ExtraParams["colName"].ToString();
  6. if(paraColName=="未发次数")
  7. {
  8. this.Window1.Title="["+paraName+"]未发日期明细表";
  9. InfoBindNoSendDay();
  10. this.Window1.Show();
  11. }
  12. elseif(paraColName=="迟发次数")
  13. {
  14. this.Window2.Title="["+paraName+"]迟发日期明细表";
  15. InfoBindDelaySendDay();
  16. this.Window2.Show();
  17. }
  19. }
protected void OnCell_Click(object sender, DirectEventArgs e)
{
            string m_No = e.ExtraParams["ID"].ToString();
            string paraName = e.ExtraParams["Name"].ToString();
            string paraColName = e.ExtraParams["colName"].ToString();    
            if(paraColName == "未发次数")
            {
                    this.Window1.Title = "[" + paraName + "] 未发日期明细表";
                    InfoBindNoSendDay();
                    this.Window1.Show();
            }
            else  if(paraColName == "迟发次数")
            {
                   this.Window2.Title = "[" + paraName + "] 迟发日期明细表";
                   InfoBindDelaySendDay();
                   this.Window2.Show();
            }
                       
}

2.2 定义事件，前台js响应事件

[html] view plain copy print ?
  1. <Listeners>
  2. <CommandHandler="cellClick(record.data,this.getColumnModel().getDataIndex(colIndex))"/>
  3. </Listeners>
<Listeners>
     <Command Handler="cellClick(record.data,this.getColumnModel().getDataIndex(colIndex))" />
</Listeners>

js代码

[javascript] view plain copy print ?
  1. <scriptlanguage="javascript"type="text/javascript">
  2. functioncellClick(paradata,paraCol){
  3. paramID=paradata.员工编号.toString();
  4. paraName=paradata.姓名.toString();
  5. if(paraCol=="未发次数"){
  6. this.Window1.setTitle="["+paraName+"]未发日期明细表";
  7. //this.Window1.Title="["+paraName+"]迟发日期明细表";//不能这么写，没有效果this.Window1.reload();
  8. this.Window1.show();
  9. }
  10. elseif(paraCol=="迟发次数"){
  11. this.Window1.setTitle="["+paraName+"]迟发日期明细表";
  12. this.Window1.show();
  13. }
  14. }
  15. </script>
<script language="javascript" type="text/javascript">
      function cellClick(paradata,paraCol) {
           paramID = paradata.员工编号.toString();
           paraName = paradata.姓名.toString();
           if (paraCol == "未发次数") {
               this.Window1.setTitle = "[" + paraName + "] 未发日期明细表";
               //this.Window1.Title="[" + paraName + "] 迟发日期明细表";   // 不能这么写，没有效果                                    this.Window1.reload();
               this.Window1.show();
           }
           else if (paraCol == "迟发次数") {
               this.Window1.setTitle = "[" + paraName + "] 迟发日期明细表";
               this.Window1.show();
           }
       }
</script>


3、单元格选中事件定义行选中模式为单元格选中模式，

定义选中事件

[html] view plain copy print ?
  1. <SelectionModel>
  2. <ext:CellSelectionModelrunat="server">
  3. <DirectEvents>
  4. <CellSelectOnEvent="Cell_Click"/>
  5. </DirectEvents>
  6. </ext:CellSelectionModel>
  7. </SelectionModel>
<SelectionModel>
     <ext:CellSelectionModel runat="server">
         <DirectEvents>
         <CellSelect OnEvent="Cell_Click" />                        
         </DirectEvents>
     </ext:CellSelectionModel>
</SelectionModel>

定义事件响应代码(可写在后台，也可以写在js中，注意要有runat="server")：

[javascript] view plain copy print ?
  1. <scriptrunat="server">
  2. protectedvoidCell_Click(objectsender,DirectEventArgse)
  3. {
  4. CellSelectionModelsm=this.GridPanel1.SelectionModel.PrimaryasCellSelectionModel;
  5. this.Label1.Html=string.Format("RecordID:{0}<br/>Name:{1}<br/>Value:{2}<br/>Row:{3}<br/>Column:{4}",
  6. sm.SelectedCell.RecordID,sm.SelectedCell.Name,
  7. sm.SelectedCell.Value,sm.SelectedCell.RowIndex.ToString(),sm.SelectedCell.ColIndex.ToString());
  8. }
  9. </script>
<script runat="server">
  protected void Cell_Click(object sender, DirectEventArgs e)
  {
        CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel;
        this.Label1.Html = string.Format("RecordID: {0}<br />Name: {1}<br />Value: {2}<br />Row: {3}<br />Column: {4}", 
                           sm.SelectedCell.RecordID, sm.SelectedCell.Name, 
                           sm.SelectedCell.Value, sm.SelectedCell.RowIndex.ToString(), sm.SelectedCell.ColIndex.ToString());
  }
</script>


4、前台js事件与后台事件的执行顺序

在两种事件都定义的时候，默认情况下是先执行js事件，然后执行后台事件

例如：

[html] view plain copy print ?
  1. <ext:ButtonWidth="50"ID="ButFrist"icon="ArrowUp"runat="server"Text="上一月"StandOut="true"
  2. style="padding:5px;">
  3. <DirectEvents>
  4. <ClickOnEvent="btn_Click"></Click>
  5. </DirectEvents>
  7. <Listeners>
  8. <ClickHandler="selectFrist();"/>
  9. </Listeners>
  10. </ext:Button>
<ext:Button Width="50" ID="ButFrist"  icon="ArrowUp" runat="server" Text="上一月" StandOut="true" 
     style="padding:5px;">
     <DirectEvents>
            <Click OnEvent="btn_Click" ></Click>
     </DirectEvents>
                                             
     <Listeners>  
             <Click Handler="selectFrist();" />
     </Listeners>
</ext:Button>


默认先执行js代码

[javascript] view plain copy print ?
  1. <scripttype="text/javascript">
  3. functionselectFrist(){
  4. vart=ComboBox1.getValue();
  5. vari=ComboBox1.getSelectedIndex();
  6. if(i!=-1&&(i-1)>=0){
  7. ComboBox1.selectByIndex(i-1);
  8. GridPanel1.reload();
  9. }
  10. else{
  11. Ext.Msg.alert("提示","已到达起始月份！");
  12. returnfalse;
  13. }
  14. returntrue;
  15. }
  18. </script>
 <script type="text/javascript">

           function selectFrist() {
               var t = ComboBox1.getValue();
               var i = ComboBox1.getSelectedIndex();
               if (i!=-1 && (i - 1) >= 0) {
                   ComboBox1.selectByIndex(i - 1);
                   GridPanel1.reload();
               }
               else {
                   Ext.Msg.alert("提示", "已到达起始月份！");
                   return false;
               }
               return true;
            }

                      
       </script>


后执行cs代码：

protected void btn_Click(object sender, DirectEventArgs e)
{
ComboBox1.Text = string.Format("{0:yyyy年M月}", Convert.ToDateTime(ComboBox1.Text.ToString()).AddMonths(-1));
}

如果要先执行后台代码后执行js代码，则定义事件时加一个参数delay="50" ,设置滞后时间

[html] view plain copy print ?
  1. <ext:ButtonWidth="50"ID="ButFrist"icon="ArrowUp"runat="server"Text="上一月"StandOut="true"
  2. style="padding:5px;">
  3. <DirectEvents>
  4. <ClickOnEvent="btn_Click"></Click>
  5. </DirectEvents>
  7. <Listeners>
  8. <ClickHandler="selectFrist();"Delay="50"/>
  9. </Listeners>
  10. </ext:Button>
 <ext:Button Width="50" ID="ButFrist"  icon="ArrowUp" runat="server" Text="上一月" StandOut="true" 
      style="padding:5px;">
      <DirectEvents>
          <Click OnEvent="btn_Click" ></Click>
      </DirectEvents>
                                             
      <Listeners>  
         <Click Handler="selectFrist();" Delay="50" />
      </Listeners>
</ext:Button>

iteye_563
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext.Net 1.x_Ext.Net.GridPanel 事件
德仔
07-04 2148
1、行双击事件 首先设置选择方式为RowSelectionModel单行选中 [html] view plaincopy SelectionModel>        ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
ext.net gridpanel 弹出窗
03-17
ext.net gridpanel 弹出窗
Extjs 之 getRowsValues 在GridPanel提交时的妙用
weixin_30378623的博客
03-31 125
需要将当前GridPanel中的数据传送到后台就需要用到getRowsValues方法. 先看方法原型: getRowsValues : function (selectedOnly, visibleOnly, dirtyOnly, currentPageOnly) { this.stopEditing(false); if (E...
Ext.Net GridPanel RowSelect 行选择事件
weixin_30267697的博客
07-06 142
GridPanel中选中行，后台获取行json信息，再进行相关处理 <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true" Title="Purchase Order" AutoExpandColumn="Company"...
ext.net gridpanel 事件
快乐人生
10-17 8772
1、行双击事件 首先设置选择方式为RowSelectionModel单行选中   1.1   注册行双击事件，响应代码写在前台js中 前台js代码： function FnRowDbClick(paramgrid, paramstore) { va
ext.net 动态创建gridpanel
07-11
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
JavaScript的Ext JS框架中的GridPanel组件使用指南
10-22
GridPanel和TreePnal功能类似,都是Ext JS中的表格便携利器,相比之下GridPanel还要更强大并且更复杂一些,下面我们就来整理一下JavaScript的Ext JS框架中的GridPanel组件使用指南
Ext.net实现GridPanel拖动行、上移下移排序功能DEMO
10-16
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
Ext第一周 史上最强学习笔记---GridPanel（基础篇）
09-06
我不想教各位新手什么高级技术，因为我也在研究，只是想教大家一个思考的方向，能够具有举一反三的能力，能够真正学会Ext和开始深入了解。
EXT GridPanel获取某一单元格的值
12-11
EXT GridPanel获取某一单元格的值
EXT.NET GridPanel Listeners itemdblclick
最新发布
05-24
EXT.NET GridPanel 的 `itemdblclick` 监听器是用于捕获双击 GridPanel 中的行时触发的事件。这个监听器可以被添加到 GridPanel 的配置中，如下所示： ```csharp <ext:GridPanel ID="GridPanel1" runat="server"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值