DIV CSS 佈局教程網

 之前很少會用JavaScript去實現頁功能主要怕麻煩，但了解JQuery後這種想法發生了變化；有了這樣的腳本組件就可以在編寫腳本時方便和HTML隔離出來，這樣編寫高重用性的腳本就更方便。下面就是介紹在學習JQuery過程中編寫的基於AJax的數據查詢、排序和分頁功能的復用腳本，只要遵循腳本的某些規則描述Html把腳本文件引入就可以方便實現以上描述的功能。

       先看下實現功能的腳代碼：

/**應用腳本規則：

          引用腳本: JQuery腳本和JQuery的form插件腳本

          Form的ID:    vIEwform

    顯示數據的div的ID: listvIEw

     分頁按鈕Html屬性: pageindex="1"

     排序按鈕Html屬性: orderfIEld="employeeid desc";

提效排序字段Input的ID,Name: orderfIEld

提交分頁索引Input的ID,Name: pageindex

**/

function onInitPaging()

{

     $("#listview").find("[@orderfIEld]").each(function(i)

        {

            var ordervalue = $(this).attr("orderfIEld");

            $(this).click(function()

                {

                    $("#orderfIEld").val(ordervalue);

                    onSubmitPage();

                }

            );

        }

    );

    $("#listvIEw").find("[@pageindex]").each(function(i)

        {

            var piValue = $(this).attr("pageindex");

            $(this).click(function()

                {

                    $("#pageindex").val(piValue);

                    onSubmitPage();

                }

            );

        }

    );

}

function onSubmitPage()

{

    var options = {

        success: function SubmitSuccess(data){

            $("#listvIEw").Html(data);

            onInitPaging();

          

        }

    };

    $('#vIEwform').AJaxSubmit(options);

}

$(document).ready(

    function()

    {

        $("#search").click(function(){

        $("#pageindex").val('0');

        onSubmitPage()

       

        });

      onSubmitPage();

    }

);

約束規則巧用了html的自定義屬性，以上代碼描述查詢，排序和分頁的AJax提交處理。在編寫Html時只需要遵循描述的規則即可，你並不需要在編寫任何腳本代碼；只需要把腳本添加到頁面裡：
http://www.knowsky.com
    <script src=jquery-latest.JS></script>

    <script src=form.JS></script>

    <script src=calendar.JS></script>

     <script src=calendar-setup.JS></script>

    <script src="lang/calendar-en.JS"></script>

    <script src=pagination.JS></script>

    <form id="viewform"  method="post" action="FrmOrderVIEw.ASPx">

    <input id="orderfield" name="orderfIEld" type="hidden" value="" />

    <input id="pageindex" name="pageindex" type="hidden" value ="0"/>

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">

      ;      <tr>

                <td valign="top" align="left">

                     <table width="550" cellpadding="0" cellspacing="0">

                        <tr>

                            <td style="width: 63px; height: 17px; background-color: gainsboro;">

                                CompanyName</td>

                            <td style="width: 114px; height: 17px;">

                                <input id="Text1" name="companyname" type="text" /></td>

                            <td style="width: 63px; height: 17px; background-color: gainsboro;">

                                ShipCity</td>

                            <td style="width: 126px; height: 17px;">

                                <input id="Text2" name="shipcity" type="text" /></td>

                        </tr>

                        <tr>

                            <td style="width: 63px; height: 14px; background-color: gainsboro;">

                                OrderDate</td>

                            <td style="width: 240px; height: 14px;" align="left">

                                <input id="Text3" name="OrderDate_Begin" type="text" />

                                <input id="button1" DateFIEld="Text3" type="button" value="..." /></td>

                            <td style="width: 63px; height: 14px; background-color: gainsboro;">

                            </td>

                            <td style="width: 240px; height: 14px;" align="left">

                                <input id="Text4" type="text" name="OrderDate_End" />

                    &nbsp;           <input id="button2" DateFIEld="Text4" type="button" value="..." /></td>

                        </tr>

                        <tr>

                            <td style="height: 50px" align="left" colspan="4">

                                <input id="search" type="button" value="Search" /></td>

                        </tr>

                    </table>

                </td>

            </tr>

            <tr>

                <td height="99%">

                <div id="listvIEw"></div>

                </td>

            </tr>

        </table>

     </form>

數據提供頁面:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="HFSoft.MVC.DataVIEwContext" %>

<%@ Import Namespace="NorthWind.EntitIEs" %>

<%

    HFSoft.MVC.IDataViewContext dataview = (HFSoft.MVC.IDataVIEwContext)this;

 %>

<table width="100%" >

   <% if(datavIEw.PageCount >0){%>

    <tr>

        <td colspan="7" style="height: 20px">

        <a href="#" pageindex="0" >首頁</a>

        <a href="#" pageindex="<% =datavIEw.PrevPage%>">上一頁</a>

        <a href="#" pageindex="<% =datavIEw.NextPage %>" >下一頁</a>

        <a href="#" pageindex="<% =datavIEw.PageCount-1%>">末頁</a>

        當前<%=dataview.PageIndex+1%>頁／共<%=datavIEw.PageCount %>頁

        </td>

    </tr>

 

    <%}%>

    <tr>

        <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            <a href="#" orderfield="<%=datavIEw.GetOrderInfo("CompanyName")%>" >CustomerName</a></td>

        <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            <a href="#" orderfield="<%=datavIEw.GetOrderInfo("Employees.EmployeeID")%>" >EmployeeName</a></td>

        <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            <a href="#" orderfield="<%=datavIEw.GetOrderInfo("OrderDate")%>" >OrderDate</a></td>

        <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            <a href="#" orderfield="<%=datavIEw.GetOrderInfo("RequiredDate")%>" >RequireDate</a></td>

        <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            ShipAddress</td>

 &nbsp;      <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            ShipCity</td>

        <td style="width: 100px; font-weight: bold; background-color: activeborder;">

            SipCountry</td>

    </tr>

    <%foreach(Order_v item in datavIEw.DataItems)

      { %>

    <tr>

        <td style="width: 100px"><%=datavIEw.ToValue(item.CustomerName)%>

        </td>

        <td style="width: 100px"><%=datavIEw.ToValue(item.EmployeeName)%>

        </td>

        <td style="width: 100px"><%=datavIEw.ToValue(item.OrderDate, "{0:d}")%>

        </td>

        <td style="width: 100px"><%=datavIEw.ToValue(item.RequiredDate, "{0:d}")%>

        </td>

        <td style="width: 100px"><%=datavIEw.ToValue(item.ShipAddress)%>

        </td>

        <td style="width: 100px"><%=datavIEw.ToValue(item.ShipCity)%>

        </td>

        <td style="width: 100px"><% =datavIEw.ToValue(item.ShipCountry)%>

        </td>

    </tr>

   

     <% } %>

  

</table>

數據提供頁相關Controller代碼:

[HFSoft.MVC.FormMapper("~/frmordervIEw.ASPx")]

public void OrderVIEw()

{

    HFSoft.MVC.IDataViewContext viewcontext = (HFSoft.MVC.IDataVIEwContext)this.FormContext;

    IExpression exp;

    FIEldAdapter[] orderby = null;

    OrderSearch search = vIEwcontext.BindObject<OrderSearch>();

    exp = search.GetExpression();

    if (viewcontext.OrderField != null && viewcontext.OrderFIEld != string.Empty)

    {

        orderby = new FieldAdapter[]{new FieldAdapter(viewcontext.OrderFIEld, null)};

    }

    Region region = new Region(viewcontext.PageIndex * 10, vIEwcontext.PageIndex * 10+10);

    vIEwcontext.DataItems = exp.List<Order_v>(region, orderby);

    vIEwcontext.PageSize = 10;

    vIEwcontext.RecordCount = exp.CountOf<Order_v>();

}