EasyUI中DataGrid取消選中後顏色恢復

項目中使用到了EasyUI的datagrid中，需要根據各種條件將datagrid中的行改變成不同的顏色。我們鼠標選中後顏色會變調，但是如果取消選中又會恢復到EasyUI默認的datagrid未選中的顏色，那怎麼樣才能讓取消選中恢復到之前根據條件設置的顏色呢。那就需要在選中前把顏色記錄下來，然後取消選中後再恢復顏色。

下面就是實現代碼，當加載成功後就會執行onLoadSuccess中方法，將符合條件的行進行顏色變化，同時將每行的顏色都記錄下來。當選中時則執行onSelect中方法，將顏色改爲選中的顏色。取消選中後執行onUnselectAll中方法又將剛纔記錄下來的顏色恢復

var selectRowIndex = undefined;//保存被選中的行的索引
var selectRowIndexColor = {};//用來保存行的背景色(因爲表格中可能有多個背景色)

$("#td").datagrid({
                //url:'',
                url: '@Url.Action("ListProjectJson")',
                fitColumns: true,
                fit: true,
                rownumber: true,
                pagination: true,
                singleSelect: true,
                pageSize: 30,
                sortName: 'doc_id',
                sortOrder:'desc',
                toolbar: "#toolbar",
                onLoadSuccess: function (data) {
                     var rows = $("#td").datagrid('getRows');
                      //記錄下每行的顏色 用於之後取消選中後恢復
                      for (var i = 0; i < rows.length; i++) {
                        var color = $("#datagrid-row-r1-2-" + i).css("background-color");
                        selectRowIndexColor[i] = color;
                    }
                },
                onBeforeSelect: function (rowIndex, rowData) {
                },
                //當行被選中的時候主動改變背景色和字體顏色
                onSelect: function (rowIndex, rowData) {
                    $("#datagrid-row-r1-2-" + rowIndex).css("background-color", "#0081c2").css("color", "black");
                },
                //當行被取消選擇的時候主動的改變背景色和字體顏色
                onUnselectAll: function (rows) {
                    for (var i = 0;i<rows.length;i++)
                    {
                        $("#datagrid-row-r1-2-" + i).css("background-color", selectRowIndexColor[i]).css("color", "black");
                    }
                },
                rowStyler: function (index, row) {
                    //Modify Sammy 修改未派工且軟件和設計有未結案顯示顏色
                    if ( row.jastatus != "Y") {
                        return 'background-color:#ffff00;color:#fff;font-weight:bold;';
                    }
                },
                columns:
                    [[
                        { title: '合同編號', field: 'contractid', width: 50 },
                        { title: '區', field: 'needarea', width: 50 },
                        { title: '部門', field: 'needdep', width: 50 },
                        { title: '需求人', field: 'needer', width: 25 },
                        { title: '專案名稱', field: 'pmname', width: 50 },
                        { title: '專案內容', field: 'pmcontent', width: 100 },
                        { title: '備註', field: 'pmremark', width: 50 },
                        //{ title: 'OPT名稱', field: 'kindsid', width: 100 },
                        { title: '預計開始', field: 'startdate',formatter:FormatDateTime, width: 50 },
                        { title: '預計結束', field: 'enddate', formatter: FormatDateTime, width: 50 },
                        //{ title: '專案進度', field: 'kindsid', width: 25 },
                        { title: '類型', field: 'pmkinds',formatter:Format, width: 25,hidden:true },
                        { title: '會辦', field: 'pmtype', width: 25,hidden:true },
                        //{ title: '狀態', field: 'pmstatus', width: 50 },
                        { title: '軟體', field: 'sstatus',formatter:Formata, width: 25 },
                        { title: '結案時間', field: 'sfdate', formatter: FormatDateTime, width: 50 },
                        { title: '設計', field: 'dstatus', formatter: Formata, width: 25 },
                        { title: '結案時間', field: 'dfdate', formatter: FormatDateTime, width: 50 },
                        { title: '派工', field: 'pgname', width: 50 },
                        { title: '專案編號', field: 'doc_id', width: 50 },
                    ]]
            });