1、form表单中的数据修改：
var param = $("#form").serializeArray();
//param的表现形式如下：param=({"name":"name", "value":"value"}...);
const index = param.findIndex(item => item.name ==="modifyname");
param[index] = Object.assign(param[index], {value:"new-value"});
则可以修改 param中 name为modifyname的数据值为“new-value”;
2、删除多余的字段
var param=$("#form").serializeArray();
$.each(param,function(index,item) {
if (item && item.name =="del-name") {
param.splice(index, 1);
return false;
}
});
3、多个form表单数据合并
var param = $("#form").serializeArray().concat( $("#form1").serializeArray());
var vparam = $("#form :visible")..serializeArray(); //仅获取可见form元素的值
4、form表单恢复时，隐藏的input数据恢复
$("#form input:hidden").val("");
5、在Boostrap的模态框中使用datetimepicker越界问题处理
一个页面中，如果模态框数据较多，整个模态框高度几乎达到页面底部，而且日期组件作为模态框底部元素的一部分，则会出现日期组件超过页面高度部分无法显示，此时需要设置模态框的container属性，设置如下：
//初始化日期插件属性
$('.form_datetime').datetimepicker({
container:"#ModalID .modal-content", //模态框
minView : "month", //选择日期后，不会再跳转去选择时分秒
format : 'yyyy-mm-dd',//设置日期格式
autoclose : true,//选择后自动关闭日期插件
});
6、bootstrap 报错：Uncaught RangeError: Maximum call stack size
bootstrap弹窗里面再弹窗，浏览器console报错：Uncaught RangeError: Maximum call stack size exceeded，导致页面上一些奇怪的错误。
这是bootstrap多层弹窗导致的。解决方案有两种：
a、注释了bootstrap.min.js的这一句代码即可。
enforceFocus:function(){
var t=this;
e(document).on("focusin.modal",function(e){
t.$element[0]!==e.target&&!t.$element.has(e.target).length/*多层弹窗死循环&&t.$element.focus()*/})
},
escape:function(){...}
b、是在页面js 里开始加上
$.fn.modal.Constructor.prototype.enforceFocus =function(){};
7、获取给定日期后的指定日期
//获取给定参数后的新日期字符串
function getNewDate(currDate, addYear, addMonth, addDay){
var date;
if (currDate) {//currDate:2000-01-01
date=new Date(Date.parse(currDate.replace(/-/g, "/")));
}else {
date =new Date();
}
if (addYear && addYear !=0) {
date.setFullYear(date.getFullYear()+addYear)
//N年前需要对日期+1或者减1
date.setDate(date.getDate()+(addYear>0 ? -1 :1));
}
if (addMonth && addMonth !=0) {
date.setMonth(date.getMonth()+addMonth);
//N月前需要对日期+1或者减1
date.setDate(date.getDate()+(addMonth>0 ? -1 :1));
}
if (addDay && addDay !=0) {
date.setDate(date.getDate()+addDay);
}
var year = date.getFullYear();
var month = (date.getMonth() +1) <10 ? ("0" + (date.getMonth() +1)) : (date.getMonth() +1);
var day = date.getDate() <10 ? ("0" + date.getDate()) : date.getDate();
//返回日期格式：2000-01-01
return year+'-'+month+'-'+day;
}
8、查找数组中是否包含某个值
a、includes: includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
b、indexOf: indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.indexOf() 方法对大小写敏感！
stringObject.indexOf(searchvalue,fromindex)
如果要检索的字符串值没有出现，则该方法返回 -1。
该方法主要用于查找子字符串
9、对于列表数据在非表格中展示，页面的处理方式：
页面数据展示如图
var rec = [{}, {}...]
rec.map(function (item, index) {
if (index >0) {
$("#divlistParent").append($("#divlistParent form:first").clone())
$("#divlistParent form:eq("+index+") table").attr("id", "table"+index); //如果复制的页面组件带有id，则会克隆出一个完全一样的id，造成后面的数据无法处理，故更改克隆后的id值。
}
$("#divlistParent form:eq("+index+")").find("[tp='det']").each(function (i, ele) {
var obj =$(ele);
var name = obj.attr('name');
if (obj[0].tagName =="INPUT") {
obj.val(item[name]);
}else {
obj.html(item[name]);
}
});
})
10、设置radio的选中
对于经常需要用到单选的地方，回显数据一定要使用prop，使用attr不会做互斥判断，直接添加选中，达不到单选需求。如下所示的单选组：
<div id="radioGroup">
<label class="radio-inline">
<input type="radio" name="sex" value="0" checked>男</label>
<label class="radio-inline">
<input type="radio" name="sex" value="1"> <span >女</label>
</div>
设置某个选项选中操作如下：
$("#radioGroup input:radio[name=sex][value="+1+"]").prop("checked",true); //此时会选中第二个单选项
11、判断一个对象是否为空
方法一：
var data = {};
var b = $.isEmptyObject(data);
alert(b);//true
方法二：
ar data = {};
var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0);//true
12、select下拉框不显示滚动条
<select onmousedown="{this.size=this.options.length}" onblur="this.size=0" onchange="this.size=0" style="position:absolute;z-index:1000;"></select>
添加style是为了保证弹出框的位置显示。不增加style会导致select显示在下层被遮挡住
13、验证至多带2位小数的数字
var reg =/^[0-9]+(.[0-9]{1,2}){0,1}$/;
if (!reg.test(gets)) {
return false;
}
return true
网友评论