数据绑定——DataGrid

    在做网页的时候,难免要呈现一些数据到网页中,其中容纳数据的控件有不少,其中自己学习到了Datalist,Repeater,DataGrid。下面一一介绍这几个控件,不过在介绍这几个控件,先说一下怎么绑定数据。

语句:<%# DataBinder.Eval(绑定数据的容器,绑定的字段,绑定数据的格式) %>

<ItemTemplate>
                        <asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.personDate","{0:yyyy-MM-dd}") %>'></asp:Label>
                    </ItemTemplate>

      Repeater容器控件:该控件属于较为简单的控件,在VS中没有为程序员提供可视化的设计界面(我是没找到)。相对来说功能比较少。

       该下的模板:

    ItemTemplate(普通项模板):该模板内可以添加数据源的每个数据项和控件。

    AlternatingItemTemplate(交叉项模板):该模板内可以添加数据源的每个数据项和控件。

    HeaderTemplate(页眉模板):可以添加每个数据项和控件,不过该模板存在时,必须和项模板共同呈现数据项。比如项模板呈现的是单数数据项,那么该模板就是偶数数据项。

    FooterTemplate(页脚模板):就是我们自定义设计页脚了,可以绑定数据项,也可以添加控件

    SeparatorTemplate(项模板):项与项之间的元素,比如直线<hr/>

实例

<ItemTemplate>
                    <tr border="1">
                        <td>
                           <%-- <%#DataBinder .Eval (Container .DataItem ,"pID" )%>--%> <%#DataBinder .Eval (Container .DataItem ,"personName" )%>
                        </td>
                    </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>

                    <font color="red">
                        <tr>
                            <td>
                        <%#DataBinder .Eval (Container .DataItem ,"pID" )%> <%#DataBinder .Eval (Container .DataItem ,"personName" )%></td>
                        </tr>
                    </font>
                </AlternatingItemTemplate>

    DataList容器控件:这个控件比起Repeater控件要好使,它可以自定义设置模板。

    实例

对应网页上的绑定数据代码

 <EditItemTemplate >
                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName ="update">保存</asp:LinkButton>
                    <asp:LinkButton ID="LinkButton2" runat="server" CommandName ="cancel">取消</asp:LinkButton>
                     <%#DataBinder.Eval (Container .DataItem,"pID") %>
                    <%#DataBinder .Eval (Container .DataItem ,"personName") %>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"personAddress") %>'></asp:TextBox>

                </EditItemTemplate>
                <SelectedItemTemplate>
                    员工姓名: <%#DataBinder .Eval (Container .DataItem ,"personName") %>
                    <br />
                    生日:<%#DataBinder .Eval (Container .DataItem ,"personDate") %><br />住址:<%#DataBinder .Eval (Container .DataItem ,"personAddress") %>
                </SelectedItemTemplate>

相应的模板的后台代码

 //有按钮的话,无论单击哪个按钮都会触发该事件
        protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
        {
            //选中该项
            if (e.CommandName =="select")
            {
                this.DataList1.SelectedIndex = e.Item.ItemIndex;     //绑定要查询到项

                this.DataBindToDataList();     <pre name="code" class="html" style="font-size: 13.3333px;"> //封装的绑定数据源到该控件的方法
 

} } 

//编辑是触发该事件,修改按钮的commandname直接到该事件
 protected void DataList1_EditCommand(object source, DataListCommandEventArgs e) 
{ if(e.CommandName =="edit") this.DataList1.EditItemIndex = e.Item.ItemIndex; //绑定当前要修改的项 
this.DataBindToDataList(); //封装的绑定数据源到该控件的方法
 }


 
        DataGrid控件:该控件更牛了,有属性生成器,可以直接添加模板列,什么按钮列,模板列,属性生成器帮你搞定。点击左上角的小按钮,就有下面的界面了。 

实例

 <EditItemTemplate>
                        <asp:TextBox runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.personDate") %>' ID="txt1"></asp:TextBox>
                        <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="日期不合法" ControlToValidate="txt1" Display="Dynamic" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.personDate","{0:yy<span style="color:#ff0000;">yy-MM-dd</span>}") %>'></asp:Label>         //这里可以自定义格式的。
                    </ItemTemplate>


     




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
EasyUI DataGrid是一个基于jQuery的用户界面库,用于创建和管理表格数据。它提供了一系列的功能,如数据排序、分页、编辑和格式化等。引用 要使用EasyUI DataGrid,你需要了解一些基本的概念和操作。首先,你需要在HTML文件中引入必要的CSS和JS文件。然后,你可以使用简单的HTML标记创建一个DataGrid,通过指定列的属性来定义表格的结构和样式。接下来,你需要使用JavaScript代码初始化DataGrid,并绑定数据源。你可以使用Ajax从服务器端获取数据,也可以直接使用本地数据。 在使用DataGrid时,你可以使用一些常见的方法来操作数据。例如,你可以使用getData方法获取DataGrid的所有数据行,使用getRowIndex方法获取指定行的索引。你还可以使用insertRow方法向DataGrid插入新行,并使用editRow方法编辑指定的行。 在处理数据时,你可以根据需要进行一些自定义操作。例如,你可以定义一个新的行对象,并将其作为参数传递给insertRow方法,以插入一行新数据。你还可以为DataGrid中的某些单元格设置编辑器或格式化器,以实现特定的需求。 总之,EasyUI DataGrid是一个用于创建和管理表格数据的强大工具,通过了解基本的概念和操作,你可以更好地使用它来满足你的需求。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [easyui datagrid editor回车切换单元格示例,可参考](https://download.csdn.net/download/ckzgg/71918175)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [EasyUI框架02——datagrid](https://blog.csdn.net/weixin_43318134/article/details/104142551)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值