Easyui 自定义列 添加按钮 样式问题

Posted 2020-10-23 gonelw

　　开始想在easyui的datgrid中添加一列操作列，这一列的内容全部是按钮，方便显示详细信息。

　　添加完成之后，发现按钮的样式有问题，即使我把a标签的class属性和plain属性设置成和页面上一样，结果还是没有起作用。

开始的部分代码:

　　　　　　　onLoadSuccess:function(data){
            },
            idField:‘userId‘,
            columns:[[
                {field:‘ck‘,width:5,checkbox:true},
                {field:‘userId‘,title:‘用户id‘,width:50,hidden:true},
                {field:‘userName‘,title:‘用户名‘,width:50,align:‘center‘}, 
                {field:‘phoneNum‘,title:‘联系方式‘,width:50,align:‘center‘}, 
                {field:‘roleGroupName‘,title:‘角色‘,width:50,align:‘center‘}, 
                {field:‘areaCodesName‘,title:‘管理区域‘,width:50,align:‘center‘}, 
                {field:‘operation‘,title:‘操作‘,width:50,align:‘center‘,formatter:formatFunc}
            ]]    


function formatFunc(val,rowData,index){
    var str = JSON.stringify(rowData);
    return "<a  id=‘detailInfoBtn‘ class=‘easyui-linkbutton‘ plain=‘true‘ onclick=‘getDetail("+str+")‘>详细信息</a>";
}

 

　　后面改成了在OnLoadSucess的回调中，动态添加样式，解决了这个问题。

　　　　　　　onLoadSuccess:function(data){
                $(‘.detailInfoBtn‘).linkbutton({text:‘详细信息‘,plain:true,iconCls:‘icon-edit‘});
            },
            idField:‘userId‘,
            columns:[[
                {field:‘ck‘,width:5,checkbox:true},
                {field:‘userId‘,title:‘用户id‘,width:50,hidden:true},
                {field:‘userName‘,title:‘用户名‘,width:50,align:‘center‘}, 
                {field:‘phoneNum‘,title:‘联系方式‘,width:50,align:‘center‘}, 
                {field:‘roleGroupName‘,title:‘角色‘,width:50,align:‘center‘}, 
                {field:‘areaCodesName‘,title:‘管理区域‘,width:50,align:‘center‘}, 
                {field:‘operation‘,title:‘操作‘,width:50,align:‘center‘,formatter:function(val,rowData,index){
                    var str = JSON.stringify(rowData);
                    var btn = "<a class=‘detailInfoBtn‘ onclick=‘getDetail("+str+")‘>详细信息</a>";
                    return btn;
                }}
            ]]