背景：项目中使用easyui作为前端架子。datagrid默认是点击行就选中此行然后变色。
需求：点击行不让此行选中；只能通过点击复选框才能选中某一行。
解决思路：
1、写点击行函数function onClickRow(rowIndex,rowData){}
2、查询当前datagrid所有选中行。
3、遍历选中行。对比选中行索引和点击行的索引：如果点击行的索引在所有选中行中，则取消点击行的选中状态；如果不存在，则选中点击行。
代码：
<script type="text/javascript">
// 行点击事件
function rowClick(rowIndex,rowData){
var rows = $("#datagrid").datagrid('getSelections');
var tag = true;
// 判断是否刚刚选中
for(var i = 0;i<rows.length;i++){
// 所有选中行中存在刚刚点击的行 则取消选中
if($('#datagrid').datagrid('getRowIndex', rows[i])==rowIndex){
// 取消选中此行
$('#datagrid').datagrid('unselectRow',rowIndex);
tag = false;
break;
}
}
// 判断是否刚刚取消
if(tag){
$('#datagrid').datagrid('selectRow',rowIndex);
}
}
</script>
延伸：
在解决这个问题的时候看到js中Set对象的使用。如果使用Set对象，上面的代码则变成下面这样：
使用Set对象(此情景并不适用Set对象，为以后使用打下基础吧)
<script type="text/javascript">
// 行点击事件
function rowClick(rowIndex,rowData){
var rows = $("#datagrid").datagrid('getSelections');
var set = new Set();
// 判断是否刚刚选中
for(var i = 0;i<rows.length;i++){
var currentIndex = $('#datagrid').datagrid('getRowIndex',rows[i]);
set.add(currentIndex);
// 所有选中行中存在刚刚点击的行 则取消选中
if(currentIndex==rowIndex){
// 取消选中此行
$('#datagrid').datagrid('unselectRow',rowIndex);
}
}
// 判断是否刚刚取消
if(!set.has(rowIndex)){
$('#datagrid').datagrid('selectRow',rowIndex);
}
}
</script>