/** * edatagrid - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Copyright 2011 stworthy [ stworthy@gmail.com ] * * Dependencies: * datagrid * messager * */ (function ($) { var currTarget; $(function () { $(document).unbind('.edatagrid').bind('mousedown.edatagrid', function (e) { var p = $(e.target).closest('div.datagrid-view,div.combo-panel'); if (p.length) { if (p.hasClass('datagrid-view')) { var dg = p.children('table'); if (dg.length && currTarget != dg[0]) { _save(); } } return; } _save(); function _save() { var dg = $(currTarget); if (dg.length) { dg.edatagrid('saveRow'); currTarget = undefined; } } }); }); function buildGrid(target) { var opts = $.data(target, 'edatagrid').options; $(target).datagrid($.extend({}, opts, { onDblClickCell: function (index, field) { if (opts.editing) { $(this).edatagrid('editRow', index); focusEditor(field); } }, onBeginEdit: function (index, row) { if (shortcut) { var $dg = $(this); shortcut.processEgridEditor($dg, index, row); } }, onClickCell: function (index, field) { if (opts.editing && opts.editIndex >= 0) { $(this).edatagrid('editRow', index); focusEditor(field); } }, onAfterEdit: function (index, row) { opts.editIndex = -1; var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl; if (url) { $.post(url, row, function (data) { if (data.isError) { $(target).edatagrid('cancelRow', index); $(target).edatagrid('selectRow', index); $(target).edatagrid('editRow', index); opts.onError.call(target, index, data); return; } data.isNewRecord = null; $(target).datagrid('updateRow', { index: index, row: data }); if (opts.tree) { var idValue = row[opts.idField || 'id']; var t = $(opts.tree); var node = t.tree('find', idValue); if (node) { node.text = row[opts.treeTextField]; t.tree('update', node); } else { var pnode = t.tree('find', row[opts.treeParentField]); t.tree('append', { parent: (pnode ? pnode.target : null), data: [{id: idValue, text: row[opts.treeTextField]}] }); } } opts.onSave.call(target, index, row); }, 'json'); } else { opts.onSave.call(target, index, row); } if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row); }, onCancelEdit: function (index, row) { opts.editIndex = -1; if (row.isNewRecord) { $(this).datagrid('deleteRow', index); } if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row); }, onBeforeLoad: function (param) { if (opts.onBeforeLoad.call(target, param) == false) { return false } // $(this).datagrid('rejectChanges'); $(this).edatagrid('cancelRow'); if (opts.tree) { var node = $(opts.tree).tree('getSelected'); param[opts.treeParentField] = node ? node.id : undefined; } } })); function focusEditor(field) { var editor = $(target).datagrid('getEditor', {index: opts.editIndex, field: field}); if (editor) { editor.target.focus(); } else { var editors = $(target).datagrid('getEditors', opts.editIndex); if (editors.length) { editors[0].target.focus(); } } } if (opts.tree) { $(opts.tree).tree({ url: opts.treeUrl, onClick: function (node) { $(target).datagrid('load'); }, onDrop: function (dest, source, point) { var targetId = $(this).tree('getNode', dest).id; $.ajax({ url: opts.treeDndUrl, type: 'post', data: { id: source.id, targetId: targetId, point: point }, dataType: 'json', success: function () { $(target).datagrid('load'); } }); } }); } } $.fn.edatagrid = function (options, param) { if (typeof options == 'string') { var method = $.fn.edatagrid.methods[options]; if (method) { return method(this, param); } else { return this.datagrid(options, param); } } options = options || {}; return this.each(function () { var state = $.data(this, 'edatagrid'); if (state) { $.extend(state.options, options); } else { $.data(this, 'edatagrid', { options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options) }); } buildGrid(this); }); }; $.fn.edatagrid.parseOptions = function (target) { return $.extend({}, $.fn.datagrid.parseOptions(target), {}); }; $.fn.edatagrid.methods = { focusEditor: function (jq, field) { var $dg = $(jq[0]); var opts = $.data(jq[0], 'edatagrid').options; if (field) { var editor = $dg.datagrid('getEditor', {index: opts.editIndex, field: field}); if (editor) { editor.target.focus(); return; } } var editors = $dg.datagrid('getEditors', opts.editIndex); if (editors.length) { //editors[0].target.focus(); $(editors[0].target).textbox('textbox').focus(); } }, validateRow: function (jq, index) { var tr = $.data(jq[0], "datagrid").options.finder.getTr(jq[0], index); if (!tr.hasClass("datagrid-row-editing")) { return true; } var vbox = tr.find(".validatebox-text"); vbox.validatebox("validate"); //vbox.trigger("mouseleave"); var r = tr.find(".validatebox-invalid"); if (r.length === 0) { return true; } $.yvan.msg('有' + r.length + '项校验未通过,请核对后再进行操作'); r[0].focus(); return false; }, getEditRowIndex: function (jq) { var opts = $.data(jq[0], 'edatagrid').options; return opts.editIndex; }, getEditRow: function (jq) { var opts = $.data(jq[0], 'edatagrid').options; if (opts.editIndex < 0) return; //获取到数据行 var dg = $(jq[0]); var rows = dg.datagrid("getRows"); var row = rows[opts.editIndex]; //获取到编辑器 var editors = dg.datagrid('getEditors', opts.editIndex); for (var i = 0; i < editors.length; i++) { var editor = editors [i]; if ($.type(editor) === 'undefined') continue; if (!editor.hasOwnProperty('field')) continue; if (!editor.hasOwnProperty('type')) continue; if ($.inArray(editor.type, ['textbox', 'numberbox', 'numberspinner', 'combobox', 'combotree', 'combogrid', 'datebox', 'datetimebox', 'searchbox']) >= 0) { row[editor.field] = editor.target.textbox('getValue'); } else if (editor.type === 'checkbox') { var cn = editor.target.is(':checked'); if (cn === true) { row[editor.field] = editor.target.val(); } else if (cn === false) { row[editor.field] = editor.target.attr('offval'); } else { cn = editor.target.next().children()[0].className; if (cn === 'checkbox-inner') { row[editor.field] = editor.target.attr('offval'); } else if (cn === 'checkbox-inner checkbox-checked') { row[editor.field] = editor.target.val(); } else { console.error('未知的checkbox值'); } } } else { console.error('未知的取值方法:' + editor.type, ', 字段名:' + editor.field); } } //填充未获取到的值 var columns = dg.edatagrid('getColumnFields'); for (var i = 0; i < columns.length; i++) { if (row.hasOwnProperty(columns[i])) continue; row[columns[i]] = null; } return row; }, setEditRow: function (jq, data) { var opts = $.data(jq[0], 'edatagrid').options; if (opts.editIndex < 0) { $.yvan.msg('没有找到编辑行'); return; } var editIndex = opts.editIndex; var dg = $(jq[0]); var rows = dg.datagrid("getRows"); $.extend(rows[opts.editIndex], data); opts.editIndex = -1; setTimeout(function () { dg.edatagrid('refreshRow', editIndex); dg.edatagrid('editRow', editIndex); }, 0); }, options: function (jq) { var opts = $.data(jq[0], 'edatagrid').options; return opts; }, enableEditing: function (jq) { return jq.each(function () { var opts = $.data(this, 'edatagrid').options; opts.editing = true; }); }, disableEditing: function (jq) { return jq.each(function () { var opts = $.data(this, 'edatagrid').options; opts.editing = false; }); }, editRow: function (jq, index) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'edatagrid').options; var editIndex = opts.editIndex; if (editIndex != index) { if (dg.edatagrid('validateRow', editIndex)) { if (editIndex >= 0) { if (opts.onBeforeSave.call(this, editIndex) == false) { setTimeout(function () { dg.datagrid('selectRow', editIndex); }, 0); return; } } dg.datagrid('endEdit', editIndex); dg.datagrid('beginEdit', index); opts.editIndex = index; if (currTarget != this && $(currTarget).length) { $(currTarget).edatagrid('saveRow'); currTarget = undefined; } if (opts.autoSave) { currTarget = this; } var rows = dg.datagrid('getRows'); opts.onEdit.call(this, index, rows[index]); } else { setTimeout(function () { dg.datagrid('selectRow', editIndex); }, 0); } } }); }, addRow: function (jq, index) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'edatagrid').options; if (opts.editIndex >= 0) { if (!dg.edatagrid('validateRow', opts.editIndex)) { dg.datagrid('selectRow', opts.editIndex); return; } if (opts.onBeforeSave.call(this, opts.editIndex) == false) { setTimeout(function () { dg.datagrid('selectRow', opts.editIndex); }, 0); return; } dg.datagrid('endEdit', opts.editIndex); } var rows = dg.datagrid('getRows'); function _add(index, row) { if (index == undefined) { dg.datagrid('appendRow', row); opts.editIndex = rows.length - 1; } else { dg.datagrid('insertRow', {index: index, row: row}); opts.editIndex = index; } } if (typeof index == 'object') { _add(index.index, $.extend(index.row, {isNewRecord: true})) } else { _add(index, {isNewRecord: true}); } // if (index == undefined){ // dg.datagrid('appendRow', {isNewRecord:true}); // opts.editIndex = rows.length - 1; // } else { // dg.datagrid('insertRow', { // index: index, // row: {isNewRecord:true} // }); // opts.editIndex = index; // } dg.datagrid('beginEdit', opts.editIndex); dg.datagrid('selectRow', opts.editIndex); if (opts.tree) { var node = $(opts.tree).tree('getSelected'); rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0); } opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]); }); }, saveRow: function (jq) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'edatagrid').options; if (opts.editIndex >= 0) { if (dg.edatagrid('validateRow', opts.editIndex)) { if (opts.onBeforeSave.call(this, opts.editIndex) === false) { setTimeout(function () { dg.datagrid('selectRow', opts.editIndex); }, 0); return; } $(this).datagrid('endEdit', opts.editIndex); } } }); }, save: function (jq) { var dg = $(jq[0]); dg.edatagrid('saveRow'); if (dg.edatagrid('getEditRowIndex') >= 0) { return false; } return dg.datagrid('getRows'); }, cancelRow: function (jq) { return jq.each(function () { var opts = $.data(this, 'edatagrid').options; if (opts.editIndex >= 0) { $(this).datagrid('cancelEdit', opts.editIndex); } }); }, destroyRow: function (jq, index) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'edatagrid').options; var rows = []; if (index === undefined) { rows = dg.datagrid('getSelections'); } else { var rowIndexes = $.isArray(index) ? index : [index]; for (var i = 0; i < rowIndexes.length; i++) { var row = opts.finder.getRow(this, rowIndexes[i]); if (row) { rows.push(row); } } } for (var i = 0; i < rows.length; i++) { _del(rows[i]); } dg.datagrid('clearSelections'); function _del(row) { var index = dg.datagrid('getRowIndex', row); if (index == -1) { return } if (index === opts.editIndex) { dg.datagrid('refreshRow', index); opts.editIndex = -1; } dg.datagrid('deleteRow', index); opts.onDestroy.call(dg[0], index, row); } }); } }; $.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, { editing: true, editIndex: -1, autoSave: false, // auto save the editing row when click out of datagrid url: null, // return the datagrid data saveUrl: null, // return the added row updateUrl: null, // return the updated row destroyUrl: null, // return {success:true} tree: null, // the tree selector treeUrl: null, // return tree data treeDndUrl: null, // to process the drag and drop operation, return {success:true} treeTextField: 'name', treeParentField: 'parentId', onAdd: function (index, row) { }, onEdit: function (index, row) { }, onBeforeSave: function (index) { }, onSave: function (index, row) { }, onDestroy: function (index, row) { }, onError: function (index, row) { } }); })(jQuery);