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 [ zhengliangjun@gmail.com ]
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 [ 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);