/** * jQuery EasyUI 1.3.6 * Copyright (c) 2009-2014 www.jeasyui.com. All rights reserved. * * Licensed under the GPL or commercial licenses * To use it on other terms please contact author: info@jeasyui.com * http://www.gnu.org/licenses/gpl.txt * http://www.jeasyui.com/license_commercial.php * * jQuery EasyUI gridselector Extensions 1.0 beta * jQuery EasyUI gridselector 组件扩展 * jeasyui.extensions.gridselector.js * 二次开发 流云 * 最近更新:2014-04-09 * * 依赖项: * 1、jquery.jdirk.js v1.0 beta late * 2、jeasyui.extensions.js v1.0 beta late * 3、jeasyui.extensions.menu.js v1.0 beta late * 4、jeasyui.extensions.panel.js v1.0 beta late * 5、jeasyui.extensions.window.js v1.0 beta late * 6、jeasyui.extensions.dialog.js v1.0 beta late * 7、jeasyui.extensions.datagrid.js v1.0 beta late * * Copyright (c) 2013-2014 ChenJianwei personal All rights reserved. * http://www.chenjianwei.org */ (function ($, undefined) { $.util.namespace("$.easyui"); // 增加自定义扩展方法 $.easyui.showGridSelector;该方法弹出一个 easyui-datagrid 选择框窗口;该方法定义如下参数: // options: 这是一个 JSON-Object 对象; // 具体格式参考 $.easyui.showDialog 方法的参数 options 的格式 和 easyui-datagrid 的初始化参数 options 的格式; // 该参数格式在 $.easyui.showDialog 和 easyui-datagrid 参数 options 格式基础上扩展了如下属性: // extToolbar: // selected: // onEnter : // 返回值:返回弹出窗口的 easyui-dialog 控件对象(jQuery-DOM 格式)。 $.easyui.showGridSelector = function (options) { if (options && options.topMost && $ != $.util.$) { return $.util.$.easyui.showGridSelector.apply(this, arguments); } var opts = $.extend({ width: 580, height: 360, minWidth: 580, minHeight: 360, title: "选择数据," + (options.singleSelect ? "单选" : "多选"), iconCls: "icon-hamburg-zoom", maximizable: true, collapsible: true, selected: null, extToolbar: false, onEnter: function (val) { } }, options); var value = opts.singleSelect ? opts.selected : ($.util.likeArrayNotString(opts.selected) ? opts.selected : (opts.selected ? [opts.selected] : [])), tempData = value ? ($.util.likeArrayNotString(value) ? $.array.clone(value) : value) : null, dg = null, dia = $.easyui.showDialog($.extend({}, opts, { content: "
", saveButtonText: "确定", saveButtonIconCls: "icon-ok", enableApplyButton: false, toolbar: "", onSave: function () { if ($.isFunction(opts.onEnter)) { return opts.onEnter.call(dg[0], value); } } })); $.util.exec(function () { var container = dia.find(".grid-selector-container"), dgOpts = $.util.excludeProperties(opts, ["id", "width", "height", "left", "top", "cls", "bodyCls", "style", "content", "href"]), selectRow = function (row) { var tOpts = dg.datagrid("options"), idField = tOpts.idField; dg.datagrid("selectRecord", idField && row && row[idField] ? row[idField] : row); }, refreshValue = function () { var tOpts = dg.datagrid("options"); if (opts.singleSelect) { var row = dg.datagrid("getSelected"); value = row ? row : null; } else { value = dg.datagrid("getSelections"); } }; dgOpts = $.extend({ striped: true, checkOnSelect: true, selectOnCheck: true, rownumbers: true }, dgOpts, { noheader: true, fit: true, border: false, doSize: true, onSelect: function (index, row) { refreshValue(); }, onUnselect: function (index, row) { refreshValue(); }, onSelectAll: function (rows) { refreshValue(); }, onUnselectAll: function (rows) { refreshValue(); }, onLoadSuccess: function (data) { $.fn.datagrid.defaults.onLoadSuccess.apply(this, arguments); if ($.isFunction(opts.onLoadSuccess) && opts.onLoadSuccess != $.fn.datagrid.defaults.onLoadSuccess) { opts.onLoadSuccess.apply(this, arguments); } if (!tempData) { return; } if ($.util.likeArrayNotString(tempData)) { $.each(tempData, function (i, val) { selectRow(val); }); } else { selectRow(tempData); } refreshValue(); } }); if ($.util.likeArrayNotString(opts.toolbar) && opts.extToolbar) { dgOpts.toolbar = null; container.append("
" + "
"); container.find("div.grid-selector-toolbar").toolbar({ data: opts.toolbar }); dg = container.find("div.grid-selector"); container.layout({ fit: true }); } else { dg = container.addClass("grid-selector"); } dia.grid = dg.datagrid(dgOpts); }); return dia; }; // 增加自定义扩展方法 $.easyui.showDblGridSelector;该方法弹出一个包含两个 easyui-datagrid 控件的选择框窗口;该方法定义如下参数: // options: 这是一个 JSON-Object 对象; // 具体格式参考 $.easyui.showDialog 方法的参数 options 的格式 和 easyui-datagrid 的初始化参数 options 的格式; // 该参数格式在 $.easyui.showDialog 和 easyui-datagrid 参数 options 格式基础上扩展了如下属性: // extToolbar: // selected: // onEnter : $.easyui.showDblGridSelector = function (options) { if (options && options.topMost && $ != $.util.$) { return $.util.$.easyui.showDblGridSelector.apply(this, arguments); } var opts = $.extend({ width: 900, height: 580, minWidth: 600, minHeight: 480, title: "选择数据,多选", iconCls: "icon-hamburg-zoom", maximizable: true, collapsible: true, selected: null, centerWidth: 55, extToolbar: false, onEnter: function (value) { } }, options); var value = $.util.likeArrayNotString(opts.selected) ? opts.selected : (opts.selected ? [opts.selected] : []), tempData = $.array.clone(value), dg = null, dia = $.easyui.showDialog($.extend({}, opts, { content: "
", saveButtonText: "确定", saveButtonIconCls: "icon-ok", enableApplyButton: false, toolbar: opts.extToolbar ? "" : opts.toolbar, onSave: function () { if ($.isFunction(opts.onEnter)) { return opts.onEnter.call(dg[0], value); } } })); $.util.exec(function () { var diaOpts = dia.dialog("options"), onResize = diaOpts.onResize, init = false, container = dia.find(".grid-selector-container"), northPanel = null, width = (($.isNumeric(opts.width) ? opts.width : dia.outerWidth()) - opts.centerWidth) / 2, leftPanel = $("
").width(width).appendTo(container), centerPanel = $("
").appendTo(container), rightPanel = $("
").width(width).appendTo(container), dgOpts = $.util.excludeProperties(opts, ["id", "width", "height", "left", "top", "cls", "bodyCls", "style", "content", "href"]), dgOpts1 = $.extend({ striped: true, checkOnSelect: true, selectOnCheck: true, rownumbers: true }, dgOpts, { singleSelect: false, title: "待选择项", toolbar: "", fit: true, border: false, doSize: true, noheader: false, iconCls: null, collapsible: false, minimizable: false, maximizable: false, closable: false, rowContextMenu: [ { text: "选择该行", iconCls: null, handler: function (e, index, row) { selectRow(row); refreshValue(); } }, "-", { text: "选择全部", iconCls: null, handler: function (e, index, row) { btn1.trigger("click"); } }, { text: "选择勾选部分", iconCls: null, handler: function (e, index, row) { btn2.trigger("click"); } } ], onLoadSuccess: function () { $.fn.datagrid.defaults.onLoadSuccess.apply(this, arguments); if ($.isFunction(opts.onLoadSuccess) && opts.onLoadSuccess != $.fn.datagrid.defaults.onLoadSuccess) { opts.onLoadSuccess.apply(this, arguments); } if (!init) { $.each(tempData, function (i, val) { selectRow(val); }); refreshValue(); init = true; } } }), dgOpts2 = $.extend({}, dgOpts1, { url: null, queryParams: {}, remoteSort: false, pagination: false, title: "已选择项", iconCls: null, pagingMenu: false, refreshMenu: false, rowContextMenu: [ { text: "取消该行", iconCls: null, handler: function (e, index, row) { unselectRow(row); refreshValue(); } }, "-", { text: "取消全部", iconCls: null, handler: function (e, index, row) { btn4.trigger("click"); } }, { text: "取消勾选部分", iconCls: null, handler: function (e, index, row) { btn3.trigger("click"); } } ], onLoadSuccess: $.fn.datagrid.defaults.onLoadSuccess }), dg1 = $("
").appendTo(leftPanel), dg2 = dg = $("
").appendTo(rightPanel), btn1 = $("").linkbutton({ plain: true, iconCls: "pagination-last" }).tooltip({ content: "选择全部" }).appendTo(centerPanel).click(function () { var rows = dg1.datagrid("getRows"), data = $.array.clone(rows); $.each(data, function (i, val) { selectRow(val); }); dg1.datagrid("unselectAll"); refreshValue(); }), btn2 = $("").linkbutton({ plain: true, iconCls: "pagination-next" }).tooltip({ content: "选择勾选部分" }).appendTo(centerPanel).click(function () { var rows = dg1.datagrid("getSelections"), data = $.array.clone(rows); if (!data.length) { return $.easyui.messager.show("您未选择任何数据。"); } $.each(data, function (i, val) { selectRow(val); }); dg1.datagrid("unselectAll"); refreshValue(); }), btn3 = $("").linkbutton({ plain: true, iconCls: "pagination-prev" }).tooltip({ content: "取消勾选部分" }).appendTo(centerPanel).click(function () { var rows = dg2.datagrid("getSelections"), data = $.array.clone(rows); if (!data.length) { return $.easyui.messager.show("您未选择任何数据。"); } $.each(data, function (i, val) { unselectRow(val); }); dg2.datagrid("unselectAll"); refreshValue(); }), btn4 = $("").linkbutton({ plain: true, iconCls: "pagination-first" }).tooltip({ content: "取消全部" }).appendTo(centerPanel).click(function () { var rows = dg2.datagrid("getRows"), data = $.array.clone(rows); $.each(data, function (i, val) { unselectRow(val); }); dg2.datagrid("unselectAll"); refreshValue(); }), selectRow = function (row) { if (!row) { return; } var tOpts = dg2.datagrid("options"), idField = tOpts.idField; if (!row[idField]) { var rows = dg1.datagrid("getRows"), index = dg1.datagrid("getRowIndex", row); if (index > -1) { row = rows[index]; } } var isExists = dg2.datagrid("getRowIndex", row[idField] ? row[idField] : row) > -1; if (!isExists) { dg2.datagrid("appendRow", row); } }, unselectRow = function (row) { if (!row) { return; } var index = dg2.datagrid("getRowIndex", row); if (index > -1) { dg2.datagrid("deleteRow", index); } }, refreshValue = function () { var rows = dg2.datagrid("getRows"); value = $.array.clone(rows); }; diaOpts.onResize = function (w, h) { if ($.isFunction(onResize)) { onResize.apply(this, arguments); } $.util.exec(function () { var ww = (dia.panel("options").width - diaOpts.centerWidth) / 2; leftPanel.panel("resize", { width: ww }); rightPanel.panel("resize", { width: ww }); container.layout("resize"); }); }; if (opts.extToolbar && opts.toolbar) { northPanel = $("
").appendTo(container); $("
").appendTo(northPanel).toolbar({ data: opts.toolbar });; } dia.grid = dg1.datagrid(dgOpts1); dia.valueGrid = dg2.datagrid(dgOpts2); container.layout({ fit: true }); }); return dia; }; $.easyui.showTreeSelector = function (options) { if (options && options.topMost && $ != $.util.$) { return $.util.$.easyui.showTreeSelector.apply(this, arguments); } }; $.easyui.showTreeGridSelector = function (options) { if (options && options.topMost && $ != $.util.$) { return $.util.$.easyui.showTreeGridSelector.apply(this, arguments); } }; $.easyui.showTreeWithGridSelector = function (options) { if (options && options.topMost && $ != $.util.$) { return $.util.$.easyui.showDblTreeGridSelector.apply(this, arguments); } }; })(jQuery);