三栏穿梭单
纯html编写的三栏穿梭单
支持全选功能
类比于layUi Vue里的 两栏穿梭单
源码
/*
- 初始化
- */
KaTeX parse error: Expected '}', got 'EOF' at end of input: …heckbox" value={dataList[Number(i)].value} label=" {dataList[Number(i)].label}
`
}
$(".left")[0].innerHTML+=html;
document.getElementsByName(“left”).addEventListener(“click”, auditBtnStatus());
});
/*
- 全选按钮
- */
function chooseAll(name) {
/判断当前全选按钮是否选择/
let flag=document.getElementsByName(name+“All”)[0].checked
/将所有子按钮至为同状态/
let obj =document.getElementsByName(name);
for(let k in obj){
obj[k].checked=flag
}
auditBtnStatus(flag,name);
}
/*
-
移动按钮状态
-
*/
function auditBtnStatus() {
debugger// let ele=$("."+name+"-move .btn")
// ele[index].disabled=!flag
// if(flag){
// ele[index].className=ele[index].className.replace(“btn-disabled”,"")
// ele[index].classList.add(“isActive”)
// }else{
// ele[index].className=ele[index].className.replace(“isActive”,"")
// ele[index].classList.add(“btn-disabled”)
// }
}
/*
-
移动按钮点击
-
将before移动到after上
-
*/
function chooseMoveBtn(before,after) {/获取before上所有已经点击的按钮/
let obj =document.getElementsByName(before);
let html=’’
let label=’’
let baseHtml=’’
obj.forEach((item)=>{
label=getLabelFromInput(item.outerHTML)
if(item.checked){
html+=<div class="title"> <input type="checkbox" value=${item.value} label=${label} name=${after} onclick="chooseBtn(this,'${after}')"> <div class="label">${label}</div> </div>
}else{
baseHtml+=<div class="title">${item.outerHTML}<div class="label">${label}</div></div>
}
})
$("."+after)[0].innerHTML+=html
/删除 原始目录的html/
("."+before)[0].firstElementChild.outerHTML+baseHtml
}
/*
-
按钮单单选
-
*/
function chooseBtn(e,name){/获取所有按钮状态/
let obj =document.getElementsByName(name);
document.getElementsByName(name+“All”)[0].checked=true
obj.forEach((item)=>{
if(!item.checked){
document.getElementsByName(name+“All”)[0].checked=false
}else{
//高亮移动框
auditBtnStatus(true,name)
}
})
}
/*
- 获取input label值
- text:labtl的html
- */ function getLabelFromInput(text) { return text.split(“label=”)[1].split(""")[1] }