zoukankan      html  css  js  c++  java
  • 项目的部分代码(手写智能提示,无刷新分页)

    <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("");
                        }
    
                    });
                }


  • 相关阅读:
    Linux下PHP安装配置MongoDB数据库连接扩展
    Linux下安装配置MongoDB数据库
    解决VMWARE 虚拟机安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态
    nginx配置多域名
    nginx File not found 错误
    RunLoop与NSTimer的经典面试题
    子线程上的RunLoop运行循环
    主线程上的RunLoop运行循环
    RunLoop运行循环/消息循环
    自动释放池和运行/消息循环
  • 原文地址:https://www.cnblogs.com/wjchang/p/3671544.html
Copyright © 2011-2022 走看看