关于Easyui的datagrid的可编辑单元格和合并单元格

1.关于datagrid的可编辑的表格

首先扩展easyui的编辑功能

<script type="text/javascript">
    $.extend($.fn.datagrid.methods, {
        editCell: function(jq,param){
            return jq.each(function(){
                var opts = $(this).datagrid('options');
                var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                for(var i=0; i<fields.length; i++){
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field){
                        col.editor = null;
                    }
                }
                $(this).datagrid('beginEdit', param.index);
                var ed = $(this).datagrid('getEditor', param);
                if (ed){
                    if ($(ed.target).hasClass('textbox-f')){
                        $(ed.target).textbox('textbox').focus();
                    } else {
                        $(ed.target).focus();
                    }
                }
                for(var i=0; i<fields.length; i++){
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor = col.editor1;
                }
            });
        },
        enableCellEditing: function(jq){
            return jq.each(function(){
                var dg = $(this);
                var opts = dg.datagrid('options');
                opts.oldOnClickCell = opts.onClickCell;
                opts.onClickCell = function(index, field,value){
                    if (opts.editIndex != undefined){
                        if (dg.datagrid('validateRow', opts.editIndex)){
                            dg.datagrid('endEdit', opts.editIndex);
                            opts.editIndex = undefined;
                        } else {
                            return;
                        }
                    }
                    dg.datagrid('selectRow', index).datagrid('editCell', {
                        index: index,
                        field: field,
                        value: value
                    });
                    opts.editIndex = index;
                    opts.oldOnClickCell.call(this, index, field,value);
                }
            });
        }
    });

</script>复制代码

html代码

<table id="dg" class="easyui-datagrid">
    <thead>
    <tr>
        <th field='ck' checkbox="true" width=60 align="center" halign="center"></th>
        <th field="title" width="100" editor="
        {
            type:'combobox',
            options:{
              valueField:'material_title',
              textField:'material_title',
              editable:true,
              url:'...'}}
        ">名称</th>
        <!--<th field="code" width="100" align="center">编码</th>-->
        <th field="unit" width="100" align="center">单位</th>
        <th field="company" width="100" align="center">销售公司</th>
        <th field="three_month_num" width="100" align="center">近三个月平均量</th>
        <th field="ideal_stock_num" width="100" align="center">预估最高库存值</th>
        <th field="stock_num" width="100" align="center">当前库存 </th>
        <th field="need_num" width="100" align="center" editor="{type:'numberbox',required:true}">需求量</th>
        <th field="supplier" width="100" align="center">商家</th>
    </tr>
    </thead>
</table>复制代码

上面的html代码中我让 field="title"变成了一个下拉框，field="need_num"变成了一个可编辑的数字框

JavaScript代码

('#dg').datagrid({
    url: "..",
    rownumbers:true,
    method: 'post',
    fitColumns:true,
    nowrap:false,
    showHeader:true,
    showFooter:true,
    striped:true,
    loadFilter:function (data) {           //一般都是要在展示数据之前对请求到的数据再次处理才会用到的  
        return data;
    },
    onLoadSuccess:function(data){        //加载成功之后对数据处理
        return data;
    },
    onClickCell: function (rowIndex, field, value) {},//我是为了在这里获得编辑的index
    onAfterEdit:function (rowIndex, rowData, changes) {}  //结束编辑之后可以在这里面来看更改的内容以便于后面操作
}).datagrid('enableCellEditing');                      //datagrid('enableCellEditing')这个就是使datagrid可编辑  复制代码

2.关于datagrid的合并单元格

标题头的合并可以直接在html中来合并

<table id="dg" class="easyui-datagrid"  title="汇总表" style=" height:100%">
    <thead>
    <tr>
        <th field='name' width=90 rowspan="2" halign="center" ></th>复制代码

<th field='' width=90 rowspan="2"  halign="center" ></th>
        <!--<th field='' width=90 rowspan="2" align="left" halign="center"></th>-->
        <th colspan="5">A=B+C</th>
        <th colspan="4">B</th>
        <th colspan="4">C</th>
    </tr>
    <tr>
        <th field='' width=60 align="right" halign="center" >A1</th>
        <th field='' width=60 align="right" halign="center" >A2</th>
        <th field='' width=60 align="right" halign="center" >A3</th>
        <th field='' width=60 align="right" halign="center" >A4</th>
        <th field='' width=60 align="right" halign="center">A2/A1</th>
        <th field='' width=60 align="right" halign="center" >B1</th>
        <th field='' width=60 align="right" halign="center" >B2</th>
        <th field='' width=60 align="right" halign="center" >B3</th>
        <th field='' width=60 align="right" halign="center" >B2/B1</th>
        <th field='' width=60 align="right" halign="center" >C1</th>
        <th field='' width=60 align="right" halign="center" >C2</th>
        <th field='' width=60 align="right" halign="center" >C3</th>
        <th field='' width=60 align="right" halign="center" >C2/C1</th>
    </tr>
    </thead>
</table>复制代码

关于内容的合并需要使用js了

//合并方法
function mergeCellsByField(tableID, colList) {
    var colArray = colList.split(",");
    var tTable = $("#" + tableID);
    var tableRows = tTable.datagrid("getRows");
    var tableRowCnts = tableRows.length;
    var rowspan;
    var preTxt = "";
    var curTxt = "";
    for (j = colArray.length - 1; j >= 0; j--) {
        preTxt = "";
        rowspan = 1;
        for (i = 0; i <= tableRowCnts; i++) {
            if (i == tableRowCnts) {
                curTxt = "";
            } else {
                curTxt = tableRows[i][colArray[j]];
            }
            if (preTxt == curTxt) {
                rowspan += 1;
            } else {
                tTable.datagrid("mergeCells", {
                    index: i - rowspan,
                    field: colArray[j],//合并字段
                    rowspan: rowspan,
                    colspan: null
                });
                rowspan = 1;
            }
            preTxt = curTxt;
        }
    }

    for (i = 0; i <= tableRowCnts-1; i++) {         //这个for循环是我横向合并的全国汇总
        var txt = tableRows[i].name;    
        if((""+txt).indexOf("全国汇总")>=0){
            tTable.datagrid("mergeCells", {
                index: i,
                field: 'name',//合并字段
                rowspan: null,
                colspan: 2
            });
        }
    }

}复制代码

然后在datagrid加载成功后引用

$('#dg').datagrid({
    method: 'post',
    pagination:false,
    fitColumns:true,
    pageSize: 10,
    fit:true,
    singleSelect: false,
    pageList: [10,50, 100, 200],
    onLoadSuccess:function(data){
        if (data.rows.length > 0) {
            //调用mergeCellsByField()合并单元格
            mergeCellsByField("dg", "合并的单元格的field,合并的单元格的field");
        }

    }
})复制代码

关于后台传过来的数据还是按照标准的数据格式来就可以了，遇到指定字段下面的相同字符的话datagrid会自动合并的

关于合并成功之后序号和复选框的合并以及勾选选中  例子如下：

html代码

<table id="dg" class="easyui-datagrid" style="height: 100%">
    <thead>
    <tr>
        <th field="ck" checkbox="true" align="center" halign="center"></th>
        <th field="num" width="100" align="center" halign="center">序号</th>
        <th field="set_number" width="100" align="center" halign="center">000</th>
        <th field="qq" width="100" align="center">aaa</th>
        <th field="cc" width="100" align="center">bbbb</th>
        <th field="aa" width="100" align="center">ccc</th>
        <th field="cc" width="100" align="center" >ddd</th>
    </tr>
    </thead>
</table>复制代码

js代码

$('#dg').datagrid({
    url:'..',
    method:'post',
    fitColumns:true,
    singleSelect: false,
    loadFilter: function(data){             //在这个方法中要对数据进行处理
        var rows = data.rows;
        for (var i=0,j=rows.length;i<j;i++){
            rows[i].ck = rows[i].set_number;       //令ck字段的内容等于set_number的内容

            if(i!=0){                              //num就是我们的排序
                if(rows[i].set_number==rows[i-1].set_number){
                    rows[i].num=rows[i-1].num;                
                }else{
                    rows[i].num=parseInt(rows[i-1].num)+1;
                }
            }else{
                rows[i].num=1;
            }
        }
        data.rows = rows;
        return data;
    },
    onLoadSuccess:function(data){
        if(data.rows.length>0){                //这里就是合并勾选框，序号，以及000
            mergeCellsByField('dg','ck,num,set_number');
        }
    },
    onClickRow: function (rowIndex, rowData) {
        $(this).datagrid('unselectRow', rowIndex);
    },
    onClickCell: function (rowIndex, field, value) { }
})

复制代码

仅仅有上面的代码还是不够的，这是的勾选框仍然只能勾选合并之前的第一行，而不会勾选合并的所有行，我对勾选框做了一个勾选选中的判断，用来勾选合并的，或者取消勾选

/*列表勾选框勾选一个时，同时勾选其他合并的单元号*/
$('#dg_table').delegate('input','click',function () {      //dg_table是table的父元素div的id
    var i = $(this).parents('td').attr('rowspan');
    var indexC = $(this).parents('tr').attr('datagrid-row-index');
    if($(this).is(':checked')){
        if(i!=undefined){
            for(var j = 0; j<i;j++){
                $('#dg').datagrid('checkRow',parseInt(indexC)+j);
            }
        }else{
            $('#dg').datagrid('checkRow',indexC);
        }
    }else{
        if(i!=undefined){
            for(var j = 0; j<i;j++){
                $('#dg').datagrid('uncheckRow',parseInt(indexC)+j);
            }
        }else{
            $('#dg').datagrid('uncheckRow',indexC);
        }
    }
})复制代码

注意：上面的序号只能用作不分页的，如果是分页的不能那样操作，因为每一页都会从0开始排序

3.如果不想使用easyui的分页，想自己定义分页可以用下面的fomatter函数

function(val,row,index){                                   
    var options = $("#dg").datagrid('getPager').data("pagination").options;
    var currentPage = options.pageNumber;
    var pageSize = options.pageSize;
    if(currentPage==0){
        currentPage=1;
    }
    return (pageSize * (currentPage -1))+(index+1);
}复制代码

这就是序号单元格的格式化函数fomatter。

好了，以上就是再次使用easyui的datagrid的总结！