easyui datagrid获取隐藏列

本文最后更新于2020年09月26日，已超过1332天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

问题背景

在我们平时使用easyui的datagrid时，往往会将主键列（guid）进行隐藏，如下代码

$("#dg").datagrid('hideColumn', 'SK_ID');

对于隐藏的列，我们通过getSelected方法是无法获取到对应的值的，如下方法

var selectRow = $("#dg").datagrid('getSelected');

解决方法

其实解决方法很简单，只需要设置datagrid的idField属性即可，如下

<table id="dg" class="easyui-datagrid" data-options=" 
           singleSelect:true, 
           collasible:true, 
           idField:'SK_ID', 
           rownumbers:true, 
           iconCls:'icon-view', 
           pagination: true, 
           pageSize: 10, 
           pageList: [5, 10, 30], 
           toolbar:'#toolBar', 
           fit:true"  
           style="width:100%;height:100%;padding:20px">  
        <thead>  
            <tr style="height:32px">  
                <th data-options="field:'SK_ID',hiden:true">ID</th>  
                <th data-options=" 
                    field:'SK_Code', 
                    width:'20%', 
                    loadMsg: '数据加载中...', 
                    editor:{ 
                    type:'validatebox', 
                    options:{required:true, 
                    validType:'length[1,100]'} 
                    }">编号</th>  
                <th data-options=" 
                    field:'SK_Name', 
                    width:'30%', 
                    editor:{ 
                    type:'textbox' 
                    } 
                    ">名称</th>  
                <th data-options=" 
                    field:'SK_IsStop', 
                    width:'10%', 
                    formatter:function(value,row){ 
                    return value=='0'?'否':'是'; 
                    }, 
                    onAfterEdit:afterEditRow, 
                    editor:{ 
                    type:'combobox', 
                    options:{ 
                    data:yesOrNoJson, 
                    valueField:'id', 
                    textField:'strText'}}">是否停用</th>  
                <th data-options=" 
                    field:'SK_Note', 
                    width:'40%', 
                    editor:{ 
                    type:'textbox', 
                    options:{ 
                    multiline:true 
                    } 
                    } 
                    ">备注</th>  
            </tr>  
        </thead>  
    </table>

EasyUI

朗读