easy ui实现行编辑的treegrid——etreegrid

01./** 
02. * etreegrid - jQuery EasyUI 
03. *  
04. * Licensed under the GPL: 
05. *   http://www.gnu.org/licenses/gpl.txt 
06. * 
07. * Copyright 2013 maddemon [ [email protected] ]  
08. *  
09. * Dependencies: 
10. *   treegrid 
11. *   messager 
12. *  
13. */  
14.(function ($) {  
15.  
16.    function buildGrid(target) {  
17.        var opts = $.data(target, 'etreegrid').options;  
18.        $(target).treegrid($.extend({}, opts, {  
19.            onDblClickCell: function (field, row) {  
20.                if (opts.editing) {  
21.                    $(this).etreegrid("editRow", row);  
22.                    focusEditor(field);  
23.                }  
24.            },  
25.            onClickCell: function (field, row) {  
26.                if (opts.editing && opts.editIndex >= 0) {  
27.                    if (!trySaveRow()) {  
28.                        focusEditor(field);  
29.                        return;  
30.                    }  
31.                }  
32.            },  
33.            onAfterEdit: function (row, changes) {  
34.                opts.editIndex = undefined;  
35.                var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;  
36.                if (url) {  
37.                    $.post(url, row).done(function (json, statusText, xhr) {  
38.                        if (row.isNewRecord) {  
39.                            row.isNewRecord = false;  
40.                            //remove new   
41.                            $(target).treegrid("remove", row[opts.idField]);  
42.                            row[opts.idField] = json[opts.idField] || json.data[opts.idField];  
43.                            $(target).treegrid("append", { parent: row[opts.parentIdField], data: [row] });  
44.                            //append new   
45.                        } else {  
46.                            //refresh   
47.                            $(target).treegrid("refresh", row[opts.idField]);  
48.                        }  
49.                    }).error(function (xhr) {  
50.                        var result = eval("(" + xhr.responseText + ")");  
51.                        $.messager.alert("失败", result.message || result, "warning");  
52.                    });  
53.                    opts.onSave.call(target, row);  
54.                } else {  
55.                    opts.onSave.call(target, row);  
56.                }  
57.                if (opts.onAfterEdit) opts.onAfterEdit.call(target, row);  
58.            },  
59.            onCancelEdit: function (row) {  
60.                opts.editIndex = undefined;  
61.                if (row.isNewRecord) {  
62.                    $(this).treegrid("remove", row[opts.idField]);  
63.                }  
64.                if (opts.onCancelEdit) opts.onCancelEdit.call(target, row);  
65.            },  
66.            onBeforeLoad: function (row, param) {  
67.                if (opts.onBeforeLoad.call(target, row, param) == false) {  
68.                    return false;  
69.                };  
70.                $(this).treegrid("rejectChanges");  
71.            }  
72.        }));  
73.  
74.        function trySaveRow() {  
75.            if (!$(target).treegrid("validateRow", opts.editIndex)) {  
76.                $(target).treegrid("select", opts.editIndex);  
77.                return false;  
78.            }  
79.            if (opts.onBeforeSave.call(this, opts.editIndex) == false) {  
80.                setTimeout(function () {  
81.                    $(target).treegrid('select', opts.editIndex);  
82.                }, 0);  
83.                return false;  
84.            }  
85.            $(target).treegrid('endEdit', opts.editIndex);  
86.            return true;  
87.        }  
88.  
89.        function focusEditor(field) {  
90.            var editor = $(target).treegrid('getEditor', { index: opts.editIndex, field: field });  
91.            if (editor) {  
92.                editor.target.focus();  
93.            } else {  
94.                var editors = $(target).treegrid('getEditors', opts.editIndex);  
95.                if (editors.length) {  
96.                    editors[0].target.focus();  
97.                }  
98.            }  
99.        }  
100.    }  
101.  
102.    $.fn.etreegrid = function (options, param) {  
103.        if (typeof (options) == "string") {  
104.            var method = $.fn.etreegrid.methods[options];  
105.            if (method) {  
106.                return method(this, param);  
107.            } else {  
108.                return this.treegrid(options, param);  
109.            }  
110.        }  
111.  
112.        options = options || {};  
113.        return this.each(function () {  
114.            var state = $.data(this, "etreegrid");  
115.            if (state) {  
116.                $.extend(state.options, options);  
117.            } else {  
118.                $.data(this, "etreegrid", { options: $.extend({}, $.fn.etreegrid.defaults, $.fn.etreegrid.parseOptions(this), options) });  
119.            }  
120.            ;  
121.            buildGrid(this);  
122.  
123.        });  
124.    };  
125.  
126.    $.fn.etreegrid.parseOptions = function (target) {  
127.        return $.extend({}, $.fn.treegrid.parseOptions(target), {});  
128.    };  
129.  
130.    $.fn.etreegrid.methods = {  
131.        options: function (jq) {  
132.            var opts = $.data(jq[0], "etreegrid").options;  
133.            return opts;  
134.        },  
135.        enableEditing: function (jq) {  
136.            return jq.each(function () {  
137.                var opts = $.data(this, "etreegrid").options;  
138.                opts.editing = true;  
139.            });  
140.        },  
141.        disableEditing: function (jq) {  
142.            return jq.each(function () {  
143.                var opts = $.data(this, "etreegrid").options;  
144.                opts.editing = false;  
145.            });  
146.        },  
147.        editRow: function (jq, row) {  
148.            return jq.each(function () {  
149.                var dg = $(this);  
150.                var opts = $.data(this, "etreegrid").options;  
151.                var index = row[opts.idField];  
152.                var editIndex = opts.editIndex;  
153.                if (editIndex != index) {  
154.                    if (dg.treegrid("validateRow", editIndex)) {  
155.                        if (editIndex >= 0) {  
156.                            if (opts.onBeforeSave.call(this, editIndex) == false) {  
157.                                setTimeout(function () {  
158.                                    dg.treegrid("select", editIndex);  
159.                                }, 0);  
160.                                return;  
161.                            }  
162.                        }  
163.                        dg.treegrid("endEdit", editIndex);  
164.                        dg.treegrid("beginEdit", index);  
165.                        opts.editIndex = index;  
166.                        var node = dg.treegrid("find", index);  
167.                        opts.onEdit.call(this, node);  
168.                    } else {  
169.                        setTimeout(function () {  
170.                            dg.treegrid("select", editIndex);  
171.                        }, 0);  
172.                    }  
173.                }  
174.            });  
175.        },  
176.        addRow: function (jq) {  
177.            return jq.each(function () {  
178.                var dg = $(this);  
179.                var opts = $.data(this, "etreegrid").options;  
180.                var editIndex = opts.editIndex;  
181.                if (opts.editIndex >= 0) {  
182.                    if (!dg.treegrid("validateRow", editIndex)) {  
183.                        dg.treegrid("select", editIndex);  
184.                        return;  
185.                    }  
186.                    if (opts.onBeforeSave.call(this, opts.editIndex) == false) {  
187.                        setTimeout(function () {  
188.                            dg.treegrid('select', opts.editIndex);  
189.                        }, 0);  
190.                        return;  
191.                    }  
192.                    dg.treegrid('endEdit', opts.editIndex);  
193.                }  
194.                var selected = dg.treegrid("getSelected");  
195.                var parentId = selected ? selected[opts.idField] : 0;  
196.                var newRecord = { isNewRecord: true };  
197.                newRecord[opts.idField] = 0;  
198.                newRecord[opts.parentIdField] = parentId;  
199.                dg.treegrid("append", { parent: parentId, data: [newRecord] });  
200.                opts.editIndex = 0;  
201.                dg.treegrid("beginEdit", opts.editIndex);  
202.                dg.treegrid("select", opts.editIndex);  
203.            });  
204.        },  
205.        saveRow: function (jq) {  
206.            return jq.each(function () {  
207.                var dg = $(this);  
208.                var opts = $.data(this, 'etreegrid').options;  
209.                if (opts.editIndex >= 0) {  
210.                    if (!dg.treegrid("validateRow", opts.editIndex)) {  
211.                        dg.treegrid("select", opts.editIndex);  
212.                        return;  
213.                    }  
214.                    if (opts.onBeforeSave.call(this, opts.editIndex) == false) {  
215.                        setTimeout(function () {  
216.                            dg.treegrid('select', opts.editIndex);  
217.                        }, 0);  
218.                        return;  
219.                    }  
220.                    $(this).treegrid('endEdit', opts.editIndex);  
221.                }  
222.            });  
223.        },  
224.        cancelRow: function (jq) {  
225.            return jq.each(function () {  
226.                var index = $(this).etreegrid('options').editIndex;  
227.                $(this).treegrid('cancelEdit', index);  
228.            });  
229.        },  
230.        removeRow: function (jq) {  
231.            return jq.each(function () {  
232.                var dg = $(this);  
233.                var opts = $.data(this, 'etreegrid').options;  
234.                var row = dg.treegrid('getSelected');  
235.                if (!row) return;  
236.                if (row.isNewRecord) {  
237.                    dg.treegrid("remove", row[opts.idField]);  
238.                    return;  
239.                }  
240.                $.messager.confirm("确认", "确认删除这条数据吗？", function (r) {  
241.                    if (!r) return;  
242.                    var idValue = row[opts.idField];  
243.                    if (opts.deleteUrl) {  
244.                        $.post(opts.deleteUrl, { id: idValue }).done(function (json) {  
245.                            dg.treegrid("remove", idValue);  
246.                            opts.onRemove.call(dg[0], json, row);  
247.                        }).error(function (xhr) {  
248.                            var json = eval('(' + xhr.responseText + ')');  
249.                            $.messager.alert('错误', json.message || json, "warning");  
250.                        });  
251.                    } else {  
252.                        dg.datagrid('cancelEdit', idValue);  
253.                        dg.datagrid('deleteRow', idValue);  
254.                        opts.onRemove.call(dg[0], row);  
255.                    }  
256.                });  
257.            });  
258.        }  
259.    };  
260.  
261.    $.fn.etreegrid.defaults = $.extend({}, $.fn.treegrid.defaults, {  
262.        editing: true,  
263.        editIndex: -1,  
264.        messager: {},  
265.  
266.        url: null,  
267.        saveUrl: null,  
268.        updateUrl: null,  
269.        deleteUrl: null,  
270.  
271.        onAdd: function (row) { },  
272.        onEdit: function (row) { },  
273.        onBeforeSave: function (index) { },  
274.        onSave: function (row) { },  
275.        onRemove: function (row) { },  
276.    });  
277.})(jQuery);  
/**
 * etreegrid - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2013 maddemon [ [email protected] ] 
 * 
 * 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);

这个也是转载一位博主，仿照easyui官方扩展的edatagrid写的，但是请注意，在1.3.1版本上这个组件有些问题，请使用的朋友们注意下。