记录下项目中常用到的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> </td><td> </td></tr>");
}
}
});
} else {
table.html("<tr class='stockHeader'><th>代码</th><th>名称</th></tr><tr><td> </td><td> </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>";
}