easyui plugin —— etreegrid：CRUD Treegrid

    昨天写了一个ko+easyui的同样的实现，感觉写的太乱，用起来十分麻烦，于是今天照着edatagrid，写了一个etreegrid，这样再用ko绑定就方便多了。 使用很简单,$(tableId).etreegrid({idField:''parentIdField:'',treeField:'',saveUrl:'',deleteUrl:''}); 还支持一些事件，onSave,onBeforeSave,onEdit,onAdd,onRemove； Url可以不指定，指定Data即可。

/** 
 * etreegrid - jQuery EasyUI 
 *  
 * Licensed under the GPL: 
 *   http://www.gnu.org/licenses/gpl.txt 
 * 
 * Copyright 2013 maddemon [ zhengliangjun@gmail.com ]  
 *  
 * Dependencies: 
 *   treegrid 
 *   messager 
 *  
 */  
(function ($) {  
  
    function buildGrid(target) {  
        var opts = $.data(target, 'etreegrid').options;  
        $(target).treegrid($.extend({}, opts, {  
            onDblClickCell: function (field, row) {  
                if (opts.editing) {  
                    $(this).etreegrid("editRow", row);  
                    focusEditor(field);  
                }  
            },  
            onClickCell: function (field, row) {  
                if (opts.editing && opts.editIndex >= 0) {  
                    if (!trySaveRow()) {  
                        focusEditor(field);  
                        return;  
                    }  
                }  
            },  
            onAfterEdit: function (row, changes) {  
                opts.editIndex = undefined;  
                var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;  
                if (url) {  
                    $.post(url, row).done(function (json, statusText, xhr) {  
                        if (row.isNewRecord) {  
                            row.isNewRecord = false;  
                            //remove new  
                            $(target).treegrid("remove", row[opts.idField]);  
                            row[opts.idField] = json[opts.idField] || json.data[opts.idField];  
                            $(target).treegrid("append", { parent: row[opts.parentIdField], data: [row] });  
                            //append new  
                        } else {  
                            //refresh  
                            $(target).treegrid("refresh", row[opts.idField]);  
                        }  
                    }).error(function (xhr) {  
                        var result = eval("(" + xhr.responseText + ")");  
                        $.messager.alert("失败", result.message || result, "warning");  
                    });  
                    opts.onSave.call(target, row);  
                } else {  
                    opts.onSave.call(target, row);  
                }  
                if (opts.onAfterEdit) opts.onAfterEdit.call(target, row);  
            },  
            onCancelEdit: function (row) {  
                opts.editIndex = undefined;  
                if (row.isNewRecord) {  
                    $(this).treegrid("remove", row[opts.idField]);  
                }  
                if (opts.onCancelEdit) opts.onCancelEdit.call(target, row);  
            },  
            onBeforeLoad: function (row, param) {  
                if (opts.onBeforeLoad.call(target, row, param) == false) {  
                    return false;  
                };  
                $(this).treegrid("rejectChanges");  
            }  
        }));  
  
        function trySaveRow() {  
            if (!$(target).treegrid("validateRow", opts.editIndex)) {  
                $(target).treegrid("select", opts.editIndex);  
                return false;  
            }  
            if (opts.onBeforeSave.call(this, opts.editIndex) == false) {  
                setTimeout(function () {  
                    $(target).treegrid('select', opts.editIndex);  
                }, 0);  
                return false;  
            }  
            $(target).treegrid('endEdit', opts.editIndex);  
            return true;  
        }  
  
        function focusEditor(field) {  
            var editor = $(target).treegrid('getEditor', { index: opts.editIndex, field: field });  
            if (editor) {  
                editor.target.focus();  
            } else {  
                var editors = $(target).treegrid('getEditors', opts.editIndex);  
                if (editors.length) {  
                    editors[0].target.focus();  
                }  
            }  
        }  
    }  
  
    $.fn.etreegrid = function (options, param) {  
        if (typeof (options) == "string") {  
            var method = $.fn.etreegrid.methods[options];  
            if (method) {  
                return method(this, param);  
            } else {  
                return this.treegrid(options, param);  
            }  
        }  
  
        options = options || {};  
        return this.each(function () {  
            var state = $.data(this, "etreegrid");  
            if (state) {  
                $.extend(state.options, options);  
            } else {  
                $.data(this, "etreegrid", { options: $.extend({}, $.fn.etreegrid.defaults, $.fn.etreegrid.parseOptions(this), options) });  
            }  
            ;  
            buildGrid(this);  
  
        });  
    };  
  
    $.fn.etreegrid.parseOptions = function (target) {  
        return $.extend({}, $.fn.treegrid.parseOptions(target), {});  
    };  
  
    $.fn.etreegrid.methods = {  
        options: function (jq) {  
            var opts = $.data(jq[0], "etreegrid").options;  
            return opts;  
        },  
        enableEditing: function (jq) {  
            return jq.each(function () {  
                var opts = $.data(this, "etreegrid").options;  
                opts.editing = true;  
            });  
        },  
        disableEditing: function (jq) {  
            return jq.each(function () {  
                var opts = $.data(this, "etreegrid").options;  
                opts.editing = false;  
            });  
        },  
        editRow: function (jq, row) {  
            return jq.each(function () {  
                var dg = $(this);  
                var opts = $.data(this, "etreegrid").options;  
                var index = row[opts.idField];  
                var editIndex = opts.editIndex;  
                if (editIndex != index) {  
                    if (dg.treegrid("validateRow", editIndex)) {  
                        if (editIndex >= 0) {  
                            if (opts.onBeforeSave.call(this, editIndex) == false) {  
                                setTimeout(function () {  
                                    dg.treegrid("select", editIndex);  
                                }, 0);  
                                return;  
                            }  
                        }  
                        dg.treegrid("endEdit", editIndex);  
                        dg.treegrid("beginEdit", index);  
                        opts.editIndex = index;  
                        var node = dg.treegrid("find", index);  
                        opts.onEdit.call(this, node);  
                    } else {  
                        setTimeout(function () {  
                            dg.treegrid("select", editIndex);  
                        }, 0);  
                    }  
                }  
            });  
        },  
        addRow: function (jq) {  
            return jq.each(function () {  
                var dg = $(this);  
                var opts = $.data(this, "etreegrid").options;  
                var editIndex = opts.editIndex;  
                if (opts.editIndex >= 0) {  
                    if (!dg.treegrid("validateRow", editIndex)) {  
                        dg.treegrid("select", editIndex);  
                        return;  
                    }  
                    if (opts.onBeforeSave.call(this, opts.editIndex) == false) {  
                        setTimeout(function () {  
                            dg.treegrid('select', opts.editIndex);  
                        }, 0);  
                        return;  
                    }  
                    dg.treegrid('endEdit', opts.editIndex);  
                }  
                var selected = dg.treegrid("getSelected");  
                var parentId = selected ? selected[opts.idField] : 0;  
                var newRecord = { isNewRecord: true };  
                newRecord[opts.idField] = 0;  
                newRecord[opts.parentIdField] = parentId;  
                dg.treegrid("append", { parent: parentId, data: [newRecord] });  
                opts.editIndex = 0;  
                dg.treegrid("beginEdit", opts.editIndex);  
                dg.treegrid("select", opts.editIndex);  
            });  
        },  
        saveRow: function (jq) {  
            return jq.each(function () {  
                var dg = $(this);  
                var opts = $.data(this, 'etreegrid').options;  
                if (opts.editIndex >= 0) {  
                    if (!dg.treegrid("validateRow", opts.editIndex)) {  
                        dg.treegrid("select", opts.editIndex);  
                        return;  
                    }  
                    if (opts.onBeforeSave.call(this, opts.editIndex) == false) {  
                        setTimeout(function () {  
                            dg.treegrid('select', opts.editIndex);  
                        }, 0);  
                        return;  
                    }  
                    $(this).treegrid('endEdit', opts.editIndex);  
                }  
            });  
        },  
        cancelRow: function (jq) {  
            return jq.each(function () {  
                var index = $(this).etreegrid('options').editIndex;  
                $(this).treegrid('cancelEdit', index);  
            });  
        },  
        removeRow: function (jq) {  
            return jq.each(function () {  
                var dg = $(this);  
                var opts = $.data(this, 'etreegrid').options;  
                var row = dg.treegrid('getSelected');  
                if (!row) return;  
                if (row.isNewRecord) {  
                    dg.treegrid("remove", row[opts.idField]);  
                    return;  
                }  
                $.messager.confirm("确认", "确认删除这条数据吗？", function (r) {  
                    if (!r) return;  
                    var idValue = row[opts.idField];  
                    if (opts.deleteUrl) {  
                        $.post(opts.deleteUrl, { id: idValue }).done(function (json) {  
                            dg.treegrid("remove", idValue);  
                            opts.onRemove.call(dg[0], json, row);  
                        }).error(function (xhr) {  
                            var json = eval('(' + xhr.responseText + ')');  
                            $.messager.alert('错误', json.message || json, "warning");  
                        });  
                    } else {  
                        dg.datagrid('cancelEdit', idValue);  
                        dg.datagrid('deleteRow', idValue);  
                        opts.onRemove.call(dg[0], row);  
                    }  
                });  
            });  
        }  
    };  
  
    $.fn.etreegrid.defaults = $.extend({}, $.fn.treegrid.defaults, {  
        editing: true,  
        editIndex: -1,  
        messager: {},  
  
        url: null,  
        saveUrl: null,  
        updateUrl: null,  
        deleteUrl: null,  
  
        onAdd: function (row) { },  
        onEdit: function (row) { },  
        onBeforeSave: function (index) { },  
        onSave: function (row) { },  
        onRemove: function (row) { },  
    });  
})(jQuery);  

 knockoutjs使用此插件的方法：

<div id="area-form" fit="true">  
    <div id="area-tool-bar">  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" data-bind="click: add">新增</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" plain="true" data-bind="click: save">保存</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" data-bind="click: remove">删除</a>  
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" plain="true" data-bind="click: cancel">取消</a>  
    </div>  
    <table id="area-list" rownumbers="true" title="区域列表" border="0" toolbar="#area-tool-bar" data-bind="etreegrid:tree">  
        <thead>  
            <tr>  
                <th field="Name" width="500" data-options="editor:{type:'validatebox',options:{required:true}}">地区名称</th>  
                <th field="Code" width="120" data-options="editor:{type:'validatebox'}">地区编码</th>  
            </tr>  
        </thead>  
    </table>  
</div>  
<script type="text/javascript">  
    (function () {  
  
        var listId = "#area-list";  
  
        function AreaModel() {  
            this.tree = {  
                url: "/area/gettree",  
                treeField: "Name",  
                parentIdField: "ParentID",  
                idField: "ID",  
                saveUrl: "/area/save",  
                deleteUrl: "/area/delete",  
            };  
  
            this.add = function() {  
                $(listId).etreegrid("addRow");  
            };  
            this.save = function () {  
                $(listId).etreegrid("saveRow");  
            };  
            this.remove = function () {  
                $(listId).etreegrid("removeRow");  
            };  
            this.cancel = function () {  
                $(listId).etreegrid("cancelRow");  
            };  
        };  
        ko.applyBindings(new AreaModel(), document.getElementById("area-form"));  
    })();  
</script>