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


  • 相关阅读:
    1.27
    1.25
    Representation Learning with Contrastive Predictive Coding
    Learning a Similarity Metric Discriminatively, with Application to Face Verification
    噪声对比估计(负样本采样)
    Certified Adversarial Robustness via Randomized Smoothing
    Certified Robustness to Adversarial Examples with Differential Privacy
    Dynamic Routing Between Capsules
    Defending Adversarial Attacks by Correcting logits
    Visualizing Data using t-SNE
  • 原文地址:https://www.cnblogs.com/wjchang/p/3671544.html
Copyright © 2011-2022 走看看