關於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的總結！