easyui父子table

本人博客全部迁至个人博客，柒情博客：http://www.ityw.club ，后续所有博客将在柒情博客上进行更新。

前阵子正好有个这样的需求，需要做一个父子table

酱紫的

开始选择了ligerui,最后效果出来后却有一个bug，刷新两次，内容就加载没了，作为一个刚入门的后端狗，没办法，之后转换阵营，用了easyui，这里记录下来，方便自己以后使用

html

<table id="maingrid" data-options="fit:true"></table>

js

/**
 * 父子table
 */
$(function () {
    var dg = $("#maingrid");
    dg.datagrid({
        url: '<%=basePath%>shopPersonnelManagement/findApplicationRecord.do',
        fit: false,  //  自动大小
        idField: 'order_id',
        fitColumns: true,
        pagination: true, // 是否分页
        /*rownumbers: true,*/ // 显示行数
        singleSelect: true, // 单选
        sortName: 'apply_date',
        sortOrder: 'desc',
        collapsible: false,
        remoteSort : false,
        queryParams: $('#Form').serializeArray(),
        emptyMsg: '未找到数据',
        scrollbarSize: 0,
        pageSize: 10,
        border: false,
        width: '80%',
        onSortColumn : function(sort,order) {
        },
            columns: [[{
            field: 'apply_date',
            title: '申请时间',
            width: "16.5%",
            align: 'center',
            sortable : true,
            formatter: function (value) {
                if (typeof value == "undefined") {
                    return "";
                } else {
                    return "<span title='" + value + "'>" + value + "</span>";
                }
            }
        }, {
            field: 'brand',
            title: '品牌',
            width: "8%",
            align: 'center',
            formatter: function (value) {
                if (typeof value == "undefined" ) {
                    return "";
                } else {
                    return "<span title='" + value + "'>" + value + "</span>";
                }
            }
        }, {
            field: 'applicant',
            title: '申请人',
            width: "8%",
            align: 'center',
            formatter: function (value) {
                if (typeof value == "undefined") {
                    return "";
                } else {
                    return "<span title='" + value + "'>" + value + "</span>";
                }
            }
        }, {
            field: 'plan_change_date',
            title: '计划变更时间',
            width: "17%",
            align: 'center',
                sortable : true,
            formatter: function (value) {
                if (typeof value == "undefined") {
                    return "";
                } else {
                    return "<span title='" + value + "'>" + value + "</span>";
                }
            }
        }, {
            field: 'demand_posts',
            title: '需求岗位',
            width: "18%",
            align: 'center',
            formatter: function (value) {
                if (typeof value == "undefined") {
                    return "";
                } else {
                    return "<span title='" + value + "'>" + value + "</span>";
                }
            }
        }, {
            field: 'apply_num',
            title: '需求人数',
            width: "10%",
            align: 'center',
            formatter: function (value) {
                if (typeof value == "undefined") {
                    return "";
                } else {
                    return "<span title='" + value + "'>" + value + "</span>";
                }
            }
        }, {
            field: 'status',
            title: '审核状态',
            width: "11%",
            align: 'center',
            formatter: function (value) {
                if (typeof value == "undefined") {
                    return "";
                } else {
                    if(value==1){
                        return "<span title='待审核' style='color: #CDA869'>待审核</span>";
                    }
                    if(value==2){
                        return "<span title='已审核' style='color: #00B83F'>已审核</span>";
                    }
                    if(value==3){
                        return "<span title='已否决' style='color: #E4564F'>已否决</span>";
                    }
                }
            }
        },{
            field: 'qx',
            title: '操作',
            width: "10%",
            align: 'center',
            formatter: function (value, row, index) {
                if(value==1&&row.status==1){
                    return "<a href=' javascript:void(0)' data-id='"+row.id+"' class='ctr-delete' onclick='up(this);'>审批</a>";
                }
                if(value==1&&row.status!=1){
                    return "<a href=' javascript:void(0)' data-id='"+row.id+"' class='ctr-delete' onclick='up(this);'>查看</a>";
                }
                if(value==0&&row.status==1){
                    var look="<a href='javascript:void(0)' data-id='"+row.id+"' class='ctr-delete' onclick='up(this);'>编辑</a>";
                    var deletes="<a href='javascript:void(0)' data-id='"+row.id+"' class='ctr-delete' onclick='de(this);'>删除</a>";
                    return look+"  "+deletes;
                }
                if(value==0&&row.status==2){
                    var look="<a href=' javascript:void(0)' data-id='"+row.id+"' class='ctr-delete' onclick='up(this);'>查看</a>";
                    return look;
                }
                if(value==0&&row.status==3){
                    var look="<a href=' javascript:void(0)' data-id='"+row.id+"' class='ctr-delete' onclick='up(this);'>编辑</a>";
                    return look;
                }

            }
        }

        ]],
        toolbar: '#tb',
        view: detailview,
        detailFormatter: function (index, row) {
            return '<div id="ddv-' + index + '" style="padding:2px;position:relative;"><table class="ddv"></table></div>';
        },
        onExpandRow: function (index, row) {
            var o = $('#ddv-' + index);
            var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
            ddv.datagrid({
                url: '<%=basePath%>shopPersonnelManagement/findDemandPostDetails.do',
                fitColumns: true,
                singleSelect: true,
                rownumbers: true,
                loadMsg: '加载中...',
                emptyMsg: '未找到数据',
                height: 'auto',
                queryParams: {
                    aid: row.id,
                },
                columns: [[
                    {
                        field: 'apply_date', title: '申请时间', width: 40, align: 'center', formatter: function (value) {
                            if (typeof value == 'undefined') {return "";}
                            else {return "<span title='" + value + "'>" + value + "</span>";}
                        }
                    },
                    {
                        field: 'brand', title: '品牌', width: 30, align: 'center', formatter: function (value) {
                            if (typeof value == 'undefined') {return "";}
                            else {return "<span title='" + value + "'>" + value + "</span>";}
                        }
                    },
                    {
                        field: 'applicant', title: '申请人', width: 30, align: 'center', formatter: function (value) {
                            if (typeof value == 'undefined') {return "";}
                            else {return "<span title='" + value + "'>" + value + "</span>";}
                        }
                    },{
                        field: 'plan_change_date', title: '计划变更时间', width: 30, align: 'center', formatter: function (value) {
                            if (typeof value == 'undefined') {return "";}
                            else {return "<span title='" + value + "'>" + value + "</span>";}
                        }
                    },
                    {
                        field: 'demand_post', title: '岗位需求', width: 20, align: 'center', formatter: function (value) {
                            if (typeof value == 'undefined') {return "";}
                            else {return "<span title='" + value + "'>" + value + "</span>";}
                        }
                    },{
                        field: 'apply_num', title: '需求人数', width: 20, align: 'center', formatter: function (value) {
                            if (typeof value == 'undefined') {return "";}
                            else {return "<span title='" + value + "'>" + value + "</span>";}
                        }
                    }/*,{
                        field: 'id', title: '操作', width: 20, align: 'center', formatter: function (value) {
                            if(row.qx==0&&row.status!=2){
                                console.log(row);
                                var deletes="<a href='javascript:void(0)' data-id='"+value+"' class='ctr-delete' onclick='de2(this);'>删除</a>";
                                return deletes;
                            }
                        }
                    }*/
                ]],
                onResize: function () {
                    dg.datagrid('fixDetailRowHeight', index);
                },
                onLoadSuccess: function () {
                    dg.datagrid('fixDetailRowHeight', index);
                    dg.datagrid('fixRowHeight',index);//防止出现滑动条
                    setTimeout(function () {
                        var tr = o.closest('tr');
                        var id = tr.prev().attr('id'); //此子表格父行所在行的id
                        id = id.replace(/-2-(\d+)$/, '-1-$1'); //detailview没有展开的前部分的id是有规则的
                        $('#' + id).next().css('height', tr.height());
                    }, 0);
                }
            });
            dg.datagrid('fixDetailRowHeight', index);
        }
    });
})

 

 

 

onLoadSuccess,onResize是解决easyui展开子table的+号按钮不自动调整位置的bug

这是个完整的subgrid，也不存在需要点击两次才能完全展开子table的bug