Easyui数据表格合并单元格

合并与不合并的数据同一个表中:

$('#table_id').datagrid({
        title: '标题',
        collapsible: true,
        singleSelect:true,
        nowrap: true,
        loadMsg: "数据加载中......",
        onLoadSuccess: mergeCellsSuccess,
$.ajax({
        url: "XXX.html",
        type: 'GET',
        dataType: 'json',
        contentType: "application/json",
        data: {A1: A1, A2: A2},//条件
        success: function (tabdata) {
            console.log(tabdata)
            $('#table_id').datagrid('loadData', tabdata.list); //将数据绑定到datagrid
 });
/**
 * 合并单元格
 * @param data
 */
function mergeCellsSuccess(data) {
    var cells = ['要合并的字段1', '要合并的字段2','要合并的字段3'];
    var cellcomp='根据某个字段判断该字段是否相同(如:根据要合并的字段1),相同就合并';
    mergeCells_New("表格di属性",cellcomp,cells);
}
/**
 * @param table_id:datagrid的id
 * @param cellcomp:cellcomp列相同,cellnames合并
 * @param cellnames:合并的列,var cells = ["要合并的字段1", "要合并的字段2"];
 */
function mergeCells_New(table_id, cellcomp, cellnames) {
    var merges = [];
    var rows = $("#" + table_id).datagrid("getRows");
    for (var r = 0; r < rows.length; r++) {
        var row = rows[r];
        var mergeinfo = new Object();
        var nr = row[cellcomp];
        var rowspan = 1;
        for (var r1 = r + 1; r1 < rows.length; r1++) {
            var row1 = rows[r1];
            var nr1 = row1[cellcomp];

            if (nr1 && nr1 == nr && nr1 != "") {
                mergeinfo.index = r;
                rowspan++;
                mergeinfo.rowspan = rowspan;
            }
            else {
                if (rowspan > 1) {
                    merges.push(mergeinfo);
                    r = r1 - 1;
                }
                break;
            }
            if (r1 == rows.length - 1) {
                if (rowspan > 1) {
                    merges.push(mergeinfo);
                    r = r1 - 1;
                }
            }
        }
    }
    for (var i = 0; i < cellnames.length; i++) {
        var cellname = cellnames[i];
        for (var j = 0; j < merges.length; j++) {
            $('#' + table_id).datagrid('mergeCells', {
                index: merges[j].index,
                field: cellname,
                rowspan: merges[j].rowspan
            });
        }
    }
}

合并与不合并的数据不在同一个表中
调用:

$('#tableID').datagrid({
	title: '表格标题',
	singleSelect:true,//只能单选
	onLoadSuccess: onLoadSuccess,//调用方法
});
/**
 * 合并单元格
 * @param data
 */
function onLoadSuccess(data) {
    autoMergeCells("tableId(table表的id)", "不需要合并的数据集", ['要合并的字段1', '要合并的字段2','要合并的字段3']);
}

/**
 * 自动合并单元格
 * @param table_id
 * @param mergeList
 * @param field_arr
 */
function autoMergeCells(table_id, mergeList, field_arr) {
    var rows = $("#" + table_id).datagrid("getRows");
    if (NULL(field_arr) || NULL(rows)) {
        return;
    }
    //赋值
    for (var i = 0; i < rows.length; i++) {
        for (var j = 0; j < rows[i][mergeList].length; j++) {
            var obj = rows[i][mergeList][j];
            if (j == 0) {
                var map = {index: i, row: {}};
                map.row = obj;
                $("#" + table_id).datagrid('updateRow', map);
            } else {
                var map = {index: i + 1, row: {}};
                map.row = obj;
                $("#" + table_id).datagrid('insertRow', map);
            }
        }
        i += rows[i][mergeList].length - 1;
    }
    //合并
    for (var i = 0; i < rows.length; i++) {
        for (var j = 0; j < field_arr.length; j++) {
            var field = field_arr[j];
            $("#" + table_id).datagrid('mergeCells', { //合并
                index: i,
                field: field,
                rowspan: rows[i][mergeList].length
            });
        }
        i += rows[i][mergeList].length - 1;
    }
}

function NOTNULL(obj) {
    if (typeof (obj) == "undefined" || obj === "" || obj == null || obj == "null") {
        return false;
    }
    return true;
}

function NULL(obj) {
    if (typeof (obj) == "undefined" || obj === "" || obj == null || obj == "null") {
        return true;
    }
    return false;
}

你可能感兴趣的:(前端)