您的位置:首页 > Web前端 > JQuery

Asp.net_JQuery+Json实现简单据查询页面

2010-05-19 12:33 921 查看
.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
+ "  总页数:" + Math.ceil(v_RecordCount / $.fn.pagination.options.items_per_page)
+ "  当前页:" + (Number($.fn.pagination.options.current_page) + 1));
$("#lblHeJiInfo").html("  记录总数:" + v_RecordCount
+ "  金额合计:" + 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> >> <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();"/>       
<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;
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐