记录下项目中常用到的JavaScript/JQuery代码二（大量实例）

记录下项目中常用到的JavaScript/JQuery代码一（大量实例）

1、input输入框监听变化

<input type="text" style="width: 154px" class="text ml5" id="stockSearch"/>

$('#stockSearch').bind('input oninput', function () { //onpropertychange
        var stockKeyword = $(this).val().trim();
        var table = $('.searchTableDiv table tbody');
        if (stockKeyword.length > 0) {
            $.ajax({
                type: 'POST',
                url: "*.do",
                dataType: "json",
                cache: false,
                data: {"keyword": stockKeyword},
                success: function (data) {
                    var stocklist = data.stocklist;
                    table.html("<tr class='stockHeader'><th>代码</th><th>名称</th></tr>");

                    if (stocklist.length > 0) {
                        $.each(stocklist, function (index, item) {
                            if (index == 10) {
                                return false;
                            }
                            var tr = ""
                            tr += "<tr>";
                            tr += "    <td>" + item.stock_code + "</td>";
                            tr += "    <td>" + item.stock_name + "</td>";
                            tr += "</tr>";
                            table.append(tr);
                        });
                    } else {
                        table.append("<tr><td>&nbsp;</td><td>&nbsp;</td></tr>");
                    }
                }
            });
        } else {
            table.html("<tr class='stockHeader'><th>代码</th><th>名称</th></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr>");
        }
    });

2、分页机制

采用后端服务器分页，适用web网站；不适应移动客户端的流式分页。

<script src="/assets/js/laypage/laypage.js"></script>

$(document).ready(function () {
        initPaganation();//页面加载后，默认初始化取第一页数据
});

//显示分页控件的div
<div id="paganation" style="text-align: right;margin-top:15px"></div>

//初始化分页
    function initPaganation() {
        var filter = getQueryAccount();
        pageConf.currentPage = 1;//第一次取第一页的数据

        var tableForSubTraderSearchArrays = $("#tableForSubTraderSearch input");

        var filter_stockCode = tableForSubTraderSearchArrays.eq(0).val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/*.do",
            data: {
                currentPage: pageConf.currentPage,
                pageSize: pageConf.pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: function (data) {
                if (data.state == 2) {
                    return;
                }

                var totalSize = data.size;
                var totalPage;
                if (totalSize % pageConf.pageSize == 0) {
                    totalPage = totalSize / pageConf.pageSize;
                } else {
                    totalPage = totalSize / pageConf.pageSize + 1;
                }
                laypage({
                    cont: $("#paganation"), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: totalPage, //总页数
                    skip: true, //是否开启跳页
                    skin: '#AF0000',
                    groups: 5, //连续显示分页数
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            pageConf.currentPage = obj.curr;
                            searchList(pageConf.currentPage, pageConf.pageSize);
                        }
                    }
                });
                responseHandle(data);
            }

        });
    }

//以传入的页码和pageSize为参数，查询数据
function searchList(currentPage, pageSize) {
        var filter = getQueryAccount();
        var arrays = $("#tableForSubTraderSearch input");

        var filter_stockCode = arrays.eq(0).val();
        var filter_deadlineStartTime = arrays.eq(1).val();
        var filter_deadlineEndTime = arrays.eq(2).val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/*.do",
            data: {
                currentPage: currentPage,
                pageSize: pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: responseHandle
        });
    }

    function responseHandle(data) {
        if (data.state != 0) {
            $(".s-tab-table  tr:not(:first)").html("");
            return;
        }
        var filter = getQueryAccount();
        var isCalcSubTraders = filter.isCalcSubTraders;
        hideLoading();
        var riskItemsList = data.list;

        if (isCalcSubTraders) {
            $("#tableForOrg  tr:not(:first)").remove();
        } else {
            $("#tableForOrg  tr:not(:first)").remove();
        }
        for (var i = 0; i < riskItemsList.length; i++) {
            var item = riskItemsList[i];

            var $tr = $("<tr></tr>");
            var $checkboxTr = $('<td> <input id="zzh-checked' + i + isCalcSubTraders + '" name="stockCodeCheckbox" type="checkbox" data="' + item.stockCode + '"><label for="zzh-checked' + i + isCalcSubTraders + '"></label></td>"');
            if (item.stopTrading){//停牌股票
                $checkboxTr.css("opacity",0.2);
                $checkboxTr.find("input").attr("disabled","disabled");
            }

            var $stockCodeTr = $('<td class="b-td"><a  href="javascript:void(0)">'+ item.stockCode +'</a></td>');
            var stopTradingStr = "";
            if (item.stopTrading){
                 stopTradingStr = "(停牌)";
            }
            var $stockNameTr = $('<td><a class="b-td" href="javascript:void(0)">'+ item.stockName + stopTradingStr +'</a></td>');
            var $carryCostPrice = $("<td class='b-td'>" + parseFloat(item.carryCostPrice).toFixed(2)+ "</td>");
            //增加持仓数量，在持仓成本后面
            var $stockNum = $("<td class='b-td'>" + item.stockNum/100+ "</td>");
            //后台取涨跌幅失败，会返回999，此处显示为空
            var $upDownRate;
            if (item.upDownRate > 998){
                $upDownRate = $("<td class='b-td'></td>");
            }else {
                $upDownRate = $("<td class='b-td'>" + item.upDownRate.toFixed(2) + "</td>");
            }
            // 涨跌幅：正数为红色、负数为绿色；
            if (item.upDownRate > 0){
                $($upDownRate).css("color", COLOR.RED);
            }else if (item.upDownRate < 0){
                $($upDownRate).css("color", COLOR.GREEN);
            }else {
                $($upDownRate).css("color", COLOR.WHITE);
            }
            //  样本库指标有标识；
            if (item.baseinfo.isBelongBio == '1'){
                $tr.addClass("ybkTr");
            }
            var $retracementProbability = $("<td class='b-td'>" + (item.retracementProbability != null ? parseFloat(item.retracementProbability).toFixed(2) : "") + "</td>");
            var $retracementRange = $("<td class='b-td'>" + (item.retracementRange != null ? parseFloat(item.retracementRange).toFixed(2) : "") + "</td>");
            var $oper = null;
            //如果不是子账户，才能看到这两个按钮
            if (!isCalcSubTraders) {
                if (item.retracementProbability == null) {
                    // 没设置参数
                    $oper = $('<td><input type="button" class="sxq-btn jjy-xgcs" value="设置"/><input type="button" class="sxq-btn ml5 calc-now" value="计算"/></td>');
                } else {
                    $oper = $('<td><input type="button" class="sxq-btn jjy-xgcs" value="修改"/><input type="button" class="sxq-btn ml5 calc-now" value="计算"/></td>');
                }
            }else {
                $oper = $('<td></td>');
            }
            if (item.stopTrading){
                $oper.find("input").attr("disabled","disabled");
                $oper.css("opacity",0.2);
            }
            if (item.retracementProbability == null || item.retracementRange == null){
                $oper.find("input").eq(1).attr("disabled","disabled");
                $oper.find("input").eq(1).css("opacity",0.2);
            }
            $checkboxTr.appendTo($tr);
            $stockCodeTr.appendTo($tr);
            $stockNameTr.appendTo($tr);
            $carryCostPrice.appendTo($tr);
            $stockNum.appendTo($tr);
            $upDownRate.appendTo($tr);
            $retracementProbability.appendTo($tr);
            $retracementRange.appendTo($tr);

            $oper.appendTo($tr);
            $("#tableForOrg tbody").append($tr);
            //需要预警的tr要改变颜色
            if (item.needWarn == true){
                $($tr).addClass("yujingTr");
                $tr.find("td").eq(1).find("a").css("color", COLOR.WHITE);
                $tr.find("td").eq(2).find("a").css("color", COLOR.WHITE);
            }else {
                $($tr).removeClass("yujingTr");
            }
        }
    }

效果如下：

这部分感觉写得并不好，希望有建议的同学留言

3、回车键监听

    /**监听回车键*/
    $('#stockListSearch').keypress(function (e){
        if (e.which == 13){
            var stockCode = $('.searchTableDiv table').find('tr').eq(1).children().eq(0).text();
            var stockName = $('.searchTableDiv table').find('tr').eq(1).children().eq(1).text();
            //搜索
            $('#stockListSearch').val(stockCode);
　　　　　　　//更新列表
            pageConf.currentPage = 1;
            getStockList(pageConf.currentPage, pageConf.pageSize);
        }
    });

4、绑定click事件

我最常用的方式：

    $("#queryStock").on("click", function () {
        getStockList(pageConf.currentPage, pageConf.pageSize);
    });

方式二：

$(".qa1-btn").click(onClickQueryAccount)
function onClickQueryAccount() {
　　do sth
};

5、触发事件

http://blog.csdn.net/rrr4578/article/details/27527301

6、判断是否为数字，如果为数字保留两位小数

for (var key in map[i]){
    var indexData = map[i][key];
    if (key == 'stockCode'){

    }else if (isNaN(Number(indexData))){

    }else {
        var parsedIndexData = parseFloat(indexData).toFixed(2);

        if (parsedIndexData != "NaN"){
            indexData = parsedIndexData;
        }
    }
    str+="<th >"+indexData+"</th>";
}