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"%>' onmouseover="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='#' onclick='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