如何获取到easyui DataGrid GroupView 展开项的数据

SabrinaH2017 2017-12-14 08:01:03

如何获取到easyui DataGrid GroupView 展开项的数据
如图：

用什么方法可以只获取到展开项的数据

跪谢

...全文

447 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

SabrinaH2017 2017-12-18

打赏
举报

楼上真棒！正解，谢谢

SabrinaH2017 2017-12-18

打赏
举报

路上真棒，谢谢！

Hello World, 2017-12-16

打赏
举报

datagrid-groupview.js修改expandGroup方法：



    expandGroup: function (jq, groupIndex) {

        return jq.each(function () {

            var view = $.data(this, 'datagrid').dc.view;

            var group = view.find(groupIndex != undefined ? 'div.datagrid-group[group-index="' + groupIndex + '"]' : 'div.datagrid-group');

            var expander = group.find('span.datagrid-row-expander');

            if (expander.hasClass('datagrid-row-expand')) {

                expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse');

                group.next('table').show();

            }

            $(this).datagrid('fixRowHeight');

            if (typeof ($.data(this, 'datagrid').options.onExpand) == "function") {

                var rows = $(this).datagrid('getRows');

                var viewRows = group.next('table').find('tr.datagrid-row').find('.datagrid-cell:eq(0)').closest('tr').map(function () {

                    return rows[$(this).attr('datagrid-row-index')];

                }).get();

                //console.log(viewRows);

                $.data(this, 'datagrid').options.onExpand.call(this,viewRows);

            }

        });

    }

html:

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="keywords" content="jquery,ui,easy,easyui,web">

    <meta name="description" content="easyui help you build your web page easily!">

    <title>Group Rows in DataGrid - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="datagrid-groupview.js"></script>

</head>

<body>

    <h2>Group Rows in DataGrid</h2>

    <div class="demo-info" style="margin-bottom: 10px">

        <div class="demo-tip icon-tip"> </div>

        <div>This sample shows how to group rows via specified column.</div>

    </div>



    <table class="easyui-datagrid" title="Group Rows in DataGrid" style="width: 700px; height: 250px"

        data-options="

                singleSelect:true,

                collapsible:true,

                rownumbers:true,

                fitColumns:true,

                data:data,

                view:groupview,

                onExpand:onExpand,

                groupField:'productid',

                groupFormatter:function(value,rows){

                    return value + ' - ' + rows.length + ' Item(s)';

                }

            ">

        <thead>

            <tr>

                <th data-options="field:'itemid',width:80">Item ID</th>

                <th data-options="field:'productid',width:100">Product</th>

                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>

                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

                <th data-options="field:'attr1',width:250">Attribute</th>

                <th data-options="field:'status',width:60,align:'center'">Status</th>

            </tr>

        </thead>

    </table>

    <script type="text/javascript">

        var data = [

            { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },

            { "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },

            { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },

            { "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },

            { "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },

            { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },

            { "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },

            { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },

            { "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },

            { "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }

        ];

        function onExpand(rows) {

            console.log(rows);

            console.log(this);

        }

    </script>

</body>

</html>

SabrinaH2017 2017-12-15

打赏
举报

我想要获取‘数据表格分组’下的数据，是DataGrid GroupView

点击展开就可以获取到这个分组下的数据

Hello World, 2017-12-15

打赏
举报

datagrid-detailview.js里面有个getRowDetail，可以取得参考官网的：

$(function(){
            $('#dg').datagrid({
                view: detailview,
                detailFormatter:function(index,row){
                    return '<div class="ddv" style="padding:5px 0"></div>';
                },
                onExpandRow: function(index,row){
                    var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
                    ddv.panel({
                        height:80,
                        border:false,
                        cache:false,
                        href:'datagrid21_getdetail.php?itemid='+row.itemid,
                        onLoad:function(){
                            $('#dg').datagrid('fixDetailRowHeight',index);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight',index);
                }
            });
        });