200分再提问，asp.net中怎样快速地使用jquery的插件？

Question

jQuery提供了很多现成的插件（牛人做好的，比如格式化的数据表、很COOL的翻图片效果）本人现有一个项目，就是用普通的gridview等数据控件做成的，现在想把它修改一下，使用强大的jquery插件，但是网上搜索半天没有思路，还请CSDN的高人指点！最后能有示例，谢谢！

Answer 1

>????
你要用jquery 代替gridview 吗？

Answer 2

直接写一个也不难的，很简单的。
直接写的灵活性打，可以根据直接的需要进行修改。
http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html
ctrl+f 输入 表格类
有很多的，希望你能找到适合你的。

Answer 3

http://www.reconstrukt.com/ingrid/
我看这个估计就是你需要的。

Answer 4

对，就是jquery来代替，或者补充gridview...

Answer 5

用jQuery的Selectorshttp://blog.miawork.com/?p=1401

Answer 6

为什么不是大名的Flexigrid   ？？

Answer 7

正好现在一直在做这样的项目。
jquery  实现和无刷新的滑动效果。内容比较  供参考。
Jquery 得到gridview 每行数据，
  $(document).ready(function(){  
                $("#GridView1 tr").mouseover(function(){
                 $(this).addClass("over");}).mouseout(function(){ 
                 $(this).removeClass("over");}).click(function(){ 
                      $(this).addClass("alt");
                      $("#GridView1 tr").not(this).removeClass("alt")});    
        });
        
        function EditUser() { 
         $('#empID').addClass("redonly");
         $('#empID').attr("readonly","readonly"); 
//         $("#bb").hide();
         $("#AddInfo").hide(); 
         $("#EditInfo").show();
         $("#bb").show('slow');         $(event.srcElement.parentElement.parentElement).find("td").each(function(i) {
             $("#sj>input").eq(i).val($(this).text());
             document.getElementById('empID').value = document.getElementById('Text1').value;
             document.getElementById('name').value = document.getElementById('Text2').value;
             document.getElementById('txtsex').value = document.getElementById('Text3').value;
             var doctorName = document.getElementById('Text4').value;
             var hisid = document.getElementById('Text5');
         });

Answer 8

----------------------gridview
 <td colspan="4">
                            <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
                                Width="840px" AllowPaging="True" 
                                OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="8" 
                                ondatabound="GridView1_DataBound" 
                                onrowdatabound="GridView1_RowDataBound" 
                                onselectedindexchanged="GridView1_SelectedIndexChanged" Font-Size="9pt" 
                                AutoGenerateColumns="False">
                                <RowStyle BackColor="#EFF3FB" />
                                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                <EditRowStyle BackColor="#2461BF" />
                                <AlternatingRowStyle BackColor="White" />
                                <Columns>
                                    <%--<asp:TemplateField>
                                        <ItemTemplate>
                                           <a href="AjaxDelInfo.aspx?DepNum=<%# DataBinder.Eval(Container.DataItem, "DepNum") %>" onclick="return confirm('您真的要删除所选项吗？')">删除</a>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>--%><asp:BoundField DataField="Pid" HeaderText="病案号" />
                                    <asp:BoundField DataField="Pname" HeaderText="姓名" />
                                    <asp:BoundField DataField="Sex" HeaderText="性别" />
                                    <asp:BoundField DataField="doctorName" HeaderText="操作员" />
                                    <asp:BoundField DataField="hisid" HeaderText="医院ID" />
                                    <asp:TemplateField HeaderText="操作" ItemStyle-HorizontalAlign="Center">
                                        <ItemTemplate>
                                           <img onclick="javascript:EditUser();" height="16" alt="编辑" src="../images/pencil.gif"
                                            width="16" align="absMiddle" border="0" style="cursor: hand">
                                            <img onclick="javascript:DelUser('删除');" height="16" alt="删除" src="../images/bin_closed.gif"
                                            width="16" align="absMiddle" border="0" style="cursor: hand">
                                        </ItemTemplate><ItemStyle HorizontalAlign="Center"></ItemStyle>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </td>

Answer 9

谢谢jason_dct 的详细代码，我想，我需要的是Flexigrid 这样的插件，但是怎么用在我的页面上，我比较糊涂，网上的都是基于MVC的

Answer 10

直接读取数据，再分jquery展示出来就行了。jquery就是人家写好的js脚本。下面的代码你可以参考参考估计是你想要的
<link href="../../css/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery/jquery-1[1].3.2.js"></script>
<script type="text/javascript" src="../../js/jquery/jquery.pagination.js"></script>
<script type="text/javascript">
    var items_per_page = 30;
    var RecordCount = 0;
    function pageselectCallback(page_id, jq){getDate(page_id + 1);}
    $(document).ready(function(){getDate(1);});
    function getDate(index){
        var thml = "";
        var cla="b";
        var txtKey=$("#txtName").val();
        var isLease=$("#dropIsLease").val();
        var status=$("#dropStatus").val();
        var isText="";
        $.ajax({
            type: "POST",
            url: "ajaxTest.aspx",
            data: "Page=" + index + "&items_per_page=" + items_per_page+"&status="+status+"&isLease="+isLease+"&txtKey="+txtKey,
            dataType: "json",
            success: function(data){
                RecordCount = data.RecordCount;
                $.each(data.T, function(i, n){
isText=n.ISLEASE=="1"?"外派":"内部使用"
                    thml += "<tr class="+cla+"><td></td><td>" + n.CARID + "</td><td>" + n.CARBRAND + "</td><td>"+isText+"</td></tr>";
                    if(cla=="b"){cla="c"}else{cla="b"}
                });
                $("#tt>tbody").html(thml);
                $("#show").html("[页次:"+index+"/"+data.PageCount+"][共"+RecordCount+"条 "+items_per_page+"页]");
                $("#Pagination").pagination(RecordCount, {
current_page:index-1,
                    num_edge_entries: 5,
                    num_display_entries: 5,
                    items_per_page: items_per_page,
                    callback: pageselectCallback
                });
            }
        });
    }
</script><table align="left" cellpadding="0" cellspacing="0" style="clear: both;">
            <tr align="left">
                <td>
                    关键字<input id="txtName" name="txtName" type="text"/></td>
                <td>
                   是否外派<select id="dropIsLease" name="dropIsLease">
                        <option selected="selected" value="-1">-是否外派-</option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                    状态
                    <select id="dropStatus" name="dropStatus">
                        <option selected="selected" value="-1">-选择状态-</option>
                        <option value="1">正常</option>
                        <option value="0">停用</option>
                    </select>
                    <button type="button" onclick="getDate(1);">
                        <img align="absmiddle" src="../../images/search.gif" />查询</button></td>
            </tr>
        </table>
<table id="tt" border="0" align="left" cellpadding="0" cellspacing="0" class="datatable" style="clear: both;">
<thead>
<tr class="h">
<td>操作</td>
                <td nowrap="nowrap">
                    序号
                </td>
                <td nowrap="nowrap">
                    车牌号码
                </td>
                <td nowrap="nowrap">
                    是否外派
                </td>
            </tr>
</thead>
<tbody></tbody>
</table>
<div id="Pagination" class="pagination">
</div><div id="show" class="pagination" style="float:left;vertical-align:text-bottom;">
</div>