2013年10月22日 星期二

ASP.NET MVC 使用 jQuery EasyUI DataGrid - 顯示 Details(Sub DataGrid)

上一篇「ASP.NET MVC 使用 jQuery EasyUI DataGrid - 顯示 Details(使用 PartialView)」我們已經完成使用 Partial View 以及 jQuery EasyUI DataGrid DetailView 的方式來顯示 Master-Details 的操作,不過使用 Partial View 雖然也可以回傳 Table 格式的內容,但最好的方式還是使用一致的 UI 顯示模式會比較好,所以這邊我們就將原本在 Expand Row 顯示 Partial View 內容給改為使用 DataGrid 的方式來顯示 Details 資料。

 


參考範例:jQuery EasyUI DataGrid >Toturial > Create subgrid with master datagrid

image

顯示 Sub DataGrid 的作法其實就是在 Expand Row 裡再去顯示另一個 DataGrid,同樣也是要使用 datagrid-detailview.js 這個擴充的 javascript 檔案,而後端的程式回傳給前端的內容就不是 Partial View 而是 JSON 資料。

 

這一次先來建立後端 Controller 的程式,這一次是要將資料內容以 JSON 格式傳遞給前端,

image

 

再來就是前端的部份,有別於上一篇所使用的 Panel,這一次就是使用 DataGrid,

image

$(function() {
    $('#DataGrid').datagrid({
        title: 'Northwind - Category',
        url: '@Url.Action("GetGridJSON", "Category")',
        width: '800',
        height: '600',
        rownumbers: true,
        fitColumns: true,
        columns: [[
            { field: 'CategoryID', title: 'ID' },
            { field: 'CategoryName', title: 'Name' },
            { field: 'Description', title: 'Description', width: 600 }
        ]],
        view: detailview,
        detailFormatter: function (index, row) {
            return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
        },
        onExpandRow: function (index, row) {
            $('#ddv-' + index).datagrid({
                url: '@Url.Action("GetJsonByCategory", "Product", new { categoryId = "_id_" })'
                    .replace("_id_", row.CategoryID),
                fitColumns: true,
                singleSelect: true,
                rownumbers: true,
                loadMsg: '',
                height: 'auto',
                columns: [[
                    { field: 'CategoryID', title: 'CategoryID' },
                    { field: 'ProductID', title: 'ProductID' },
                    { field: 'ProductName', title: 'Name' },
                    { field: 'QuantityPerUnit', title: 'Quantity Per Unit' },
                    { field: 'UnitPrice', title: 'Unit Price' },
                    { field: 'UnitsInStock', title: 'Units In Stock' },
                    { field: 'UnitsOnOrder', title: 'Units On Order' }
                ]],
                onResize: function () {
                    $('#DataGrid').datagrid('fixDetailRowHeight', index);
                },
                onLoadSuccess: function () {
                    setTimeout(function () {
                        $('#DataGrid').datagrid('fixDetailRowHeight', index);
                    }, 0);
                }
            });
            $('#DataGrid').datagrid('fixDetailRowHeight', index);
        }
    });
});

 

執行結果:

jquery_easyui_datagrid_20131022_01

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言