淺談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,
        width: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事件里面我們操作了各元素的樣式，能找到具體元素，所有問題也就迎刃而解了，我們甚至可以做出跟精細的排版。