擴充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>

      感謝大家閱讀,請多指教!謝謝