easyUI 点击行文本，实现单选；点击复选框，实现复选；

来源：互联网发布：音乐改编软件手机编辑：程序博客网时间：2024/06/06 00:43

如题，在项目开发中要求easyUI中的datagrid的选中事件，做成：点击行文本时，实现单选效果；点击复选框时，实现复选效果；

主要JS CODE

//初始化列表   $('#dataTableDetail').datagrid({   iconCls:'icon-tip',   rownumbers:true,   pagination:true,   fit:true,   border:false,   striped:true,   singleSelect : false,   sortable:true,   pagePosition:'bottom',   pageSize : 25,            pageList : [25,50,100,250],   method : 'post',idField : 'ID',frozenColumns:[[{field:'ck',checkbox:true,frozen:true,width:10}]],columns:[[ {field:'ID',title:'ID',align:'left',width:60,hidden:true},  .......]],toolbar : [{id : 'printer',text : '删除',iconCls : 'icon-printer',handler : function() {deletePage();}},{id : 'batchDownLoad',text : '批量下载',iconCls : 'icon-printer',handler : function() {batchDownLoad();}}],onClickRow:function(rowIndex,rowData){$(this).datagrid('unselectAll');$(this).datagrid('selectRow',rowIndex);},onLoadSuccess : function(data) {//一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题$('#dataTableDetail').datagrid('clearSelections'); }});         });

说明：通过属性配置及点击行事件来控制。

singleSelect : false ，允许多行选择。
onClickRow:function(rowIndex,rowData){
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow',rowIndex);
}
$(this).datagrid('unselectAll'); 取消datagrid的所有行选中。
$(this).datagrid('selectRow',rowIndex); 选中当前点击的文本行。

0 0