浅谈jQuery easyui datagrid操作单元格样式

　　今天项目上遇到问题，就是表格风格统一的问题，由于用了2个不同的框架，所以如果要大修比较麻烦，考虑到修改表格样式工作量会少很多，所以考虑修改jQuery easyui datagrid数据网格的样式。

　　对于这种问题，我们应该也经常遇到。其实利用jQuery的强大选择器，要操作到每个单元格都很容易，所以解决这个问题的思路也很简单，在数据加载完以后(这时候内容单元格才形成)，我们查找具体的列或者单元格，然后定义每个单元格的样式，所以定义一下各属性和onLoadSuccess事件就可以了：

function showResultInfo(obj){
    $.messager.show({
        title:'详细信息',
        msg:'<form id="info_from" method="post" target="info_from"></form><div><table id="infoElement_table"></table></div>',
        showType:'fade',
        showSpeed:100,
        590,
        height:440,
        timeout:0,
        style:{
            right:'',
            bottom:''
        }
    });
    $("#infoElement_table").datagrid({
        striped : true,
        width : 590,
        height : 440,
        toolbar: ["-",{
            iconCls: 'icon-redo',
            text: '导出结果',
            handler: function(){
                $("#info_from").attr("action",'user/userAction_exportResult.do');
                $("#info_from").submit();
            }
        },"-"],
        collapsible : true,
        autoRowHeight : false,
        columns : [ [
                {
                    field : 'name',
                    title : '姓名',
                    align : 'center',
                    width : 80
                },{
                    field : 'org',
                    title : '组织机构',
                    align : 'center',
                    width : 252
                },
                {
                    field : 'msg',
                    title : '信息',
                    align : 'center',
                    width : 205
                }
                ] ],
        pagination : false,
        rownumbers : true,
        fitColumns : false,
        onHeaderContextMenu : function(e, field) {
            headerContextMenu(e, field);
        },
        onLoadSuccess: function(){   
               $(".datagrid-view td").css("border","0px");
               $(".datagrid-view2 td").css("border-left","1px dashed #ccc");
               $(".datagrid-view1").find("tr:last").css("border-bottom","1px solid #ccc");
               $(".datagrid-view2").find("tr:last").css("border-bottom","1px solid #ccc");
               $(".datagrid-toolbar a").css({"background":"#02665a","color":"#fff"});
               $(".messager-body").css({"border":"0px","padding":"0px"});
        }
    });
    
    $("#infoElement_table").datagrid("loadData",obj);
}

　　onLoadSuccess事件里面我们操作了各元素的样式，能找到具体元素，所有问题也就迎刃而解了，我们甚至可以做出跟精细的排版。