ultrawebgrid控件

其实很久之前就跟这个控件有接触，不过后来离职了一段时间，现在重新把它拿起来，还是觉得很好用。以下一些是我摘要前辈们写的，借鉴过来以便日后需要时参考一下。

原文地址 : http://hi.baidu.com/lee_mm/blog/item/4276d363dc1ec0d7e7113a8e.html

1. UltraWebGrid添加模板列：
      先选择UltraWebGrid --属性--columns--勾选Templated column 即可
      
       <igtbl:TemplatedColumn AllowResize="Free" BaseColumnName="BT" ChangeLinksColor="True"
                            HeaderText="标题" Key="BT" Type="HyperLink">
                            <CellTemplate>
                                <asp:LinkButton ID="LinkButton1" CssClass="WordBreak" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"AQJYGXID") %>' Text='<%# DataBinder.Eval(Container.DataItem,"BT") %>' ToolTip='<%# DataBinder.Eval(Container.DataItem,"BT") %>' CommandName="showdetail" runat="server" Font-Underline="false"></asp:LinkButton>
                            </CellTemplate>
                            <Header Caption="标题">
                                <RowLayoutColumnInfo OriginX="2" />
                            </Header>
                            <Footer>
                                <RowLayoutColumnInfo OriginX="2" />
                            </Footer>
                        </igtbl:TemplatedColumn>

2. UltraWebGrid日期列：
      设置日期列的 Format属性：yyyy-MM-dd（Date）
      DataType属性为System.DateTime

3. 取某行的某列（列名：BIDPRICE）的值：  
UltraWebGrid1.Rows[i].Cells.FromKey("BIDPRICE").Value或者UltraWebGrid1.Rows[i].Cells[j].Value  
取某列：UltraWebGrid1.Columns.FromKey("BIDPRICE").Value

4. 标题行居中显示：
      <HeaderStyleDefault BackColor="LightGray" BorderStyle="Solid" HorizontalAlign="Center">
                 </HeaderStyleDefault>
   
对应项居中    <CellStyle HorizontalAlign="Center"></CellStyle>

5. UltraWebGrid的固定列功能
    具体步骤:
      (1) 在UltraWebGrid下的DisplayLayout中把TableLayout属性设为：Fixed ; UseFixedHeaders设为：True //这是指定Grid允许固定列
　　StationaryMargins="Header" //这使Header始终在最上面显示
　　(2) 设定列固定： Header下面的Fixed设置为true。这样就可以实现ID固定了，但效果图中还有一个功能就是，点击后面的任何一个列后的“图钉”图标，就可以任意进行多列固定了。如下图为我点击了“ContactName”的效果：这种功能的实现，只要修改一个属性：FixedHeaderIndicatorDefault="Button"就可以了。

　　(3) 显示固定列图标：设置上面两步后，把UltraWebGrid---Application Styleing--EnableAppStyling设置NotSet即可。

　　另外对于后台绑定数据的固定列有如下代码：

　　UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("日期1").Header.Fixed = true;

　　UltraWebGrid1.DisplayLayout.Bands[0].Columns.FromKey("日期2").Header.Fixed = true;

　　这样列日期1，日期2都被固定下来了，比前台设置还要简单

6.  UltraWebGrid 最下面线显示问题：
       选择UltraWebGrid点击》选择Bands And Columns的DefaultrowHeight设置高度 即可。

7.   选择一行以后获得选定行指定列的值
　　if (e.InnerCommandEventArgs.CommandName == "showdetail")
　　{
            int id = Convert.ToInt32(e.InnerCommandEventArgs.CommandArgument);
           
            for (int i = 0; i < UltraWebGrid1.DisplayLayout.SelectedRows.Count; i++)
            {
                if (UltraWebGrid1.DisplayLayout.SelectedRows[i].Cells[6].Text == "未审批")//选取一行以后获得选定行指定列的值
               {
                    string url2 = "../zhishishenbaobiao/zssbview.aspx?id=" + id + " ";
                    Page.RegisterStartupScript("showinfo", "<script>window.open('" + url2 + "','未审批知识信息查看','width=850,height=600,toolbar=no,scrollbars=yes,status=yes,resizable=yes');</script>");

                }
                else
                {
                    string url2 = "../zhishishenbaobiao/showview.aspx?id=" + id + " ";
                    Page.RegisterStartupScript("showinfo", "<script>window.open('" + url2 + "','已审批知识信息查看','width=850,height=600,toolbar=no,scrollbars=yes,status=yes,resizable=yes');</script>");

                }
            }
           
        }

8. UltraWebGrid 单击单元格选中行
        (1) 选择UltraWebGrid-displayout CellClickActionDefault=RowSelected
        (2)   选择UltraWebGrid-智能选择卡--Bands And Columns--Band[“”]--SelectRowStyle的BackColor属性
  

9. 设置UltraWebGrid的第0列为模板列，加入CheckBox控件，判断其状态是否被选中，代码如下：  

前台或者后台都可以做到:

(1)前台JS代码 

function btnGetCheckClientClick()
{
    var grid = igtbl_getGridById("UltraWebGrid1");
    for(var i=0;i<grid.Rows.length;i++)
    {
        var row = grid.Rows.getRow(i);
        var cell = row.getCell(0).getValue(); //第一列為checkbox
        
        if(cell == 'true')
        {
            //相关传值等操作
        }
    }
}

 

 后台

//可以写在任何地方，属于通用代码
Infragistics.WebUI.UltraWebGrid.TemplatedColumn tcol = (TemplatedColumn)UltraWebGrid1.Bands[0].Columns[0];//模板列 
foreach(CellItem item in tcol.CellItems) 
{              
   System.Web.UI.WebControls.CheckBox chkIsHaveRight=  (System.Web.UI.WebControls.CheckBox)item.FindControl("chbShenhe"); 
   if(chkIsHaveRight.Checked == true) 
   { 
                  //进行相关的操作
   }
}

 

 

10. 禁止操作列
(1) 禁止操作一列数据
   Infragistics.WebUI.UltraWebGrid.TemplatedColumn tcol = (TemplatedColumn)UltraWebGrid1.Bands[0].Columns[9];//模板列
                    foreach (CellItem item in tcol.CellItems)
                    {
                        System.Web.UI.WebControls.ImageButton chkIsHaveRight = (System.Web.UI.WebControls.ImageButton)item.FindControl("ImageButton3");
                        chkIsHaveRight.Enabled = false;
                    }
（2） 禁止操作某列中已审批列
Infragistics.WebUI.UltraWebGrid.TemplatedColumn tcol = (TemplatedColumn)UltraWebGrid1.Bands[0].Columns[9];//模板列
     foreach (CellItem item in tcol.CellItems)
                        {
                            System.Web.UI.WebControls.ImageButton chkIsHaveRight = (System.Web.UI.WebControls.ImageButton)item.FindControl("ImageButton3");
                            if (item.Cell.Row.Cells[6].Text == "已审批")
                            {
                                chkIsHaveRight.Enabled = false;//已审批按钮禁止选择
                            }
                            else
                            {
                                chkIsHaveRight.Enabled = true;
                            }

                        }

11. webgrid 的 RowChanged 事件没有相应

       解决：客户端代码中<LayoutSettings AllowAddNew="Yes" AllowDelete="Yes" AllowEdit="Yes" RowChangedAction="OnTheFlyPostback">

              </LayoutSettings>
               设置RowChangedAction="OnTheFlyPostback"

 

12. 客户端事件在哪里添加

解决：<LayoutSettings AllowAddNew="Yes" AllowDelete="Yes" AllowEdit="Yes" RowChangedAction="OnTheFlyPostback">

                                        <ClientSideEvents OnRowValidate="wgUserRole_OnRowValidate" />

                                        </LayoutSettings>

              ClientSideEvents 中可以添加客户端事件

 

13. WebGrid 的列内容唯一
          解决： 因为我们是通过 datatable 绑定的。绑定前 DataColumn 设置列.Unique = true;

 

14. 隐藏一列

解决：把改列的宽设置为 0px 或者 UltraWebGrid1.Columns[i].Hidden = true;

15. WebGrid在IE6和IE7中拖动错位解决办法：
        修改aspx页面中的
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN">.

16. 按WebGrid排序列

 

protected void UltraWebGrid2_SortColumn(object sender, SortColumnEventArgs e)
{
     string newSortDirection;
     string sqltemp = "";
     //正逆序切换
      if (oldSortDirection == "ASC")
          newSortDirection = "DESC";
     else
          newSortDirection = "ASC";
     oldSortDirection = newSortDirection;
     if (e.ColumnNo != 0)
     {
          if (sqlwhere != "")
          {
              sqltemp +=" " + UltraWebGrid1.Columns[e.ColumnNo].Key + " " + newSortDirection;
              moDataView.RowFilter = "1=1" + sqlwhere;//sqlwhere查询条件
                moDataView.Sort = sqltemp;//按选择字段排序
                if (moDataView.Count == 0)
              {
                  UltraWebGrid1.DataSource = moDataView;
                  UltraWebGrid1.DataBind();
              }
              else
              {
                  UltraWebGrid1.DataSource = moDataView;
                  UltraWebGrid1.DataBind();
              }
          }
          else
          {
               moDataView.RowFilter = "";
               UltraWebGrid1.DataSource = moDataView;
               UltraWebGrid1.DataBind();
           }
      }
}

 

17. 分页设置（默认显示最小显示分页信息按钮：MinimumPagesForDisplay="2"）

<Pager AllowPaging="True" Alignment="right" ChangeLinksColor="True"
                        PageSize="15" PrevText="上一页" NextText="下一页" Pattern="[page:1:首页]&amp;nbsp; [prev]&amp;nbsp; [next]&amp;nbsp; [page:[pagecount]:末页]&amp;nbsp; &amp;nbsp;&amp;nbsp;当前第[currentpageindex]页，共[pagecount]页，每页[pagesize]条记录&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;跳转至[default]页 "
                        StyleMode="ComboBox" QuickPages="2">
                     </Pager>

18. UltraWebGrid中套用子UltraWebGrid情况中隐藏某列字段及设置日期格式
protected void UltraWebGrid1_DataBound(object sender, EventArgs e)
    {
        UltraWebGrid1.Columns[5].Hidden = true;//主表
        UltraWebGrid1.DisplayLayout.Bands[1].Columns[5].Hidden = true;//子表 //Bands[0]是主表, Bands[1]是子表
        UltraWebGrid1.DisplayLayout.Bands[0].Columns[4].Format = "yyyy-MM";//主表设置日期为年月格式
        UltraWebGrid1.DisplayLayout.Bands[1].Columns[4].Format = "yyyy-MM";//子表设置日期为年月格式
    }

19. 鼠标移到对应行变色

displaylayout中添加两个事件

MouseOverHandler 和 MouseOutHandler

<script type="text/javascript" language="javascript">
function UltraWebGrid1_MouseOverHandler(gridName, id, objectType){
      var cell = igtbl_getCellById(id);
      setRowBackColor(cell.Row, "#ff6699");
  }
function UltraWebGrid1_MouseOutHandler(gridName, id, objectType){
     var cell = igtbl_getCellById(id);
     setRowBackColor(cell.Row, "white");     
  }
function setRowBackColor(row, color){
     var cells = row.getCellElements();
     for (var i = 0; i < cells.length; i++)
     {
         cells[i].style.backgroundColor = color;        
     }   
  }
</script>

 20. 数据合并显示

　　我比较习惯在后台绑定数据的方式，所以这里只有C#代码

　　需要哪一列数据合并，就把那列的mergecells属性设为true

　　ultrawebgrid1.columns[0].mergecells = true;