DOGNET

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
Asp.net_JQuery+Json实现简单据查询页面

.net 3.5+VS 2008

 

主界面页面：NoteQuery.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NoteQuery.aspx.cs" Inherits="NoteQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>单据查找</title>
    <link href="../Style/CSS/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript" src="../Style/JScript/jquery-1.3.2-vsdoc2.js"></script>
    <%--<script type="text/javascript" language="javascript" src="../Style/JScript/jquery-1.3.2.min.js"></script>--%>
    <script src="../Common/Controls/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="../Style/JScript/bgcolor.js" type="text/javascript"></script>
    <script src="../Style/JScript/ShouFuKuan.js" type="text/javascript"></script>
    
    <script type="text/javascript" language="javascript" src="../Style/JScript/jquery.pagination.1.1.js"></script>
    <script src="../Style/JScript/coverLayer.js" type="text/javascript"></script>
    <script src="../Style/JScript/common.js" type="text/javascript"></script>
    <script src="../Style/JScript/ProcessBar.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

        function jiedaiTextChanged() {
            var v_jiedai = $("#txtJeiDai").val();
            if (v_jiedai == "01" || v_jiedai == "sr")
            {
                $("#txtJeiDai").attr("value", '收入');
            }
            else if (v_jiedai == "02" || v_jiedai == "zc")
            {
                $("#txtJeiDai").attr("value", '支出');
            }
            
        }


        function search() {
            $("#pageIndex").attr("value", 1);
            $.fn.pagination.options.current_page = 0;
            list(0);
            $("#pager").css("display", "block");
        }


        function list(i) {
            var v_startdate = $("#txtStartDate").val();
            var v_enddate = $("#txtEndDate").val();
           

//            var v_warning = "";
//            if (v_startdate == "") {
//                v_warning = v_warning + '开始日期必须输入! \n ';
//            }
//            if (v_enddate == "") {
//                v_warning = v_warning + '结束日期必须输入! \n ';
//            }
//            if (v_warning != "") {
//                //alert(v_warning);
//                showWarnInfoInDivTip($("#divTip").attr("id"), v_warning, 3000);
//                return false;
//            }

            //在本次查询结束前冻结查询按钮
            $("#btnQuery").attr("disabled", true);
            showWarnTipNoneTimeOut("查询中...");//操作提示：与进度度功能类似
            $("#div_Refund").load(
            "NoteQueryHandler.aspx?action=get_note_list&stamp=" + new Date().getTime(),
            {
                startdate: v_startdate,
                enddate: v_enddate,
                ......
                pageIndex: $.fn.pagination.options.current_page + 1
            },
            function() {
                //在本次查询结束后解冻查询按钮
                setWarnTipDisappear();
                $("#btnQuery").attr("disabled", false);
                jquery_pager();
                
                //当结果集大于页大小时再显示分页dataTotalAmount              
                var v_RecordCount = $("#pageCount").val();
                v_RecordCount = (v_RecordCount == undefined) ? (0) : (v_RecordCount);
                var v_RecordTotalAmount = $("#dataTotalAmount").val();
                v_RecordTotalAmount = (v_RecordTotalAmount == undefined) ? (0) : (v_RecordTotalAmount);
                $("#pagerInfo").html(" 每页数："+ $.fn.pagination.options.items_per_page
                    + "&nbsp;&nbsp;总页数：" + Math.ceil(v_RecordCount / $.fn.pagination.options.items_per_page)
                    + "&nbsp;&nbsp;当前页：" + (Number($.fn.pagination.options.current_page) + 1));
                $("#lblHeJiInfo").html("&nbsp;&nbsp;记录总数：" + v_RecordCount
                    + "&nbsp;&nbsp;金额合计：" + v_RecordTotalAmount);
       
            }
            );
        }
        //jquery分页插件
        $(document).ready(function() {
            $.fn.pagination.options =
            {
                items_per_page: 20,
                num_display_entries: 4,
                current_page: 0,
                num_edge_entries: 2,
                link_to: "javascript:void(0)",
                first_text: "第一页",
                prev_text: "上一页",
                next_text: "下一页",
                last_text: "最后一页",
                ellipse_text: "...",
                prev_show_always: true,
                next_show_always: true,
                alway_show: true,
                callback: pageSelected
            }
        });

        /**
        * 翻页
        */
        function pageSelected(page, jq) {
            $.fn.pagination.options.current_page = page;//page从0开始
            list(1);
        }
        function jquery_pager() {
            $("#pager").pagination($("#pageCount").attr("value"), $.fn.pagination.options);        
        
        }

        function ClickDtl() {
            window.open("NoteTypeList.aspx", '_blank', 'width=600,height=400,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no,left=250,top=200');
        }
        //便于服务端得到录入人
        function getddlLuruSelectedText() {
            $("#hidLuru").attr("value", $("#ddlLuru>option:selected").get(0).text);
        }

    </script>
    
</head>
<body>
<form id="form1" runat="server">
<div class="main" style="width:800px">
    <div class="brclum">
        <a href="javascript:void(0);">财务录入</a> &gt;&gt; <a href="#">单据查找</a>
    </div>
    <div id="divTip" class="button_div">
    </div>
    <div class="brclum">
    <table class="table_two" width="100%" border="0" cellpadding="3" cellspacing="0">
      <tr>
        <td height="30px" colspan="8" align="center">
        </td>
      </tr>
      <tr>
        <th align="right" valign="middle" style="height: 30px; width: 80px;">
            <label>号从：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="txtCDanHaoStart" type="text" style="width: 100px" runat="server"/>
        </td>
        <th align="right" valign="middle" style="height: 30px; width: 60px;">
            <label>到：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="txtCDanHaoEnd" type="text" style="width: 100px" runat="server" />
        </td>
        <th align="right" valign="middle" style="height: 30px; width: 60px;">
            <label>日期从：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="txtStartDate" type="text" onfocus="WdatePicker()"  style="width: 100px" runat="server"/>
        </td>
        <th align="right" valign="middle" style="height: 30px; width: 80px;">
            <label>到：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="txtEndDate" type="text" onfocus="WdatePicker()"  style="width: 100px" runat="server" />
        </td>
      </tr>
      <tr>
        <th align="right" valign="middle" style="height: 30px; width: 80px;">
            <label>部门：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="txtDeptText" type="text" style="width: 100px" runat="server" onblur="objNoteQuery.getDepartment(this);"/>
            <input id="txtDeptTextcode" name="txtDeptTextcode" type="hidden" runat="server" />
        </td>
        </tr>
      <tr>
        <th align="right" valign="middle" style="height: 30px; width: 80px;">
            <label>录入人：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <select id="ddlLuru" onchange="getddlLuruSelectedText()">
                <script src="../Common/NoteRecordMan.aspx" type="text/javascript"></script>
            </select>
            <input type="hidden" id="hidLuru" runat="server" value="请选择"/>   
        </td>
       
        <th align="right" valign="middle" style="height: 30px; width: 80px;">
            <label>对帐方式：</label>
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <select id="ddlCFWay" onchange="getddlCFWaySelectedText()">
                <option value="-1">全部</option>
                <option value="1">手工对帐</option>
                <option value="2">系统自动确认汇款</option>
                <option value="3">分期付款</option>
            </select>
            <input type="hidden" id="hidCFWay" runat="server" value="-1"/>   
        </td>
      </tr>
      <tr>
        <th align="right" valign="middle" style="height: 30px; width: 80px;">
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="chkNotHuoKuan" type="checkbox" runat="server"/><label for="chkNotHuoKuan">不包含货款</label>
        </td>
        <th align="right" valign="middle" style="height: 30px; width: 40px;">
            
        </th>
        <td align="left" valign="middle" style="width: 100px; height: 30px;">
            <input id="chkNotXiaoShou" type="checkbox" runat="server"/><label for="chkNotXiaoShou">不包含销售</label>
        </td>
      </tr>      
      <tr>
        <td align="center" colspan="8">
            <input type="button" id="btnQuery" value="确认" class="button_2" onclick="search();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="pageIndex" value="1" type="hidden" />
        </td>
      </tr>  
      <tr>
        <td colspan="10" align="right" style="height: 10px"></td>
      </tr>
    </table>
    </div>
    <div id="div_Refund" class="table_two">
    </div>
<%--    <div>
        <div class="pages" id="pager" style="text-align:left;overflow:auto;float:left">
        </div>
        <div id="divTotalCount" style="float:left;height: 25px; padding: 10px 0 5px 0px;">
        </div>
    </div>--%>
    <div id="pager" class="Pagination">
    </div>
    <div class="Pagination">
        <div id="lblHeJiInfo" class="Pagination align_center red" style="float:right;">
        </div>        
        <div class="Pagination" align="center" id="pagerInfo" style="float:right;">
        </div>
    </div>     
  </div>
<script src="../Style/JScript/NoteQueryAjax.js" type="text/javascript"></script>
</form>
</body>
</html>

 

公共的下接列表项缓存页面：NoteRecordMan.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NoteRecordMan.aspx.cs" Inherits="Common.NoteRecordMan" %>

<%@ OutputCache Duration = "3600" VaryByParam = "none" Location="Client" %>

 

NoteRecordMan.aspx 

    public partial class NoteRecordMan : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            BindDdl();
        }
        private void BindDdl()
        {
            IList<JibenxinxiModel> list = NewHrmService.Instance.NewHrmService.SelectFinanceDeptEmployee();

            StringBuilder sb = new StringBuilder();
            sb.Append("<option value='-1'>请选择</option>");

            if (list != null)
            {
                for (int i = 0; i < list.Count; i++)
                {
                    sb.AppendFormat("<option value='{0}'>{1}</option>", list[i].jbxx_id.ToString(), list[i].jbxx_xm);
                }
            }

            Response.Write("document.write(\"" + sb.ToString() + "\")");
            Response.End();
        }

    }

 

 

操作提示：ProcessBar.js

function showWarnTipNoneTimeOut(oWarnMsg) {
    $("#divTip").empty();
    $("#divTip").show("slow", function() {
        $("#divTip").append("<span style='color:red;font-weight:bold;'>" + oWarnMsg + "</span>");
    });
}

function setWarnTipDisappear() {
    setTimeout(function() { $("#divTip").empty(); }, 1000);
}

 

 得用Json和WS从server得到数据：NoteQueryAjax.js

 var objNoteQuery = new Object();
var intDivTipShowTime = 3000;

objNoteQuery.getDepartment = function(oTxt) {
    try {
        var txtValue = oTxt.value.Trim();
        if (txtValue.length > 0) {
            var jqRequestUrl = "../Page/NoteQueryHandler.ashx";
            $.getJSON(jqRequestUrl + "?action=getDepartment&getTime=" + new Date().getTime(), { inputValue: txtValue }, this.jqDepartmentJsonCallBack);
        }
    }
    catch (e) {
        alert(e.message);
    }
}

objNoteQuery.jqDepartmentJsonCallBack = function(oData) {
   
    var result = oData.result;
    var deptId = oData.resultId;
    if (deptId.length == 0) {
        objNoteQuery.showWarnTip("没有您要查找的所在部门!", intDivTipShowTime);
    }
    else {
        $("#Bumeng").val(result);//此处的待赋值控件id可以从方法传参
        $("#IBumen").val(deptId);
    }
}


处理Json请求：NoteQueryHandler.ashx

    public class NoteQueryHandler1 : IHttpHandler
    {

        #region properties

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }

        #endregion

        #region functions

        public void ProcessRequest(HttpContext context)
        {
            ProcessAjaxRequest(context);
        }

        private void ProcessAjaxRequest(HttpContext context)
        {
            string action = context.Request["action"];
            switch (action)
            {
                default:
                    break;

                case "getDepartment":
                    ProcessDepartmentRequest(context);
                    break;
            }
        }

        /// <summary>
        /// 获取部门和部门id
        /// </summary>
        /// <param name="context"></param>
        private void ProcessDepartmentRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string dept = null;
            string deptId = null;
            try
            {
                string strDept = context.Request["inputValue"].Trim();
                if (!string.IsNullOrEmpty(context.Request["isValidate"]))
                {
                    ValidateCorrectDeptById(out dept, out deptId, "部门", strDept);
                }
                else
                {
                    SetNameValue(out dept, out deptId, "部门", strDept);
                }
            }
            catch
            {
                dept = string.Empty;
                deptId = string.Empty;
            }
            string jsonObject = "{" + string.Format("\"result\":\"{0}\",\"resultId\":\"{1}\"", dept, deptId) + "}";
            context.Response.Write(jsonObject.Trim(' ', ','));
            context.Response.Flush();
            context.Response.End();
        }

        private void SetNameValue(out string name, out string value, string jiedai, string classfication)
        {
            IJdClassficationService service = FiFactory.GetClassficationService();
            Classfication model = new Classfication();
            model.Jiedai = jiedai;
            model.Classfication = classfication;
            IList<Classfication> listModels = service.GetClassficationByCondition(model);
            if (listModels.Count > 0)
            {
                name = listModels[listModels.Count - 1].ClassType;
                value = listModels[listModels.Count - 1].Id.Value.ToString();//id
            }
            else
            {
                name = string.Empty;
                value = string.Empty;
            }
        }
        #endregion
    }

 

主界面查询请求处理：NoteQueryHandler.aspx（结果列表）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NoteQueryHandler.aspx.cs" Inherits="NoteQueryHandler" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <div id="div_YingFuCaiGou" runat="server">
        <table class="table_two" border="1" frame="void" width="100%">
            <tr class="align_center">
                <th width="100">号</th>
                <th width="50">部门</th>
                <th width="100">备注</th>
                <th width="50">详细</th>
            </tr>
            <asp:Repeater ID="Repeater_YingShouAccount" runat="server">
            <ItemTemplate>
                <tr class="align_center" onmouseover="this.style.backgroundColor='#DAE6F5'" onmouseout="this.style.backgroundColor=''">
                    <td><%# Eval("hao")%></td>
                    <td><%# Eval("remark")%></td>           
                    <td><a id="view" onclick="javascript:window.open('NoteDetail.aspx?id='+<%# Eval("cdanhao")%>)" href="javascript:void(0)">查看</a></td>
                    </tr>
            </ItemTemplate>
            </asp:Repeater>
        </table>
        <input id="pageCount" value='<%=this.DataCount%>' type="hidden" />    
        <input id="dataTotalAmount" value='<%=this.DataTotalAmount%>' type="hidden" />    
    </div>
</body>
</html>

 

NoteQueryHandler.aspx.cs

    public partial class NoteQueryHandler : System.Web.UI.Page
    {
        private int pageSize = 20;

        private const string ACTION_GET_NOTE_LIST = "get_note_list";

        protected int CurrentPageIndex
        {
            get
            {
                return Convert.ToInt32(this.Request.Form["pageIndex"]);
            }
        }

        protected int DataCount
        {
            get;
            set;
        }

        protected decimal DataTotalAmount
        {
            get;
            set;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxRespond();
        }

        /// <summary>
        /// 取得参数
        /// </summary>
        private void GetYingShouQueryPara(ref string _action, ref jd_caiwuModel query)
        {
            _action = Request.QueryString["action"];

            query = new Model();
  
            if (String.IsNullOrEmpty(Request.Form["startdate"]))
            {
                query.StartDate = null;
                query.DateStart2EndDiff = null;
            }
            else
            {
                query.StartDate = DateTime.Parse(Request.Form["startdate"]);
            }
           
            //分页
            int? pageIndex = null;
            if (string.IsNullOrEmpty(Request.Form["pageIndex"]))
            {
                pageIndex = 1;
            }
            else
            {
                pageIndex = Int32.Parse(Request.Form["pageIndex"].ToString());
            }
            if (pageIndex != null)
            {
                query.StartRowIndex = this.pageSize * (pageIndex - 1) + 1;
                query.EndRowIndex = this.pageSize * pageIndex;
            }
            query.bIsPager = true;
        }

        /// <summary>
        /// Ajax响应
        /// </summary>
        private void AjaxRespond()
        {
            string strAction = string.Empty;
            jd_caiwuModel query = null;
            GetYingShouQueryPara(ref strAction, ref query);
            switch (strAction)
            {
                case ACTION_GET_NOTE_LIST:
                    GetRefundList(query);
                    break;
            }
        }


        private void GetList(Model query)
        {
            NoteDB _service = new NoteDB();
            IList<jd_caiwuModel> invoices = _service.SelectFinanceNote(query);
            if (invoices.Count > 0)
            {
                div_YingFuCaiGou.Visible = true;
                Repeater_YingShouAccount.DataSource = invoices;
                Repeater_YingShouAccount.DataBind();
                this.DataCount = invoices.Count == 0 ? 0 : invoices[0].RowCount;
                this.DataTotalAmount = invoices.Count == 0 ? 0 : invoices[0].TotalAmount;
            }
            else
            {
                div_YingFuCaiGou.Visible = false;
            }
        }    
    }


 

 

posted on 2010-05-19 12:33  DOGNET  阅读(1012)  评论(0)  编辑  收藏  举报