Repeater DataTable 折叠动态加载

网上关于Repeater折叠一般都是直接绑定上去,然后设置样式隐藏显示,可是这样是不太合理的,应该是客户需要的时候,你才去加载出来.所以,自己研究了一段时间,总结出下面的实现方案

 首先是控件部分

 <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
                                    <HeaderTemplate>
                                        <tr class="category">
                                            <td>
                                                <div class="sortable">装车单编码</div>
                                            </td>
                                            <td>
                                                <div class="sortable">装车部门</div>
                                            </td>
                                            <td>
                                                <div class="sortable">装车员</div>
                                            </td>
                                            <td>
                                                <div class="sortable">日期</div>
                                            </td>
                                            <td>
                                                <div class="sortable">物流公司</div>
                                            </td>
                                             <td>
                                                <div class="sortable">配送状态</div>
                                            </td>
                                            <td width="10%">操作</td>
                                        </tr>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr class='<%#(Container.ItemIndex+1)%2==0?"trbg2":"trbg1"%>' οnmοuseοver="this.className='trbgov'"
                                            onmouseout="this.className='<%#(Container.ItemIndex+1)%2==0?"trbg2":"trbg1"%>'">
                                            <td align='left'><%# Eval("FCode") %></td>
                                            <td align='left'><%# Eval("FDepartmentName") %></td>
                                            <td align='left'><%# Eval("FApplicationName") %></td>
                                            <td align='left'><%# Eval("FDate","{0:yyyy-MM-dd}") %></td>
                                            <td align='left'><%# Eval("FExpressName") %></td>
                                            <td> <%#(int)Eval("FSendState") ==1 ? "配送中" : (int)Eval("FSendState") == 2 ? "已结单" : "未配送"%></td>
                                            <td><a href='#' οnclick='showsonlst(this,<%#Eval("PID")%>);'>查看详细</a>&nbsp&nbsp
                                            <font runat="server" id="edit">&nbsp<a  id="" href='../Stock/CarOrdeFollowingInfo_Edit.aspx?id=<%#Eval("PID")%>'>编辑物流信息</a></font>
                                            
                                        </tr>
                                    </ItemTemplate>

                                </asp:Repeater>

View Code

 

然后可以看到 在 '查看详细' 的连接标签上面 我使用了一个js 他的作用是显示和删除 (记得引用jquery)

<script type="text/javascript">
        function showsonlst(e, id) {
            if ($(e).text() == "查看详细") {
                var ps = id;
                $.post("/Control/webControl.ashx", { Method: "ShowOrderFollowingDetail", Parems: ps }, function (data) {
                    if (data != "") {
                        $(e).parent().parent().after(data);
                        $(e).text("隐藏物流信息");
                    }
                });
            }
            else {
                $(e).text("查看详细");
                var row = $("#detailrow_" + id);
                row.remove();
            }
        }

    </script>

View Code

 

最后是后台请求代码

 

public string ShowOrderFollowingDetail(string id)
        {
            string tablehead = "<tr id='detailrow_"+id+"'><td colspan=7 ><table class='TableBlock' style='text-align: center; border: 2px #ACA899 solid; border-bottom: 1px #ACA899 solid' >"
                  + "<tr class='itemHeadTr' style='background-color: #ECECEC'>"
                  + "<td><strong>配送员</strong></td>"
                  + "<td><strong>配送员电话</strong></td>"
                  + "<td><strong>物流位置</strong></td>"
                  + "<td><strong>日期</strong></td>"
                  + "</tr>";

            string html = "";
            //获取表体
            List<T_CarOrdeFollowing> dt = GetAllBySQL(" and KID =" + id).ToList();
            //插入表体
            for (int i = 1; i < dt.Count + 1; i++)
            {
                string htmlrow = "<tr id=row{index}>"
                + "<td>{FDriverName}</td>"
                + "<td>{FDriverPhone}</td>"
                + "<td>{FAddress}</td>"
                + "<td>{FDate}</td>"
                + "</tr>";
                T_CarOrdeFollowing row = dt[i - 1];
                htmlrow = htmlrow.Replace("{index}", i.ToString());
                htmlrow = htmlrow.Replace("{FDriverName}", row.FDriverName);
                htmlrow = htmlrow.Replace("{FDriverPhone}", row.FDriverPhone);
                htmlrow = htmlrow.Replace("{FAddress}", row.FAddress);
                htmlrow = htmlrow.Replace("{FDate}", Convert.ToDateTime(row.FDate).ToString("yyyy-MM-dd"));
                html += htmlrow;
            }
            string tablefoot = "</table></td></tr>";
            return tablehead + html + tablefoot;
        }

View Code

 

 

用了好一段时间才整理出来的,要转载的童鞋记得保留我的链接哦http://www.cnblogs.com/linyijia/p/3465818.html