扩展jquery easyui datagrid编辑单元格

1.随便聊聊

　　这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的datagrid的源码进行解读,想从中扩展一些实用方法出来.初次打开源码拜读时,呜呼呀,(用东北话说就是,哎呀妈呀),介些都是啥子玩意啊?原来,我从晚上下载的是min版的,众所周知,min版即为压缩版那啊,不过我先前以为只是将空格和回车删除掉了.出乎意料的是并非如此,各位请看:

function _195(_196, _197) {  
    var opts = $.data(_196, "progressbar").options;  
    var bar = $.data(_196, "progressbar").bar;  
    if (_197) {  
        opts.width = _197;  
    }  
    bar._outerWidth(opts.width)._outerHeight(opts.height);  
    bar.find("div.progressbar-text").width(bar.width());  
    bar.find("div.progressbar-text,div.progressbar-value").css({height: bar.height() + "px", lineHeight: bar.height() + "px"});  
}; 

　　以上是我摘自1.8.0版本中的一段代码.可以看出,排版后仍然无法很轻易地阅读.在此插一句,如果各位谁有非min版本,请告之在下,在此感谢!

2.知识梳理

　　不过,在此也要告诉大家一个好消息,在本人的悉心研究下,已经有了重大突破!(怎么像发布会,抱歉抱歉),现在就将实践经验和代码呈上,请各位赐教!我所做的扩展是对单元格的操作,目前仅仅扩展了两个方法:beginEditCell和endEditCell,参照beginEdit和endEdit两个方法而来,有所改动还需完善.后者两个方法可以参照API,分别表示开始编辑一行和结束编辑一行,很显然这是针对可编辑的datagrid而言的.
　　扩展jquery有一个基本的框架,在这个框架之内是很普通写js代码是一样的的.下面看这个框架:

(function ($) {  
    $.extend($.fn.datagrid.methods, {  
        beginEditCell: function (target, options) {  
            return target.each(function () {  
                beginEditCell(this, options);  
            });  
        },  
        endEditCell: function (target, options) {  
            return target.each(function () {  
                endEditCell(this, options);  
            });  
        }  
    });  
})(jQuery); 

　　其中,代码中的beginEditCell和endEditCell就是我写的扩展方法,前者是开始编辑单元格,后者是结束编辑单元格. 下面简单介绍一下,juqery使用的引擎是sizzle,sizzle可以为你提供多元素操作,这也就是我提供的基本框架中有each的缘故了,并且还有将该元素返回,以便实现级联处理的效果.下面就把完整的代码展示出来,不做过多的解释,因为其中比较复杂,一一注释比较繁琐,不过有时间我会加上的.

(function ($) {  
  
    //开启编辑单元格状态  
    function beginEditCell(target, options) {  
  
        var opts = $.data(target, "datagrid").options;  
        var tr = opts.finder.getTr(target, options.index);  
        var row = opts.finder.getRow(target, options.index);  
  
//        //暂时还不知道该代码的含义,忽略使用  
//        if (tr.hasClass("datagrid-row-editing")) {  
//            return;  
//        }  
//        tr.addClass("datagrid-row-editing");  
  
        _initCellEditor(target, options.index, options.field);  
        _outerWidthOfEditable(target);  
        //$.validateRow(target, options.index);暂时先不使用,不知道该方法作用  
    }  
  
    function _initCellEditor(target, _index, _field) {  
        var opts = $.data(target, "datagrid").options;  
        var tr = opts.finder.getTr(target, _index);  
        var row = opts.finder.getRow(target, _index);  
  
        tr.children("td").each(function () {  
            var cell = $(this).find("div.datagrid-cell");  
            var field = $(this).attr("field");  
  
            if (field == _field) {//找到与传递参数相同field的单元格  
                var col = $(target).datagrid("getColumnOption", field);  
                if (col && col.editor) {  
                    var editorType, editorOp;  
                    if (typeof col.editor == "string") {  
                        editorType = col.editor;  
                    } else {  
                        editorType = col.editor.type;  
                        editorOp = col.editor.options;  
                    }  
                    var editor = opts.editors[editorType];  
                    if (editor) {  
                        var html = cell.html();  
                        var outerWidth = cell._outerWidth();  
                        cell.addClass("datagrid-editable");  
                        cell._outerWidth(outerWidth);  
                        cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>");  
                        cell.children("table").bind(  
                            "click dblclick contextmenu",  
                            function (e) {  
                                e.stopPropagation();  
                            });  
                        $.data(cell[0], "datagrid.editor", {  
                            actions: editor,  
                            target: editor.init(cell.find("td"),  
                                editorOp),  
                            field: field,  
                            type: editorType,  
                            oldHtml: html  
                        });  
                    }  
                }  
  
                tr.find("div.datagrid-editable").each(function () {  
                    var field = $(this).parent().attr("field");  
                    var ed = $.data(this, "datagrid.editor");  
                    ed.actions.setValue(ed.target, row[field]);  
                });  
            }  
        });  
    }  
  
    //为可编辑的单元格设置外边框  
    //来自jquery.easyui.1.8.0.js的 function _4d8()方法  
    function _outerWidthOfEditable(target) {  
        var dc = $.data(target, "datagrid").dc;  
        dc.view.find("div.datagrid-editable").each(function () {  
            var _this = $(this);  
            var field = _this.parent().attr("field");  
            var col = $(target).datagrid("getColumnOption", field);  
            _this._outerWidth(col.width);  
            var ed = $.data(this, "datagrid.editor");  
            if (ed.actions.resize) {  
                ed.actions.resize(ed.target, _this.width());  
            }  
        });  
    }  
  
    //关闭编辑单元格状态  
    function endEditCell(target, options) {  
        var opts = $.data(target, "datagrid").options;  
  
        var updatedRows = $.data(target, "datagrid").updatedRows;  
        var insertedRows = $.data(target, "datagrid").insertedRows;  
  
        var tr = opts.finder.getTr(target, options.index);  
        var row = opts.finder.getRow(target, options.index);  
  
//        //与beginEditCell相呼应,暂时取消  
//        if (!tr.hasClass("datagrid-row-editing")) {//行不能编辑时,返回  
//            return;  
//        }  
//        tr.removeClass("datagrid-row-editing");  
  
        var _535 = false;  
        var _536 = {};  
        tr.find("div.datagrid-editable").each(function () {  
            var _537 = $(this).parent().attr("field");  
            var ed = $.data(this, "datagrid.editor");  
            var _538 = ed.actions.getValue(ed.target);  
            if (row[_537] != _538) {  
                row[_537] = _538;  
                _535 = true;  
                _536[_537] = _538;  
            }  
        });  
        if (_535) {  
            if (_45f(insertedRows, row) == -1) {  
                if (_45f(insertedRows, row) == -1) {  
                    updatedRows.push(row);  
                }  
            }  
        }  
  
        _destroyCellEditor(target, options);  
        $(target).datagrid("refreshRow", options.index);  
        opts.onAfterEdit.call(target, options.index, row, _536);  
    }  
  
    function _45f(a, o) {  
        for (var i = 0, len = a.length; i < len; i++) {  
            if (a[i] == o) {  
                return i;  
            }  
        }  
        return -1;  
    }  
  
    //销毁单元格编辑器  
    function _destroyCellEditor(target, options) {  
  
        var opts = $.data(target, "datagrid").options;  
        var tr = opts.finder.getTr(target, options.index);  
  
        tr.children("td").each(function () {  
            var field = $(this).attr("field");  
  
            if (field == options.field) {//找到与传递参数相同field的单元格  
  
                var cell = $(this).find("div.datagrid-editable");  
                if (cell.length) {  
                    var ed = $.data(cell[0], "datagrid.editor");  
                    if (ed.actions.destroy) {  
                        ed.actions.destroy(ed.target);  
                    }  
                    cell.html(ed.oldHtml);  
                    $.removeData(cell[0], "datagrid.editor");  
                    cell.removeClass("datagrid-editable");  
                    cell.css("width", "");  
                }  
            }  
        });  
    }  
  
    $.extend($.fn.datagrid.methods, {  
        beginEditCell: function (target, options) {  
            return target.each(function () {  
                beginEditCell(this, options);  
            });  
        },  
        endEditCell: function (target, options) {  
            return target.each(function () {  
                endEditCell(this, options);  
            });  
        }  
    });  
})(jQuery);  

　　测试页面也展示出来,方便大家使用,不过需要加上必需的jquery easyui代码:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Row Editing DataGrid - jQuery EasyUI Demo</title>  
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
    <link rel="stylesheet" type="text/css" href="../demo.css">  
    <script type="text/javascript" src="../../jquery-1.8.0.js"></script>  
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
    <script type="text/javascript" src="../../plugins/jquery.datagrid.cellextend.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function(){  
            $("#dg").datagrid({  
                rownumbers:true,  
                iconCls: 'icon-edit',  
                singleSelect: true,  
                toolbar: '#tb',  
                url: '../datagrid/datagrid_data1.json',  
                onDblClickCell: onClickRow,  
                onAfterEdit:onAfterEdit,  
                striped:true,  
                columns:[[  
                    {field: 'itemid', title: 'Item ID', width: 80, fitColumns: true},  
                    {field: 'productid', title: 'Product', width: 100,  
                        formatter: function (value, row) {  
                            return row.productname;  
                        },  
                        editor: {  
                            type: 'combobox',  
                            options: {  
                                valueField: 'productid',  
                                textField: 'productname',  
                                url: '../datagrid/products.json',  
                                required: true  
                            }  
                        }},  
                    {field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: {type: 'numberbox', options: {precision: 1}}},  
                    {field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox'},  
                    {field: 'attr1', title: 'Attribute', width: 250, editor: 'text'},  
                    {field: 'status', title: 'Status', width: 60, align: 'center', editor: {type: 'checkbox', options: {on: 'P', off: ''}}},  
                    {field: 'link', title: 'Link', width: 60, align: 'center',  
                        formatter: function (value, rowData, rowIndex) {  
                            return "<a href='" + value.href + "' onclick='test(" + rowIndex + ");return false;'>" + value.text + "</a>"  
                        }  
                    },  
                    {field: 'isFamle', title: 'IsFamle', width: 60, align: 'center',  
                        formatter: function (value, rowData, rowIndex) {  
                            var str = value=="true" ? "checked" : "";  
                            return "<input type='checkbox' " + str + ">";  
                            //return "<a href='" + value.href + "' onclick='test(" + rowIndex + ");return false;'>" + value.text + "</a>"  
                        }  
                    }  
                ]]  
            });  
        });  
  
        function test(obj){  
            alert(obj);  
        }  
    </script>  
</head>  
<body>  
<h2>Row Editing DataGrid</h2>  
  
<div class="demo-info">  
    <div class="demo-tip icon-tip"></div>  
    <div>Click the row to start editing.</div>  
    <a href="#">asdf</a>  
</div>  
<div style="margin:10px 0;"></div>  
  
<table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:800px;height:auto">  
    <thead>  
    <tr>  
  
    </tr>  
    </thead>  
</table>  
  
<script type="text/javascript">  
  
    var _rowIndex = undefined;  
    var _field = undefined;  
  
    function endEditing() {  
        if (_rowIndex == undefined || _field == undefined) {  
            return true;  
        }  
  
        $('#dg').datagrid('endEditCell', {index: _rowIndex, field: _field});  
        _rowIndex = undefined;  
        _field = undefined;  
        return true;  
    }  
  
    function onClickRow(rowIndex, field, value) {  
        //$('#dg').datagrid('beginEdit', rowIndex);  
        //$('#dg').datagrid('getEditors', rowIndex);  
        if (_rowIndex != rowIndex || _field != field) {  
  
            if (endEditing()){  
                $('#dg').datagrid('beginEditCell', {index: rowIndex, field: field});  
                _rowIndex = rowIndex;  
                _field = field;  
            }  
  
        }  
  
        var data = $('#dg').datagrid('getSelected');  
//        alert(data.link.href);  
    }  
    function onAfterEdit(rowIndex, rowData, changes){  
  
        if(changes.status=="P"){  
            rowData["attr1"]="12312312";  
            $('#dg').datagrid('updateRow',{  
                index: rowIndex,  
                row: rowData  
            });  
  
            $('#dg').datagrid('acceptChanges');  
            var data = $('#dg').datagrid('getSelected');  
            alert(data.status);  
        }else if(changes.status==""){  
            rowData["attr1"]="12312312";  
            $('#dg').datagrid('updateRow',{  
                index: rowIndex,  
                row: rowData  
            });  
  
            $('#dg').datagrid('acceptChanges');  
            var data = $('#dg').datagrid('getSelected');  
            alert(data.status);  
            alert(data.attr1);  
        }  
    }  
</script>  
</body>  
</html>  

　　感谢大家阅读,请多指教!谢谢