2021-07-02 jquery项目开发记录

3月中开始了jquery项目的迭代开发，大部分功能是基于jquery、bootstrap框架，其它有用到 jsmind思维导图组件、ztree树组件、pqgrid表格组件。总体来说，初级比较需要花时间去了解api及常用方法。

常用方法

• 扁平化数组转树形数据

var arr = [
	{id: 1, name:'1', pid: 0},
	{id: 2, name:'1', pid: 1},
	{id: 3, name:'1', pid: 1},
	{id: 4, name:'1', pid: 2},
	{id: 5, name:'1', pid: 3},
	{id: 6, name:'1', pid: 7},
]
// 不知道扁平数据的父级节点id时：
function ArrayToTree(_arr){
	let _pidList = _arr.filter(_each => !_arr.filter(_data => _each.pid == _data.id).length);
	_arr.forEach(_each =>{
		_each.children = _arr.filter(_data => _data.pid == _each.id)
	})
	return _arr.filter(_each => _pidList.filter(_data => _data.pid == _each.pid).length)
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719153235200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTE5NTg2Nw==,size_16,color_FFFFFF,t_70#pic_center)

// 已知道扁平数据的父级节点id时（如父级节点为0）：
function ArrayToTree(_arr){
	_arr.forEach(_each =>{
		_each.children = _arr.filter(_data => _data.pid == _each.id)
	})
	return _arr.filter(_each => _each.pid == 0)
}
//返回的数据
/*[
	id: 1
	name: "1"
	pid: 0
	children: [
		{id: 2, name: "1", pid: 1, children: [ {id: 4, name:'1', pid: 2} ]}
		{id: 3, name: "1", pid: 1, children: [ {id: 5, name:'1', pid: 3} ]}
	]
]*/

• 提交时获取表单所有值

$('#id').serializeArray()
// disabled属性的值获取不到，readonly属性的可以获取到

• 复选框所有值

$('.input[name="name"]:checked').each(function(){
	// 勾选框值：$(this).val();
})

• 复选框选中及切换

//效果比较好：
$('.input[value="1"]').prop("checked", true)
$('.input[value="1"]').prop("checked", false)
//取值：
$('input').is(":checked")
// 有时切换多次后取值无效、取值有误(不好用)
$('.input[value="1"]').attr("checked", true)
$('.input[value="1"]').removeAttr("checked")

常见问题

1. 数据共用/数组值被改变
   问题：数据处理时，数组或对象数据共用了地址，导致修改时、或多次用来赋值时，数据上不对。
   解决方案：深拷贝

// 1
newObj = JSON.parse(JSON.stringfy( obj ))
// 2 
// banArr 不拷贝的字段
function deepClone(obj, banArr){
	banArr = banArr || [];
	var target = Array.isArray(obj)? [] : {};
	for(let i in obj){
		if(!banArr.includes(key)){
			if(Object.prototype.hasOwnProperty.call(obj, key)){
				if(obj[key] && typeOf obj[key] == 'object'){
					target[key] =  deepClone(obj[key] ,banArr);
				}else{
					target[key] = obj[key];
				}
			}
		}
	}
	return target;
}

2. 深拷贝报错
   报错内容： Converting circular structure to JSON --> starting at object with construtor '相关字段 ’ — proterty ‘parent’ closes the circle at JSON.stringfy
   原因： 拷贝的数据内容太多，例如含了非常多的子数据如children项，或者带有标签里的element数据。
   解决方式： ① deepClone 拷贝，排除数据内容过多的字段。② 自行拷贝需要的字段数据