easyui嵌套datagrid 

用easyui设计datagrid嵌套，需要注意的地方
第二个datagrid的数据源：testData[index].arr
好了，上代码，相信大家都会看的明白的


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css"/>

    <script src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
   <!-- 这个是在线js文件-->
    <!--<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>-->
    <script type="text/javascript" src="js/detailview.js"></script>

    <script type="text/javascript">

        var testData=[
            {'itemid':11,'productid':'sss','arr':[{subname:'sds1d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':15,'productid':'sdds','arr':[{subname:'sds2d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':14,'productid':'sffss','arr':[{subname:'sds3d',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':13,'productid':'ssggs','arr':[{subname:'sd4sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]},
            {'itemid':12,'productid':'sshhs','arr':[{subname:'sd5sd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'},{subname:'sdsd',subsex:'sdsd'}]}
        ];

        $(function(){

            $("#dg").datagrid({
                title:'sdfsfs',
              /*  checkbox:true,*/
                data:testData ,
               view:detailview,
                detailFormatter:function(index,row){
                    return '<div style="padding: 2px;"><table class="ddv"></table></div>; '
                },
                onExpandRow:function(index,row){
                    var ddv=$(this).datagrid('getRowDetail',index).find('table.ddv');
                    ddv.datagrid({
                        data:testData[index].arr,
                        fitColumns:true,
                        checkbox:true,
                        singleSelect:true,
                        loadMsg:'',
                        height:'auto',
                        columns:[[
                            {field:'opt',checkbox:true,width:15},
                            {field:'subname','title':'Order ID',width:100},
                            {field:'subsex','title':'Quantity',width:100}

                        ]],
                        onResize:function(){
                            $("#dg").datagrid('fixDetailRowHeight',index);
                        },
                        onLoadSuccess:function(){
                            setTimeout(function(){
                                $("#dg").datagrid('fixDetailRowHeight',index);
                            },0);
                        }
                    });
                    $("#dg").datagrid('fixDetailRowHeight',index);
                }
            });

        });




    </script>

</head>
<body>
    <table id="dg" style="width: 700px;height: 450px; border: 1px solid red;">
        <thead>
            <tr>
                <th field="opt" checkbox="true" width="15px"></th>
                <th field="itemid" width="300">Item ID</th>
                <th field="productid" width="380">Product ID</th>
               <!-- <th field="listprice" width="80">List Price</th>
                <th field="unitcost" width="80">Unit Cost</th>
                <th field="attr1" width="80">Attribute</th>
                <th field="status" width="80">Status</th>-->
            </tr>
        </thead>
    </table>


</body>
</html>
posted @ 2015-01-29 22:47  JsonID  阅读(348)  评论(0)  编辑  收藏  举报