用easyui作datagrid表格

關於easyui，以前只是據說過了解一點點，到這邊上班以後發現他們用的極多，而後做爲新人被安排的一些簡單的任務裏也有用到它的。沒辦法，硬着頭皮上吧，一邊對着官網上的demo，一邊對着手冊，一邊摸索着作唄。首先看效果圖

相關代碼以下（只摘的部分供參考，不能運行的）：

 $('#tt').datagrid({
                nowrap: false,
                striped: true,
                remoteSort: false,
                singleSelect: true,
                fitColumns: true,
                pageSize: 25,
                pageList: [25, 35, 45, 55],
                title: "商家信息",
                toolbar: '#toors',
                loadMsg: '加載中...',
                //                onDblClickRow: function (rowIndex, rowData) {

                //                    getsub(rowIndex, rowData, callback);
                //                    var ExpandRow = $("#ExpandRow").val();
                //                    if (ExpandRow != '') {
                //                        $('#tt').datagrid("expandRow", ExpandRow);
                //                    }
                //                    $("#ExpandRow").val(rowIndex); ;
                //                },
                url: '../ashx/SellerManager.ashx?type=GetSellerList&se_property=0',
                columns: [[
                { field: 'SE_NAME', title: '商家名稱', width: $(this).width() * 0.13, formatter: function (value, row, index) {
                    return "<a href='http://seller.jukelai.cn/AStation/?suname=" + row.USERNAME + "&supwd=" + row.UPASSWORD + "' target='_blank'>" + row.SE_NAME + "</a>";
                }
                },
                { field: 'USERNAME', title: '用戶名', width: $(this).width() * 0.1 },
                { field: 'SE_TYPE', title: '商家類型', width: $(this).width() * 0.1 },
                { field: 'PROVINCES', title: '所在地', width: $(this).width() * 0.1, formatter: function (value, row, index) {
                    return row.PROVINCES + '-' + row.CITY + "-" + row.COUNTY;
                }
                },
                { field: 'SE_CONTACT', title: '聯繫人', width: $(this).width() * 0.1 },
                { field: 'SE_PHONE', title: '聯繫電話', width: $(this).width() * 0.1 },
                { field: 'SE_EQUIPMENTCOUNT', title: '設備數量', width: $(this).width() * 0.1 },
                { field: 'SE_URL', title: '網址', width: $(this).width() * 0.1 },
                { field: 'SE_BUSINESSAREA', title: '營業面積', width: $(this).width() * 0.1 },
                { field: 'SE_PROPERTY', title: '性質', width: $(this).width() * 0.1, formatter: function (value, row, index) {

                    if (row.SE_PROPERTY == 0) {
                        return '總店';
                    }
                    else {
                        return '分店';
                    }
                }
                }
                ]],
                onClickRow: function (rowIndex, rowData) {
                    if (childbody != null) {
                        childbody.datagrid('unselectAll');
                    }
                },
                pagination: true,
                onLoadSuccess: function (data) {
                    if (data.total == 0) {
                        console.info('進入無數據');
                        var body = $(this).data().datagrid.dc.body2;
                        console.info("body:%f", body);
                        body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center; color:Red">抱歉，沒有查詢到數據</td></tr>');
                    }
                }
            });
            var ExpandRow = null;
            $('#tt').datagrid({
                view: detailview,
                detailFormatter: function (index, row) {
                    return '<div style="padding:3px" id="ddv-"' + index + '><table class="ddv"></table></div>';
                },
                onExpandRow: function (index, row) {

                    getsub(index, row, callback);
                    collapserow(index);
                    
                    //$('#tt').datagrid('reload');
                }
            });
            function collapserow(index) {
                ExpandRow = $("#ExpandRow").val();
                if (ExpandRow != '' && ExpandRow != index) {
                    $('#tt').datagrid("collapseRow", ExpandRow);
                }
                if (ExpandRow == index) {
                    $('#tt').datagrid("expandRow", index);
                }
                $("#ExpandRow").val(index);
            }
            
            function callback(gridbody) { //拿到子級對象
                if (gridbody != null) {
                    childbody = gridbody;
                }
            }

            function getsub(index, row, callback) {
                ddv = $('#tt').datagrid('getRowDetail', index).find('table.ddv');
                var tt = $('#tt');
                var cc = row.SE_ID;
                ddv.datagrid({
                    url: '../ashx/SellerManager.ashx?type=GetSellerList&se_property=1&se_parentid=' + cc,
                    nowrap: false,
                    striped: true,
                    remoteSort: false,
                    singleSelect: true,
                    fitColumns: true,
                    singleSelect: true,
                    rownumbers: true,
                    loadMsg: '加載中...',
                    height: 'auto',

                    onClickRow: function (rowIndex, rowData) {
                        $('#tt').datagrid('unselectAll');
                        ddv.datagrid('unselectAll');
                        $(this).datagrid('selectRow', rowIndex);
                    },
                    columns: [[
                        { field: 'SE_NAME', title: '商家名稱', formatter: function (value, row, index) {
                            return "<a href='http://seller.jukelai.cn/AStation/?suname=" + row.USERNAME + "&supwd=" + row.UPASSWORD + "' target='_blank'>" + row.SE_NAME + "</a>";
                        }
                        },
                        { field: 'USERNAME', title: '用戶名' },
                        { field: 'SE_TYPE', title: '商家類型' },
                        { field: 'PROVINCES', title: '所在地', formatter: function (value, row, index) {
                            return row.PROVINCES + '-' + row.CITY + "-" + row.COUNTY;
                        }
                        },
                        { field: 'SE_CONTACT', title: '聯繫人' },
                        { field: 'SE_PHONE', title: '聯繫電話' },
                        { field: 'SE_EQUIPMENTCOUNT', title: '設備數量' },
                        { field: 'SE_URL', title: '網址' },
                        { field: 'SE_BUSINESSAREA', title: '營業面積' },
                        { field: 'SE_PROPERTY', title: '性質', formatter: function (value, row, index) {

                            if (row.SE_PROPERTY == 0) {
                                return '總店';
                            }
                            else {
                                return '分店';
                            }
                        }
                        }
                        ]],
                    onResize: function () {
                        $('#tt').datagrid('fixDetailRowHeight', index);
                    },
                    onLoadSuccess: function (data) {
                        setTimeout(function () {
                            $('#tt').datagrid('fixDetailRowHeight', index);
                        }, 0);

                        if (data.total == 0) {
                            //console.info('進入無數據');
                            var body = $(this).data().datagrid.dc.body2;
                            //console.info("body:%f", body);
                            body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center; color:Red">抱歉，沒有查詢到數據</td></tr>');
                        }

                    }
                });
                callback(ddv);
            }

 

需注意的地方:

1,子層是異步加載的，在子層加載的時候，第一次點擊展開一個表的時候會把下面的內容擠下去，第二次點開的時候就行了。如圖：

解決辦法：在異步加載的onLoadSuccess里加 上下面幾行代碼就能夠了，若是不寫settimeout,直接寫函數裏面的那一行代碼卻不行，到最後也沒搞明白爲何要這樣寫，若是有誰懂的，請賜教。

setTimeout(function () {
         $('#tt').datagrid('fixDetailRowHeight', index);
}, 0);

2，需求是無論是父層仍是子層，每次只能選中一條信息，可是實際操做中發現父層和子層能夠同時選中，這樣的話對數據的操做（編輯、刪除）就容易混淆，由於同時選中不少條，你就不知道當你點了刪除按鈕它會刪除哪一條。

解決辦法：在兩層表格中都加上一個點擊行事件（onClickRow），在點擊父層的時候讓子層的狀態改成‘unselectAll’，即取消選擇全部行。如圖：

3，在2的基礎上發現另一個問題，在父層點擊行的時候會報錯，提示對象爲null，可是alert時倒是object，研究了很長時間都找不到答案，最後請教了個人老師，他的一句話讓我茅塞頓開。他說：要在回調函數裏去拿第二層，也就是要異步的回來以後再調用一個函數去拿，不然代碼當即執行，異步的尚未回來固然是空了，alert是停頓的，因此不是null 。

解決辦法：定義一個全局變量，而後寫一個回調函數，在異步加載的時候把對象傳到回調函數裏，再賦值給那個全局變量

這裏getsub這個函數是異步加載第二層的那一塊，我把它抽出來作成一個函數了，callback就是那個回調函數，gridbody是getsub裏拿到的第二層的對象，childbody是全局變量，這樣在父層裏直接用childbody就能夠控制子層了。

4，想把它作成展開一行的時候其他的都摺疊的效果，百度了一下，發現有大神給出以下代碼：　　

$("#ExpandRow")是一個隱藏域，用來記錄你上一次展開的那一行的ID，可是這樣寫有一個漏洞，就是當你展開一次以後關閉，而後再點就展不開了。由於這段代碼裏是把當前行的狀態改成‘collapseRow’，也就是摺疊，當你再點的時候它的狀態仍是摺疊，因此就展不開了。

解決辦法：研究了一下，發現將這段代碼稍稍改造一下就能夠了。以下代碼，又加了一個判斷，若是點擊的還是當前行，就把該行的狀態改成展開，OK了。

這是本人第一次用博客記錄本身在工做中的學習心得，方便本身也方便你們，若是有疑問可留言討論。