当前位置: 代码迷 >> Web前端 >> 项目的一部分代码(手写智能提示,无刷新分页)
  详细解决方案

项目的一部分代码(手写智能提示,无刷新分页)

热度:261   发布时间:2013-03-25 15:43:04.0
项目的部分代码(手写智能提示,无刷新分页)
<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("");
                    }

                });
            }


  相关解决方案