项目的部分代码（手写智能提示，无刷新分页）
<div class="content">
<div class="search">
<label class="search-label">搜索项目：</label>
<img src="@Url.Content("~/Content/Images/PMS_bb_search.png")" alt="search" id="seacherconfirm"/>
<div id="autocompletefield">
<div class="searchers">
<input type="text" id="seachers" name="" tabindex="1" art="textbox" value="" emptytext="名称、拼音、编号、简称" maxlength="10" showmaxlength="true" />
</div>
<div id='autocomplete'>
</div>
</div>
</div>
<div id="pagespace">
<div id="pagenode">
</div>
<div id="pagerspace">
<div art="pager" id="pager" totalcount="0" template="textMode" pagesize=""
pageindex="" onpageindexchanged="pageIndexChanged">
</div>
<p id="pagemsg"></p>
</div>
</div>
</div>
// 开始进入，加载第一页的数据
$(function () {
var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
var pageindex = 1;
var pagesize = 3;
var condition = null;
var projectstatus = null;
startpage(url, pageindex, pagesize, condition, projectstatus);
});
// 在建项按键计数2器
var constructProjectCounter = 0;
// 维保期按键计数器
var maintainceProjectCounter = 0;
// 在建项和维保期按钮之间的互斥信号量
var semaphore = 0;
// 信号量参数
var statusprovider = null;
// 初始化智能提示框的位置
$("#autocomplete").css("left", $("#seachers").offset().left - 180);
$("#autocomplete").css("top", $("#seachers").offset().top + 23);
// 监听键盘抬起的事件
$("#seachers").keyup(function () {
var len = $(this).val().trim().length;//解决了中文输入法的问题！
if (len >= 1) {
var ul = "@this.Url.Action("AutoGet", "Project")";
var msg = $("#seachers").val().trim();
uploadautocompletedata(ul, msg);
} else {
$("#autocomplete").empty();
}
});
// 失去焦点是清空
$("#autocompletefield").mouseleave(function () {
$("#autocomplete").empty();
});
// 搜索框获得焦点清空
$("#seachers").focus(function () {
$("#seachers").val("");
});
// 当页码开始改变的时候调用
function pageIndexChanged() {
var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
var pageindex = $("#pager").pager("pageindex");
var pagesize = $("#pager").pager("pagesize");
var condition = $("#seachers").val().trim();
var projectstatus = statusprovider;
$("#pagenode").empty();
startpage(url, pageindex, pagesize, condition, projectstatus);
}
// 加载智能提示消息
function uploadautocompletedata(ul, msg) {
$.getJSON(ul, { msg: msg }, function (data) {
$("#autocomplete").empty();
for (var i = 0; i < data.Total; i++) {
var itemsearch = data.Rows[i];
var createelement = $("<div class='autoitem'>" +
"<p class='fullname'>" + itemsearch.ProjectName + "</p>" +
"<p class='summary'><span>项目简称：</span><span class='summary-short'>" + itemsearch.ProjectShortName +
"</span><span>项目编号：</span><span class='summary-number'>" + itemsearch.ProjectNumber + "</span></p>" +
"</div>");
$("#autocomplete").append(createelement);
}
$(".autoitem").click(function () {
$("#seachers").val($(this).find($(".fullname")).text().trim());
var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
var pageindex = 1;
var pagesize = 3;
var condition = $("#seachers").val().trim();
var projectstatus = statusprovider;
$("#pagenode").empty();
startpage(url, pageindex, pagesize, condition, projectstatus);
$("#autocomplete").empty();
});
});
}
// 查询在建期项目
$("#ConstructProject").click(function () {
constructProjectCounter++;
$("#seachers").val("");
var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
var pageindex = 1;
var pagesize = 3;
var condition = null;
var projectstatus;
if (semaphore == 1) {
$("#MaintainceProject").css({ "background-color": "#11AEE1" });
$(".safeguard").css("color", "white");
maintainceProjectCounter = 0;
}
if (constructProjectCounter % 2 != 0) {
projectstatus = "在建项";
$("#ConstructProject").css({ "background-color": "white" });
$(".creating").css({ "color": "#11AEE1" });
semaphore = 1;
statusprovider = projectstatus;
} else {
projectstatus = null;
$("#ConstructProject").css({ "background-color": "#11AEE1", "color": "white" });
$(".creating").css({ "color": "white" });
semaphore = 0;
statusprovider = null;
}
$("#pagenode").empty();
startpage(url, pageindex, pagesize, condition, projectstatus);
});
// 维保期项目
$("#MaintainceProject").click(function () {
// 计数器自加
maintainceProjectCounter++;
$("#seachers").val("");
var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
var pageindex = 1;
var pagesize = 3;
var condition = null;
var projectstatus;
if (semaphore == 1) {
$("#ConstructProject").css({ "background-color": "#11AEE1" });
$(".creating").css("color", "white");
constructProjectCounter = 0;
}
if (maintainceProjectCounter % 2 != 0) {
projectstatus = "维保期";
$("#MaintainceProject").css({ "background-color": "white" });
$(".safeguard").css("color", "#11AEE1");
semaphore = 1;
statusprovider = projectstatus;
} else {
projectstatus = null;
$("#MaintainceProject").css({ "background-color": "#11AEE1" });
$(".safeguard").css("color", "white");
semaphore = 0;
statusprovider = null;
}
$("#pagenode").empty();
startpage(url, pageindex, pagesize, condition, projectstatus);
});
// 确认搜索
$("#seacherconfirm").click(function () {
var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
var pageindex = 1;
var pagesize = 3;
var condition = $("#seachers").val().trim();
var projectstatus = statusprovider;
$("#pagenode").empty();
startpage(url, pageindex, pagesize, condition, projectstatus);
});
// 获取后台分页数据，并动态创建元素，实现无刷新分页----> 不解释
function startpage(url, pageindex, pagesize, condition, projectstatus) {
$.getJSON(url, { pageindex: pageindex, pagesize: pagesize, condition: condition, projectstatus: projectstatus }, function (data) {
for (var i = 0; i < data.Rows.length; i++) {
var item = data.Rows[i];
var projectNumber = item.Outline.ProjectNumber;
var projectName = item.Outline.ProjectName;
var projectManagerName = item.Outline.ProjectManagerName;
var contractNumber = item.Content.ContractNumber;
var contractName = item.Content.ContractName.substring(0, 17);
var allContractName = item.Content.ContractName;
var contractMoney = item.Content.ContractMoney;
var projectBeginDate = item.Content.ProjectBeginDateStringFormat;
var projectEndDate = item.Content.ProjectEndDateStringFormat;
var workingHoursOfConstruct = item.Content.WorkingHoursOfConstruct;
var workingHoursOfMaintaince = item.Content.WorkingHoursOfMaintaince;
var projectStatusName = item.Content.ProjectStatusName;
var projectCategoryName = item.Content.ProjectCategoryName;
var businessLineName = item.Content.BusinessLineName;
var changeTimes = item.Content.ChangeTimes;
var costOfPurchaseHardware = item.Content.CostOfPurchaseHardware;
var costOfPurchaseSoftware = item.Content.CostOfPurchaseSoftware;
var costOfOutsourcing = item.Content.CostOfOutsourcing;
var usedWorkDays = item.Progress.UsedWorkDays;
var totalWorkDays = item.Progress.TotalWorkDays;
var workDayPercent = item.Progress.WorkDayPercent;
var usedManHour = item.Progress.UsedManHour;
var totalManHour = item.Progress.TotalManHour;
var manHourPercent = item.Progress.ManHourPercent;
var usedMoney = item.Progress.UsedMoney;
var budgetMoney = item.Progress.BudgetMoney;
var moneyPercent = item.Progress.MoneyPercent;
var projectiid = item.Outline.ProjectID;
var hasProjectManagerRight = item.HasProjectManagerRight;
var hasBizLeaderRight = item.HasBizLeaderRight;
var node = "";
var deletenode = "";
var managernode = "";
var partial = "<label id='' class='item-content-title'>合同编号：</label>" +
"<label id='' class='item-content-content'>" + contractNumber + "</label>" +
"<label id='' class='item-content-title'>合同名称：</label>" +
"<label id='all-name' class='item-content-content'>" + contractName + "</label>" +
"<label id='' class='item-content-title'>合同额：</label>" +
"<label id='' class='item-content-content'>" + contractMoney + "</label>";
var deletepartial = "<div class='item-operate-item'><a href='@Url.Action("DeleteProjectEntry", "Project")?id=" + projectiid + "'>" +
"<img src='@Url.Content("~/Content/Images/pms_delete.png")' alt='删除' />" +
"<span class='item-operate-span'>删除</span></a></div>";
var managerpartial = "<div class='item-operate-item'><a href='@Url.Action("BudgetAdjustment", "BudgetAdjustment")?id=" + projectiid + "'><img src='@Url.Content("~/Content/Images/pms_updatechange.png")' alt='预期调整'/>" +
"<span class='item-operate-span'>预算调整</span></a></div>" +
"<div class='item-operate-item'><a href='@Url.Action("MaintainDataTracking", "Project")?id=" + projectiid + "'><img src='@Url.Content("~/Content/Images/pms_update.png")' alt='定期更新' />" +
"<span class='item-operate-span'>定期更新</span></a></div>" +
"<div class='item-operate-item'><a href='@Url.Action("SetProjectMileStone", "ProjectMileStone")?id=" + projectiid + "'><img src='@Url.Content("~/Content/Images/pms_stonemile.png")' alt='里程碑' />" +
"<span class='item-operate-span'>里程碑</span></a></div>" +
"<div class='item-operate-item'><a href='@Url.Action("GetProjectChangeInfo", "ChangeProject")?id=" + projectiid + "'><img src='@Url.Content("~/Content/Images/pms_budgetchange.png")' alt='变更' />" +
"<span class='item-operate-span'>变更</span></a></div>";
if (projectCategoryName.trim() == "合同") {
node = partial;
}
if (hasBizLeaderRight == 1) {
deletenode = deletepartial;
}
if (hasProjectManagerRight == 1) {
managernode = managerpartial;
}
var element = $("<div class='item'>" +
"<div class='item-header'>" +
"<input type='text' readonly='readonly' id='PName' class='item-header-PName' value='" + projectName + "' />" +
"<input type='text' readonly='readonly' id='PNO' class='item-header-PNO' value='" + projectNumber + "' />" +
"<input type='text' readonly='readonly' id='PM' class='item-header-PM' value='" + projectManagerName + "' />" +
"</div>" +
"<div class='item-content'>" +
"<label id='' class='item-content-title'>项目类型：</label>" +
"<label id='' class='item-content-content'>" + projectCategoryName + "</label>" +
node +
"<label id='' class='item-content-title'>变更次数：</label>" +
"<label id='' class='item-content-content'>" + changeTimes + "</label>" +
"<label id='' class='item-content-title'>业务线：</label>" +
"<label id='' class='item-content-content'>" + businessLineName + "</label>" +
"<label id='' class='item-content-title'>项目状态：</label>" +
"<label id='' class='item-content-content'>" + projectStatusName + "</label>" +
"<label id='' class='item-content-title'>立结项时间：</label>" +
"<label id='' class='item-content-content'>" + projectBeginDate + "~" + projectEndDate + "</label>" +
"<label id='' class='item-content-title'>建设期：</label>" +
"<label id='' class='item-content-content'>" + workingHoursOfConstruct + "人月</label>" +
"<label id='' class='item-content-title'>维护期：</label>" +
"<label id='' class='item-content-content'>" + workingHoursOfMaintaince + "人月</label>" +
"<label id='' class='item-content-title'>采购成本：</label>" +
"<label id='' class='item-content-content'>硬(" + costOfPurchaseHardware + ");软(" + costOfPurchaseSoftware + ");外(" + costOfOutsourcing + ")</label>" +
"</div>" +
"<div class='item-footer'>" +
"<div class='item-footer-item'>" +
"<label id='' class='item-footer-title'>工期(工作日)：</label>" +
"<div id='' class='item-footer-content-external'>" +
"<div id='progressBarOfWorkPeriod" + j + "' class='item-footer-content-inside'></div>" +
"</div>" +
"<label id='percentOfWorkPeriod" + j + "' name='" + workDayPercent + "' class='item-footer-content-percent'>" + workDayPercent + "%</label>" +
"<label id='' class='item-footer-content-rate'>" + usedWorkDays + "/" + totalWorkDays + "</label>" +
"</div>" +
"<div class='item-footer-item'>" +
"<label id='' class='item-footer-title'>工时(人月)：</label>" +
"<div id='' class='item-footer-content-external'>" +
"<div id='progressBarOfWorkHours" + j + "' class='item-footer-content-inside'></div>" +
"</div>" +
"<label id='percentOfWorkHours" + j + "' name='" + manHourPercent + "' class='item-footer-content-percent'>" + manHourPercent + "%</label>" +
"<label id='' class='item-footer-content-rate'>" + usedManHour + "/" + totalManHour + "</label>" +
"</div>" +
"<div class='item-footer-item'>" +
"<label id='' class='item-footer-title'>费用(万元)：</label>" +
"<div id='' class='item-footer-content-external'>" +
"<div id='progressBarOfCost" + j + "' class='item-footer-content-inside'></div>" +
"</div>" +
"<label id='percentOfCost" + j + "'name='" + moneyPercent + "' class='item-footer-content-percent'>" + moneyPercent + "%</label>" +
"<label id='' class='item-footer-content-rate'>" + usedMoney + "/" + budgetMoney + "</label>" +
"</div>" +
"</div>" +
"<div class='item-operate'>" +
"<div class='item-operate-item'><a href='@Url.Action("ShowProjectInfo", "Project")?id=" + projectiid + "'>" +
"<img src='@Url.Content("~/Content/Images/pms_search_lense.png")' alt='查看' />" +
"<span class='item-operate-span'>查看</span></a></div>" +
"<div class='item-operate-item'><a href='@Url.Action("ModifyProject", "Project")?id=" + projectiid + "'>" +
"<img src='@Url.Content("~/Content/Images/pms_pencil_edit.png")' alt='修改' />" +
"<span class='item-operate-span'>修改</span></a></div>" +
deletenode +
managernode +
"</div></div>");
$("#pagenode").append(element);
$("#pager").pager("totalcount", data.Total);
$("#pager").pager("pagesize", data.PageSize);
$("#pager").pager("pageindex", data.PageIndex);
}
if (data.Total == 0) {
$("#pager").hide();
$("#pagemsg").text("没有找到符合条件的数据！");
} else {
$("#pager").show();
$("#pagemsg").text("");
}
});
}