easyui中单元格合并及增加复选框工具

公用方法：

/*
User: libie_lt
Date: 2021/2/22
Time: 上午 10:45
*/


/**
 * EasyUI DataGrid根据字段动态合并单元格，在onLoadSuccess中调用
 * 参数 dataGridId 要执行单元格合并的dataGrid的Id
 * 参数 colList 要合并的列,用逗号分隔(例如："encode,idx,chebox");
 */
function mergeCellsByField(dataGridId, colList) {
    let ColArray = colList.split(",");
    let tTable = $("#" + dataGridId);
    let TableRowCnts = tTable.datagrid("getRows").length;
    let tmpA;
    let tmpB;
    let PerTxt = "";
    let CurTxt = "";
    for (let j = ColArray.length - 1; j >= 0; j--) {
        PerTxt = "";
        tmpA = 1;
        tmpB = 0;
        for (let i = 0; i <= TableRowCnts; i++) {
            if (i === TableRowCnts) {
                CurTxt = "";
            } else {
                CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
            }
            if (PerTxt === CurTxt) {
                tmpA += 1;
            } else {
                tmpB += tmpA;
                tTable.datagrid("mergeCells", {
                    index: i - tmpA,
                    field: ColArray[j],
                    rowspan: tmpA,
                    colspan: null
                });
                tmpA = 1;
            }
            PerTxt = CurTxt;
        }
    }
}


/**
 * 依据指定字段给dataGrid添加排序列和复选框列，在loadFilter中调用
 * @param data dataGrid数据源
 * @param flagField 标识字段名称
 * @param indexField 可选，序列字段名称;
 * @param checkboxField 可选，复选框字段名称,该复选框name为 "checkboxField",value为 flagField的value
 * @param onClickCallback 可选，复选框被单击时的回调函数，使用双引号及转义双引号。  参数：value 标志列的值,checked 是否选中
 * @returns {*}
 */
function addIdxAndCheckboxByField(data,flagField,indexField,checkboxField,onClickCallback){
    let cutIdx=0; //序號
    let cutEncode=''; //立項編碼
    data.rows.forEach((u) => {
        if (u[flagField]!==cutEncode){
            cutEncode=u[flagField];
            u[indexField]=++cutIdx;
        }else {
            u[indexField]=cutIdx;
        }
        u[checkboxField] = "<input type='checkbox' name='"+checkboxField+"' onclick='_DealChecked(\""+u[flagField]+"\","+onClickCallback+")' value='"+u[flagField]+"'>";
    });
    return data;
}

function _DealChecked(flagFieldValue,onClickCallback){
    let checkboxes = $(":checkbox[value=\""+flagFieldValue+"\"]");
    let checked = checkboxes[0].checked;
    onClickCallback(flagFieldValue,checked);
}

调用方法：

        let checkedEncode = new Set(); //存放已选中的复选框值
        $(function () {
            $('#dataGrid').datagrid({
                title:'排配專案時程',
                nowrap: false,
                striped: true,
                fitColumns: true,
                fit: true,
                url: ctx + 'XXXXXXX',
                remoteSort: false,
                singleSelect:true,
                // rownumbers:true,
                idField:'encode',
                columns:[[
                    {field:'chebox',title:'',width:30,},
                    {field:'idx',title:'序號',width:30,},
                    {field:'encode',title:'立項編碼',width:100,},
                    {field:'project_name',title:'專案名稱',width:60},
                    {field:'require_type',title:'需求類別',width:60},
                    {field:'dev_type',title:'開發方式',width:60},
                ]],
                pagination:true,
                pageSize:10,
                pageNumber:1,
                pageList:[10,20,30,40],
                loadFilter:data=>addIdxAndCheckboxByField(data,'encode','idx','chebox',onClickCheck),
                onLoadSuccess:data=>mergeCellsByField("dataGrid", "encode,idx,chebox"),
                // onSelect:(index, row)=>$('#dataGrid').datagrid("unselectRow",index),
            });
        });

        //複選框點擊事件
        function onClickCheck(value,checked) {
            // console.log(value,checked);
            if (checked){
                checkedEncode.add(value);
            } else {
                checkedEncode.delete(value);
            }
            // console.log(checkedEncode);
        }
        //複選框作為單元框使用時的點擊事件
        function onClickCheckAsRadio(value) {
            checkedEncode.forEach(u=>{
                let box = $(":checkbox[name=\"chebox\"][value=\""+u+"\"]")[0];
                checkedEncode.delete(u);
                box.checked=false;
            });
            let checkboxes = $(":checkbox[name=\"chebox\"][value=\""+value+"\"]")[0];
            checkboxes.checked=true;
            checkedEncode.add(value);
        }

效果如下：