记录下项目中常用到的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>";
}

记录下项目中常用到的JavaScript/JQuery代码二(大量实例)的更多相关文章

  1. 记录下项目中常用到的JavaScript/JQuery代码一(大量实例)

    一直没有系统学习Javascript和Jquery,每次都是用到的时候去搜索引擎查,感觉效率挺低的.这边把我项目中用的的记录下,想到哪写哪,有时间再仔细整理. 当然,由于我主要是写后端java开发,而 ...

  2. 项目中常用的MySQL 优化

    本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 一.EXPLAIN 做MySQL优化,我们要善用EXPLAIN查看SQL执行计划. 下面来个简单的示例,标注(1.2.3.4.5)我 ...

  3. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

  4. JAVA项目中常用的异常处理情况总结

    JAVA项目中常用的异常知识点总结 1. java.lang.nullpointerexception这个异常大家肯定都经常遇到,异常的解释是"程序遇上了空指针",简单地说就是调用 ...

  5. JAVA项目中常用的异常知识点总结

    JAVA项目中常用的异常知识点总结 1. java.lang.nullpointerexception这个异常大家肯定都经常遇到,异常的解释是"程序遇上了空指针",简单地说就是调用 ...

  6. Android 项目中常用到的第三方组件

    项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...

  7. VB的一些项目中常用的通用方法-一般用于验证类

    1.VB的一些项目中常用的通用方法: ' 设置校验键盘输入值,数字 Public Function kyd(key As Integer) As Integer Dim mychar mychar = ...

  8. (42)嵌入式项目中常用到的C语言技能总结

    嵌入式项目中常用到的C语言技能 1.指针 .结构体. 枚举. 联合.数组.字符串.链表七个专题 2.结构体指针.结构体的多重嵌套[结构体中嵌套结构体.结构体中嵌套枚举.联合体.结构体中嵌套函数指针.一 ...

  9. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

随机推荐

  1. Spring data Redis

    http://www.cnblogs.com/tankaixiong/p/3660075.html http://www.aboutyun.com/thread-20755-1-1.html

  2. java--补全诗句代码

    代码效果: 代码: import java.util.Scanner; /* 补全诗句 */ public class game1 { public static void main(String[] ...

  3. 如何写对kubernetes的模板文件

    kubernetes的模板配置文件随着版本更迭也会有相应的调整,正确配置模板关键字的方式是参考版本发布的doc,如下图 在docs\api-reference下面有不同功能的API目录,如下图 各个A ...

  4. Centos虚拟机克隆模板

    Centos6模板 IPTABLES/SELINUX # iptalbes -F # service iptables save 或 # /etc/init.d/iptables stop # chk ...

  5. ASP.NET MVC上传图片的奇怪问题

    本文来源于博客园-钱智慧,转载请注明出处 表现:客户说就华为的手机有问题,而且是在QQ里打开有问题,如果在手机的浏览器上,则可以正常上传图片. 有问题的代码如下: private ResultMode ...

  6. generator生成器iterator遍历器和yield

    generator方法()返回一个iterator 使用generator时永远先去调用generator()方法 for of对iterator的调用过程(babel参照) 1,_iterator. ...

  7. curl报35错误码

    一.curl常见schannel错误 schannel: SNI or certificate check failed: SEC_E_WRONG_PRINCIPAL<0x80090322> ...

  8. 笔记:Maven 仓库和插件配置本机私服

    通过配置POM中的配置仓库和插件仓库,只在当前项目生效,而实际应用中,我们希望通过一次配置就能让本机所有的Maven项目都使用自己的Maven私服,这个时候我们需要配置 settings.xml文件, ...

  9. 微信APP长按图片禁止保存到本地

    项目遇到一个问题,在web页面中,禁止长按图片保存, 使用css属性:  img { pointer-events: none; } 或者  img { -webkit-user-select: no ...

  10. Algorithm --> 求阶乘末尾0的个数

    求阶乘末尾0的个数 (1)给定一个整数N,那么N的阶乘N!末尾有多少个0?比如:N=10,N!=3628800,N!的末尾有2个0. (2)求N!的二进制表示中最低位为1的位置. 第一题 考虑哪些数相 ...