miniui之内嵌子表格

项目中有这样一个需求，

想一下这种的展示方式，我选择了miniui中的内嵌子表格的展示形式，也就是这种样式

这里用到的一个方法是：onbeforehiderowdetail=”onBeforeHideRowDetail”
在需要进行展开的列上添加这个属性type=”expandcolumn”
但是这个字段是针对于整个行来说的，如果给两列都添加这个属性的话，展示不同的子表格这时就会出现问题了
1.首先我要做的事重新绘制表格，给需要扩展的列换图标

 grid_main.on('drawcell',function(e){
             //汇总行业和地区的总数
            var field = e.field;
            var value = e.value;
            var recode = e.record;
            var num = 0;
            var dusNum = 0;
            if(field == 'region'){
                for(var i=0;i<value.length;i++){
                   num += value[i]["num"]
                }
                e.cellCls += ' local';
                if(value.length<10){
                     e.cellHtml = '<a class="mini-grid-ecIcon" style="margin-left:4%"  href="javascript::#" onclick="return false"></a>'+value.length+'个地区';
                }else{
                     e.cellHtml = '<a class="mini-grid-ecIcon" style="margin-left:6%"  href="javascript::#" onclick="return false"></a>'+value.length+'个地区';
                }

            }
            if(field == 'dustury'){
                 for(var i=0;i<value.length;i++){
                   dusNum += value[i]["num"]
                }
                 e.cellCls += ' dustury';
                if(value.length<10){
                     e.cellHtml = '<a class="mini-grid-ecIcon" style="margin-left:4%"  href="javascript:#" onclick="return false"></a>'+value.length+'个行业'
                }else{
                     e.cellHtml = '<a class="mini-grid-ecIcon" style="margin-left:6%"  href="javascript:#" onclick="return false"></a>'+value.length+'个行业'
                }

            }
        })

2.给子表格的行添加点击事件，填充数据，这部也是用来区分不同的列

if (window.grid_main) {
            grid_main.on("cellclick", function (e) {
                if (e.field == 'region') {
                    var json = {};
                    datagrid=[];
                    somehow = 'region';
                    for (var i = 0; i < e.record.region.length; i++) {
                        json = {
                            regionName:e.record.region[i]["name"],
                            regionNum: e.record.region[i]["num"]
                        }
                        datagrid.push(json)
                    }
                    employee_grid.setData(datagrid);
                    dataResult = mini.decode({
                        "total": datagrid.length,
                        "data": datagrid
                    });
                    // 第一次设置
                    fillData(0, gridChil.getPageSize(), dataResult, gridChil);
                }else if(e.field == 'dustury'){
                    var json = {};
                    somehow = 'dustury';
                     datagrid=[];
                    for (var i = 0; i < e.record.dustury.length; i++) {
                        json = {
                            regionName:e.record.dustury[i]["name"],
                            regionNum: e.record.dustury[i]["num"]
                        }
                        datagrid.push(json)
                    }
                    employee_grid.setData(datagrid);
                     dataResult = mini.decode({
                        "total": datagrid.length,
                        "data": datagrid
                    });
                    // 第一次设置
                    fillData(0, gridChil.getPageSize(), dataResult, gridChil);
                }

            })

3.onShowRowDetail显示子表格的方法

function onShowRowDetail(e){
            var grid = e.sender;
            var row = e.record;
            var td = grid.getRowDetailCellEl(row);
            td.appendChild(detailGrid_Form);
            detailGrid_Form.style.display = "block";
        }

4.子表格的客户端分页

  function fillData(pageIndex, pageSize, dataResult, grid) {

        var data = dataResult.data, totalCount = dataResult.total;

        var arr = [];
        var start = pageIndex * pageSize, end = start + pageSize;
        for (var i = start, l = end; i < l; i++) {
            var record = data[i];
            if (!record) continue;
            arr.push(record);
        }


        grid.setTotalCount(totalCount);
        grid.setPageIndex(pageIndex);
        grid.setPageSize(pageSize);

        grid.setData(arr);
    }
      // 监听分页前事件，阻止后自行设置当前数据和分页信息
    gridChil.on("beforeload", function (e) {
        e.cancel = true;
        var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
        fillData(pageIndex, pageSize, dataResult, gridChil);
    });

这部分算是完成了。以下跟这部分没关系：纯属个人想展示一下代码：
var json = [
{region:[{name:”jinjin”,num:123},{name:”jinjin2”,num:1233}]},
{region:[{name:”jinjin”,num:444},{name:”jinjin2”,num:1233}]},
]

   var arr2 = [];

                function findIndex(value, array) {
                    for (var i = 0; i < array.length; i++) {
                        if (array[i].name == value) {
                            return i;
                        }
                    }
                    return -1;
                }

                 var index = -1;
                for (var i = 0; i < json.length; i++) {

                    index = findIndex(json[i].num, arr2);

//这里判断后看物件是要进到新阵列，还是把新阵列中已有的物件中poll属性作相加
                    if (index === -1) {
                        arr2.push(region[i]);
                    } else {
                        arr2[index].num += json[i].num;
                    }

                }