上一篇：设计模式之代理模式(Proxy) >>

如何给DataGrid添加双题头分类显示

我在写powerdatagrid想到要提供一个查询（有关powerdatagrid的详细信息参考csdn论坛中的讨论帖，源码可以在www.foxhis.com/powermjtest/sharepowerdatagrid.rar下载），该查询的构想是这样的：我的这个控件可以通过指定一个sql语句来显示该语句的内容（其他的功能不叙述了，这不是重点），那么我可以封装一组ui到这个控件里面来实现查询的功能，问题出来了，这个查询通常情况下应该在datagrid的上面也就是查询结果的上面，我要怎么才能保留原来的题头同时再添加一个题头呢（双题头）？

问题出来了，改如何解决呢？想了好多办法都不行，如果要将header重画，那么还要处理排序是前后台的交互问题，那么只能再保留原来header不动的基础上添加新的header。无意中发现在分页的时候可以有几种分页显示的方法，在分页面板里面有一个选现可以选择分页的位置，可以选择上下型，在选择这个类型的时候datagrid在原来的header上面又多了一行，我们今天就利用这一行来完成我们的任务，今天我们不产生查询的ui而是产生一个分类的题头，我们使用测试数据库northwind中的employees来显示数据，首先我们要做的是绑定数据绑定代码如下：

sqlconnection con = new sqlconnection("server=localhost;database=northwind;uid=sa;pwd=;");
         sqldataadapter da = new sqldataadapter("select lastname+ +firstname as name, birthdate, country, title, hiredate from employees",con);
         datatable dt = new datatable();
         da.fill(dt);
         this.datagrid1.datasource = dt;
         this.datagrid1.databind();
}

接着我们在itemcreated里面添加适当的代码来完成我们的任务，在powerdatagrid该事件处理函数里面已经添加了创建一个自定义分页的ui！如果你在powerdatagrid里面添加需要判断两个（上下）pager的位置，我们可以使用一个全局变量来判断。

定义一个全局变量 private int m_createpagetimes ＝ 0;
然后我们为该事件处理函数添加如下代码：

private int m_createpagetimes = 0;
private void datagrid1_itemcreated(object sender, system.web.ui.webcontrols.datagriditemeventargs e) {
         listitemtype elemtype = e.item.itemtype;
         if (elemtype == listitemtype.pager) {
            if (m_createpagetimes == 0) {
               tablecell cellperson = (tablecell) e.item.controls[0];
               cellperson.controls.clear();

cellperson.backcolor = color.navy;
               cellperson.forecolor = color.yellow;
               cellperson.columnspan = 3;
               cellperson.horizontalalign = horizontalalign.center;
               cellperson.controls.add(new literalcontrol("个人信息"));

               tablecell celljob = new tablecell();
               celljob.backcolor = color.navy;
               celljob.forecolor = color.yellow;
               celljob.columnspan = 2;
               celljob.horizontalalign = horizontalalign.center;
               celljob.controls.add(new literalcontrol("工作信息"));
               e.item.controls.add(celljob);
               m_createpagetimes ++;
            }else if(m_createpagetimes ==1){
               // create custom pager ui
            }
         }

    最后是datagrid的html部分的代码如下：
<asp:datagrid id="datagrid1" runat="server" allowpaging="true" autogeneratecolumns="false" width="100%"
     pagesize="2">
     <columns>
      <asp:boundcolumn datafield="name" headertext="姓名"></asp:boundcolumn>
      <asp:boundcolumn datafield="birthdate" headertext="生日"></asp:boundcolumn>
      <asp:boundcolumn datafield="country" headertext="国家"></asp:boundcolumn>
      <asp:boundcolumn datafield="title" headertext="头衔"></asp:boundcolumn>
      <asp:boundcolumn datafield="hiredate" headertext="雇佣日期"></asp:boundcolumn>
     </columns>
     <pagerstyle position="topandbottom" mode="numericpages"></pagerstyle>
    </asp:datagrid>

运行效果如下所示：

（）

返回顶部

下一篇：ASP漏洞全接触-高级篇 >>