表格SHIFT多选

2013-09-29 06:06:37 355 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

gz5182009 墨衍会员 · AI 创作全网分发关注 + 加入社区

vxe-table vue 表格复选框多选数据，实现快捷键 Shift 批量选择功能 Vxe-table Vue表格组件实现Shift键批量选择功能。通过设置checkboxConfig.isShiftKey: true启用该特性，用户可按住Shift键配合鼠标点击批量选取多行数据。表格配置包含边框、行高亮、复选框列及多列数据展示。组件支持响应式调整列宽，数据源包含13条示例记录。此功能提升了大批量数据操作的效率，适用于需要频繁多选的操作场景。具体实现代码简洁，只需在Vxe-grid组件中配置相关参数即可。阅读详情

我现在有一个自己做的控件

由于checkbox太多我想实现按住Shift多选的效果，请高手解答。注：现在我创建的checkbox每个id不容易获取。

...全文

vxe-table vue 表格多选进阶：利用Shift键实现高效跨行批量操作本文详细介绍了如何在Vue项目中使用vxe-table的Shift键多选功能，实现高效跨行批量操作。通过配置`checkbox-config.isShiftKey`，用户可像操作文件一样快速选择表格数据区间，极大提升后台管理、数据报表等场景的操作效率。文章还涵盖了性能优化、避坑指南及移动端适配方案。阅读详情

gz5182009

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

scscms太阳光 2013-10-01

打赏
举报

楼主应该把你的html代码放出来,感觉这并非是在table里布局。如果是在div里给定一个class是可以实现多选的。

我的波塞冬 2013-10-01

打赏
举报

override getChecked()

Null_Reference 2013-09-30

打赏
举报

复选框不就是多选了么？ id不容易获取！命名很重要！

fzfei2 2013-09-30

打赏
举报

引用 6 楼 gz5182009 的回复:

还一个问题，如果我创建的checkbox的id值不确定，能不能用获取点击行列的方式，不使用定义id的方式来实现

改成了以行为单位来选, 和checkbox 的ID没关系

 
<table  id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
   <tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
	var tb=document.getElementById('tb1');
	function add(rowCount){
		 var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
		 for(var i=0;i<rowCount;i++){
		 	  var r=tb.insertRow(-1);
		 		for(var j=0;j<cs;j++){
		 			r.insertCell(-1).appendChild( cEl('input',{type:'checkbox',value:ii,id: 'ch'+ ii++  }  )  );
		 		}
		 }
	}
	function cEl(tag,attrs){
		var el=document.createElement(tag);
		for(var k in attrs) el[k]=attrs[k]
 		return el
	}
	add(10);//生成测试数据 
/////////////////////////////////////////
function getP(el,td){
	while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
	return el;
}

var actCh,
	chs=tb.getElementsByTagName('input'),L=chs.length;
while(L--)chs[L].i=L;
tb.onclick=function(evt){
	evt=window.event||evt;
	var el=evt.srcElement||evt.target;
	var ch=getP(el,'tr');  

	if(actCh &&  evt.shiftKey ) selChs(ch)
 
  actCh&&(actCh.bgColor='#ffffff');
  ch.bgColor='#eaeaff';
	actCh=ch;

}
function selChs(ch){
  var rs=[actCh,ch].sort(function(a,b){ return a.rowIndex-b.rowIndex})
  var idx=rs[0].getElementsByTagName('input')[0].i,
      L=(rs[1].rowIndex-rs[0].rowIndex+1)*rs[0].cells.length;
  while(L--)  chs[L+idx].checked= !chs[L+idx].checked;
}
</script>

conanhhy 2013-09-30

打赏
举报


function SelectRow(selectObj) {
    var row = $(selectObj).parent().parent(); // 找到TR
    var find = false;
    $(row).find(":checkbox").each(function() {
        if (find) {
            $(this).prop("checked", true);
        } else {
            // 通过值比较找到当前的选中框，并选中当前行当前选中框之后的选中框
            if ($(this).val() == $(selectObj).val()) {
                find = true;
            }
        }
    });
}

gz5182009 2013-09-30

打赏
举报

引用 2 楼 fzfei2 的回复:


<table  id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
   <tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
	var tb=document.getElementById('tb1');
	function add(rowCount){
		 var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
		 for(var i=0;i<rowCount;i++){
		 	  var r=tb.insertRow(-1);
		 		for(var j=0;j<cs;j++){
		 			r.insertCell(-1).appendChild( cEl('input',{type:'checkbox', i:ii,value:ii,id: 'ch'+ ii++  }  )  );
		 		}
		 }
	}
	function cEl(tag,attrs){
		var el=document.createElement(tag);
		for(var k in attrs) el[k]=attrs[k]
 		return el
	}
	add(10);//生成测试数据 
/////////////////////////////////////////
function getP(el,td){
	while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
	return el;
}

var actCh,
	chs=tb.getElementsByTagName('input');
tb.onclick=function(evt){
	evt=window.event||evt;
	var el=evt.srcElement||evt.target;
	var ch=getP(el,'td').getElementsByTagName('input')[0];

	if(actCh &&  evt.shiftKey ) selChs(ch)
 
  actCh&&(actCh.parentNode.bgColor='#ffffff');
  ch.parentNode.bgColor='#fafaff';
	actCh=ch;

}
function selChs(ch){
  var cs=[actCh,ch].sort(function(a,b){ return a.i-b.i})
	for(var i=cs[0].i;i<=cs[1].i;i++) chs[i].checked= !chs[i].checked;
}
</script>

还一个问题，如果我创建的checkbox的id值不确定，能不能用获取点击行列的方式，不使用定义id的方式来实现

gz5182009 2013-09-30

打赏
举报

引用 2 楼 fzfei2 的回复:


<table  id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
   <tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
	var tb=document.getElementById('tb1');
	function add(rowCount){
		 var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
		 for(var i=0;i<rowCount;i++){
		 	  var r=tb.insertRow(-1);
		 		for(var j=0;j<cs;j++){
		 			r.insertCell(-1).appendChild( cEl('input',{type:'checkbox', i:ii,value:ii,id: 'ch'+ ii++  }  )  );
		 		}
		 }
	}
	function cEl(tag,attrs){
		var el=document.createElement(tag);
		for(var k in attrs) el[k]=attrs[k]
 		return el
	}
	add(10);//生成测试数据 
/////////////////////////////////////////
function getP(el,td){
	while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
	return el;
}

var actCh,
	chs=tb.getElementsByTagName('input');
tb.onclick=function(evt){
	evt=window.event||evt;
	var el=evt.srcElement||evt.target;
	var ch=getP(el,'td').getElementsByTagName('input')[0];

	if(actCh &&  evt.shiftKey ) selChs(ch)
 
  actCh&&(actCh.parentNode.bgColor='#ffffff');
  ch.parentNode.bgColor='#fafaff';
	actCh=ch;

}
function selChs(ch){
  var cs=[actCh,ch].sort(function(a,b){ return a.i-b.i})
	for(var i=cs[0].i;i<=cs[1].i;i++) chs[i].checked= !chs[i].checked;
}
</script>

您的这个效果能不能把第一个跟最后一个也选择上啊？而且能不能只选择一行，不允许跨行的

tcmakebest 2013-09-29

打赏
举报

这种想法很有创意，但是无法实现，楼主可以换个思路，放个【全选】按钮，在内部再进行自动选中就好了。可以用行全选，或者列全选的方式

fzfei2 2013-09-29

打赏
举报


<table  id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
   <tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
	var tb=document.getElementById('tb1');
	function add(rowCount){
		 var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
		 for(var i=0;i<rowCount;i++){
		 	  var r=tb.insertRow(-1);
		 		for(var j=0;j<cs;j++){
		 			r.insertCell(-1).appendChild( cEl('input',{type:'checkbox', i:ii,value:ii,id: 'ch'+ ii++  }  )  );
		 		}
		 }
	}
	function cEl(tag,attrs){
		var el=document.createElement(tag);
		for(var k in attrs) el[k]=attrs[k]
 		return el
	}
	add(10);//生成测试数据 
/////////////////////////////////////////
function getP(el,td){
	while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
	return el;
}

var actCh,
	chs=tb.getElementsByTagName('input');
tb.onclick=function(evt){
	evt=window.event||evt;
	var el=evt.srcElement||evt.target;
	var ch=getP(el,'td').getElementsByTagName('input')[0];

	if(actCh &&  evt.shiftKey ) selChs(ch)
 
  actCh&&(actCh.parentNode.bgColor='#ffffff');
  ch.parentNode.bgColor='#fafaff';
	actCh=ch;

}
function selChs(ch){
  var cs=[actCh,ch].sort(function(a,b){ return a.i-b.i})
	for(var i=cs[0].i;i<=cs[1].i;i++) chs[i].checked= !chs[i].checked;
}
</script>

KK3K2005 2013-09-29

打赏
举报

每列给个和列数字有关的样式比如 col1 col2 每行给个和行数字有关的样式比如 row1 row2 这样的话你可以方便定位所有的

表格SHIFT多选

相关推荐