/** * power * @author luoyifan * 2018-11-22 17:32:00 */ "use strict"; $.parser.auto = false; (function ($) { function processFooter($target, item, context) { if (!item.hasOwnProperty('footer')) { return; } if ($.type(item.footer) === 'array') { var $toolbar = $('
'); $target.append($toolbar); $toolbar = renderDispatch($toolbar, { xtype: 'toolbar', items: item.toolbar }, context); item.footer = $toolbar; return $toolbar; } if (($.type(item.footer) === 'object') || $.type(item.footer) === 'string') { if (!item.footer.id) { item.footer.id = $.yvan.createId(); } var $toolbar = renderDispatch($target, item.footer, context); item.footer = $toolbar; return $toolbar; } } function processToolbar($target, item, context) { if (!item.hasOwnProperty('toolbar')) { return; } if ($.type(item.toolbar) === 'array') { var $toolbar = $('
'); $target.append($toolbar); $toolbar = renderDispatch($toolbar, { xtype: 'toolbar', items: item.toolbar }, context); item.toolbar = $toolbar; return $toolbar; } if ($.type(item.toolbar) === 'object') { if (!item.toolbar.id) { item.toolbar.id = $.yvan.createId(); } var $toolbar = renderDispatch($target, item.toolbar, context); item.toolbar = $toolbar; return $toolbar; } } function beforeRender($target, opts, context) { if ($.type(opts.onBeforeRender) === 'function') { var r = opts.onBeforeRender.apply(this, arguments); if (r === false) { return false; } } var funs = $.fn.power.defaults.beforeRender; for (var i = 0; i < funs.length; i++) { var fun = funs[i]; if ($.type(fun) === 'function') { var r = fun.call(this, $target, opts, context); if (r === false) { return false; } } } return true; } function afterRender($target, opts, context) { var funs = $.fn.power.defaults.afterRender; for (var i = 0; i < funs.length; i++) { var fun = funs[i]; if ($.type(fun) === 'function') { fun.apply(this, arguments); } } if ($.type(opts.onRender) === 'function') { opts.onRender.apply(this, arguments); } } function renderDispatch($target, item, context, parent) { if (!item) { return; } if ($.type(item) === 'array') { //元素是数组,用 row 隔开 var $row = $('
'); $target.append($row); renderEach($row, item, context, parent); return; } if ($.type(item) === 'string') { //元素是字符串,直接输出html $target.append(item); return; } if ($.type(item) === 'function') { //item 是函数 var r = item.apply(this, context); renderDispatch($target, r, context); return; } // yvTreeGrid 专用方法 function resizeMe() { var $panel = $(this).parent(); var d = $panel.height() - 50; $target.css({ "height": d + 'px' }); } //if (item.importUrl) { // //带有url, 需要 ajax 获取配置内容 // var $dom = $('
'); //带一个占位符 // $target.append($dom); // $.yvan.readyJs({ // url: item.importUrl, // success: function (data) { // var vv = eval(data); // var importBack = data.importUrl; // //扩展到当前属性 // data = $.extend({}, vv(), item); // if (importBack) { // //配置 ajax 结果中带有 importUrl 属性,需要继续 importUrl // data.importUrl = importBack; // } else { // delete data.importUrl; // } // renderDispatch($dom, data, context); // } // }); // return; //} item.xtype = item.xtype || 'textbox'; switch (item.xtype) { case 'textbox': case 'combobox': case 'searchbox': case 'datebox': case 'numberbox': case 'combotree': case 'combotreegrid': case 'combogrid': case 'datetimebox': case 'tagbox': case 'yvselect': case 'maskedbox': case 'passwordbox': case 'filebox': case 'numberspinner': if (beforeRender.call(this, $target, item, context) === false) { return; } var css = 'easyui-' + item.xtype; //宽度计算 if (!item.width) { item.span = item.span || 1; if (item.span === 1) { item.width = 280; } else if (item.span === 2) { item.width = 560; } else if (item.span === 3) { item.width = 840; } } //生成DOM var $dom = $(''); if(typeof(item.ff) === 'number'){ $dom.attr('ff', item.ff) } $.yvan.fillCommonProperties($dom, item); $target.append($('
').append($dom)); if ($.inArray(item.xtype, ['textbox']) >= 0 && item.widget) { item.icons = [ { iconCls: 'icon-clear', handler: widget.clear }, { iconCls: 'icon-search', handler: function (e) { widget.show(item.widget, this); } }]; } if ($.inArray(item.xtype, ['textbox']) >= 0 && item.dialog) { item.icons = [ { iconCls: 'icon-clear', handler: widget.clear }, { iconCls: 'icon-search', handler: function (e) { var me = this; $.yvan.showDialog(me, item.dialog); } }]; } if (window.hasOwnProperty('shortcut')) { shortcut.processInput($dom, item, context); } if (parent) { //代入上级给的 subLabelWidth/subControlWidth if (parent.hasOwnProperty('subLabelWidth') && !item.hasOwnProperty('labelWidth')) { item.labelWidth = parent.subLabelWidth; } if (parent.hasOwnProperty('subControlWidth') && !item.hasOwnProperty('width')) { item.width = parent.subControlWidth; } } //初始化元素 $dom[item.xtype](item); if(item.labelWidth!=='auto' && item.labelWrap===true){ var labelDOM = $dom.prev(); if(labelDOM.is('label')){ labelDOM.css({ 'line-height': '16px', 'white-space': 'pre-wrap' }) } } if (item.xtype === 'searchbox') { $dom.searchbox('onSysRender'); } if (item.xtype === 'maskedbox') { var $c = $dom.maskedbox('textbox'); $c.css({ height: '30px', lineHeight: '30px' }); $c.parent().css({ height: '30px' }); } if (item.hasOwnProperty('maxlength') && $.type(item.maxlength) === 'number') { setTimeout(function () { if ($dom.data().hasOwnProperty('textbox')) { $dom.textbox('textbox').attr('maxlength', item.maxlength); } }); } if (window.hasOwnProperty('shortcut')) { shortcut.processInputAfter($dom, item, context); } if (item.readonly) { //只读框,为span 增加一个 tooltip 属性 var $span = $dom.next(); $span.tooltip({ position: 'bottom', onShow: function () { var value = $dom.val(); if (!value || $.trim(value).length <= 10) { $(this).tooltip('destroy'); } else { $(this).tooltip({ content: value }).tooltip('tip').css({ color: 'rgb(255, 255, 255)', 'background-color': 'rgb(255, 126, 0)' }); } } }); } if (item.xtype === 'combobox') { //combobox 点击后自动下拉 $dom.next().on('click', 'input', function () { if (!$dom.combobox('options').readonly) { $dom.combobox("showPanel"); } }); item.isFirstLoad = true; $dom.combobox({ onSelect: function (data) { if (item.onSelect && $.type(item.onSelect) === 'function') { item.onSelect(data); } setTimeout(function () { if (item.isFirstLoad && item.onValue && $.type(item.onValue) === 'function') { item.onValue(data); } item.isFirstLoad = false; }, 100); } }); $dom.combobox({ onChange: function (data, value) { if (item.onChange && $.type(item.onChange) === 'function') { item.onChange(data, value); } if (item.onValue && $.type(item.onValue) === 'function') { item.isFirstLoad = false; item.onValue(data, value); } } }); //.bind('focus', function () { // $dom.combobox("showPanel"); //}) //.bind('blur', function () { // $dom.combobox("hidePanel"); //}); } if (item.xtype === 'datebox') { //datebox 点击后自动下拉 $dom.textbox("textbox").bind('click', function () { if (!$dom.datebox('options').readonly) { $dom.datebox("showPanel"); } }); } if (item.xtype === 'datetimebox') { //datetimebox 点击后自动下拉 $dom.textbox("textbox").bind('click', function () { if (!$dom.datebox('options').readonly) { $dom.datebox("showPanel"); } }); } afterRender.call($dom[0], $target, item, context); return $dom; case 'offset': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
'); $.yvan.fillCommonProperties($dom, item); $target.append($dom); if (parent) { //代入上级给的 subLabelWidth/subControlWidth if (parent.hasOwnProperty('subLabelWidth') && !item.hasOwnProperty('labelWidth')) { $dom.css({ width: parent.subLabelWidth }); } } afterRender.call($dom[0], $target, item, context); return $dom; case 'menu': var $dom = $(''); $.yvan.fillCommonProperties($dom, item); var items = $.yvan.getItems(item); for (var i = 0; i < items.length; i++) { var $item = $('
  • '); var $a = '' + items[i].text + ''; var $icon = ''; $item.append($a); $a.append($icon); $dom.append($item); } return $dom; case 'checkgroup': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.checkgroup(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'radiogroup': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.radiogroup(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'checkbox': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $(''); $.yvan.fillCommonProperties($dom, item); if (item.hasOwnProperty('name')) { $dom.attr('name', item.name); } if (item.hasOwnProperty('checked')) { $dom.attr('checked', item.checked); } if (item.hasOwnProperty('disable')) { $dom.attr('disable', item.disable); } if (item.hasOwnProperty('primary')) { $dom.attr('primary', item.primary); } $target.append($dom); $dom.checkbox(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'radiobutton': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $(''); $.yvan.fillCommonProperties($dom, item); if (item.hasOwnProperty('name')) { $dom.attr('name', item.name); } if (item.hasOwnProperty('checked')) { $dom.attr('checked', item.checked); } if (item.hasOwnProperty('disable')) { $dom.attr('disable', item.disable); } $target.append($dom); $dom.radiobutton(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'hidden': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $(''); $.yvan.fillCommonProperties($dom, item); $dom.data({ options: item }); if (item.hasOwnProperty('value')) { $dom.val(item.value); } $target.append($dom); afterRender.call($dom[0], $target, item, context); return $dom; case 'dialog': //对话框本身不增加任何DOM元素,但要在Power级别记录Options if (!context.options.hasOwnProperty('dialogs')) { context.options.dialogs = {}; } context.options.dialogs[item.dialogId] = item; break; case 'div': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); renderEach($dom, $.yvan.getItems(item), context); afterRender.call($dom[0], $target, item, context); return $dom; case 'layout': if (beforeRender.call(this, $target, item, context) === false) { return; } //布局 var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); layoutRender($dom, item, context, item); afterRender.call($dom[0], $target, item, context); break; case 'panel': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.panel($.extend({ border: false }, item)); afterRender.call($dom[0], $target, item, context); return $dom; case 'group': if (beforeRender.call(this, $target, item, context) === false) { return; } //表单分组 var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); var $group = $('
    '); $dom.append($group); if (item.title) { $group.append($('' + item.title + '')); } $target.append($dom); renderEach($group, $.yvan.getItems(item), context, item); afterRender.call($dom[0], $target, item, context); return $dom; case 'form': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); if ($.trim(item.name)) { $dom.attr('name', item.name); } $.yvan.fillCommonProperties($dom, item); $target.append($dom); //枚举下级所有元素 renderEach($dom, $.yvan.getItems(item), context, item); afterRender.call($dom[0], $target, item, context); return $dom; case 'formgroup': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); if ($.trim(item.name)) { $dom.attr('name', item.name); } var $group = $('
    '); $dom.append($group); if (item.title) { $group.append($('' + item.title + '')); } $target.append($dom); renderEach($group, $.yvan.getItems(item), context, item); afterRender.call($dom[0], $target, item, context); return $dom; case 'toolbar': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.toolbar(item, context); afterRender.call($dom[0], $target, item, context); return $dom; case 'grid': if (!$.jgrid || !$.jgrid.yvanui) { return; } if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $.jgrid.createDom($target, item, context); afterRender.call($dom[0], $target, item, context); return $dom; case 'egrid': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); egridProcess(item); $dom.edatagrid(item); if (window.hasOwnProperty('shortcut')) { shortcut.processGrid($dom, item, context); } afterRender.call($dom[0], $target, item, context); return $dom; case 'datalist': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.datalist(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'datagrid': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); processToolbar($target, item, context); $dom.datagrid(item); if (window.hasOwnProperty('shortcut')) { shortcut.processGrid($dom, item, context); } afterRender.call($dom[0], $target, item, context); return $dom; case 'tabs': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); tabRender($dom, item, context, item); afterRender.call($dom[0], $target, item, context); return $dom; case 'tree': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.tree(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'treegrid': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.treegrid(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'propertygrid': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $('
    '); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.propertygrid(item); afterRender.call($dom[0], $target, item, context); return $dom; case 'button': if (beforeRender.call(this, $target, item, context) === false) { return; } var $dom = $(''); $.yvan.fillCommonProperties($dom, item); $target.append($dom); $dom.linkbutton(item); afterRender.call($dom[0], $target, item, context); return $dom; default: if ($.fn.power.defaults.xtype.hasOwnProperty(item.xtype)) { //从扩展组件中找 if (beforeRender.call(this, $target, item, context) === false) { return; } var id = $.yvan.createId(item.xtype); $target.attr('id','super_' + id); var $dom = $.fn.power.defaults.xtype[item.xtype]($target, item, context, id); if (item.xtype === 'yvtreegrid') { var $panel = $target; if ($panel.data().hasOwnProperty('panel')) { $panel.panel({onResize: resizeMe}); resizeMe.call($panel); } } afterRender.call($dom[0], $target, item, context); return $dom; } console.log('无法识别的元素类型', item.xtype); } } function renderEach($target, items, context, parent) { for (var i = 0; i < items.length; i++) { renderDispatch($target, items[i], context, parent); } } function tabRender($target, item, context) { var tabsOption = $.yvan.getItems(item); var doms = []; for (var i = 0; i < tabsOption.length; i++) { var tabOption = tabsOption[i]; if ($.type(tabOption) === 'function') { tabOption = tabOption(context); } if (!tabOption) { continue; } if (beforeRender.call(this, $target, tabOption, context) === false) { continue; } var $dom = $('
    '); $dom.attr('data-options', dataOptions(tabOption, ['title', 'lazy'])); $.yvan.fillCommonProperties($dom, tabOption); doms.push($dom); $target.append($dom); afterRender.call($dom[0], $target, tabOption, context); if (tabOption.lazy) { $.data($dom[0], 'lazyOption', tabOption); } else { renderEach($dom, $.yvan.getItems(tabOption), context); } } $target.tabs($.extend({}, item, { onSelect: function (title, index) { var $tabDom = $(this).tabs('getTab', index); if ($tabDom.data().hasOwnProperty('lazyOption')) { renderEach($tabDom, $.yvan.getItems($tabDom.data().lazyOption), context); delete $tabDom.data().lazyOption; } if (item.onSelect) { item.onSelect.apply(this, arguments); } setTimeout(function(){ shortcut.ffApply($tabDom) }) } })); } function layoutRender($target, opts, context) { //var childProp = ['height', 'width', 'split', 'border', 'title']; var functions = []; for (var name in opts) { if (!opts.hasOwnProperty(name)) continue; var value = opts[name]; if ($.inArray(name, ['xtype', 'attr', 'itemId', 'id', 'html', 'class', 'css', 'title', 'onRender', 'onBeforeRender']) >= 0) { //忽略属性 continue; } switch (name) { case 'north': //上面 case 'center': //中间 case 'west': //左边 case 'east': //右边 case 'south': //下面 if (beforeRender.call(this, $target, value, context) === false) { continue; } var $dom = $('
    '); $dom.attr('data-options', dataOptions(value, [], { region: name })); $.yvan.fillCommonProperties($dom, value); $target.append($dom); $dom.attr('tabIndex', -1); //继续递归 (function ($dom, $target, items, context, value) { functions.push(function () { renderEach($dom, items, context); afterRender.call($dom[0], $target, value, context); }); })($dom, $target, $.yvan.getItems(value), context, value); break; case 'assist': //辅助类操作 renderEach(null, opts[name], context); break; default: //renderDispatch($target, name, value); console.log('layout 下面只允许出现 north,center,west,east,south 属性, 未知属性:', name); break; } } $target.layout({ fit: true }); functions.forEach(function (v) { v(); }); $target.attr('tabIndex', -1); //$.yvan.parse($target); } function dataOptions(opts, exclude, mergeObj) { exclude.push('attr', 'itemId', 'id', 'html', 'class', 'css', 'xtype', 'items', 'dialog', 'attr'); var obj = mergeObj || {}; for (var name in opts) { if (!opts.hasOwnProperty(name)) continue; if ($.inArray(name, exclude) >= 0) { continue; } obj[name] = opts[name]; } var json = JSON.stringify(obj); return json.substr(1, json.length - 2); } function printLog($e) { var value = $e.prop("outerHTML"); value = value.replace(new RegExp('"', 'g'), "'"); value = value.replace(/\'([^(\')"]+)\':/g, "$1:"); console.log(value); } function egridProcess(item) { if (!item.hasOwnProperty('columns')) return; for (var i = 0; i < item.columns.length; i++) { var cg = item.columns[i]; if ($.type(cg) !== 'array') continue; for (var j = 0; j < cg.length; j++) { //如果没有定义编辑框,就退出 if (!cg[j].hasOwnProperty('editor')) continue; if (!cg[j].editor.options) { cg[j].editor.options = {}; } //默认 tooltip 在底端 if (cg[j].editor.options.hasOwnProperty('tipPosition')) continue; cg[j].editor.options.tipPosition = 'top'; //绑定onChange属性 if ($.type(cg[j].editor.onChange) === 'function') { (function (vv) { cg[j].editor.options.onChange = function (n, o) { var $dg = $(this).closest("div.datagrid-view").down('egrid'); var row = $dg.edatagrid('getEditRow'); if ($.type(row) === 'undefined') { return; } vv.apply(this, [$dg, row, n, o]); }; })(cg[j].editor.onChange); } } } } function render(target, context) { var opts = $.data(target, 'power').options; var $target = $(target); // if ($.type(opts.title) === 'string') { // $(document).attr("title", opts.title); // } if (beforeRender.call(this, $target, opts, context) === false) { return; } //power 是快捷键容器 if (window.hasOwnProperty('shortcut')) { shortcut.createContainer($target, context); } $target.addClass('easyui-layout'); $.yvan.fillCommonProperties($target, opts); if (!$target.attr('xtype')) { $target.attr('xtype', 'power'); } $target.html(''); layoutRender($target, opts, context); afterRender.call($target[0], $target, opts, context); //$.yvan.parse($target); } $.fn.power = function (options, param) { if (typeof options === 'string') { var method = $.fn.power.methods[options]; return method(this, param); } options = options || {}; var context = $.extend({}, param); return this.each(function () { var state = $.data(this, 'power'); if (state) { //扩展属性 $.extend(state.options, options); context.options = state.options; } else { //新加属性 context.options = $.extend({}, options); $.data(this, 'power', { options: context.options }); } render(this, context); }); }; $.fn.power.methods = { find: function (jq, itemId) { return jq.find('.ctl_' + itemId); }, renderDispatch: function (jq, param) { return renderDispatch(param.$target, param.item, param.context); }, renderEach: function (jq, param) { return renderEach(param.$target, param.items, param.context); }, processToolbar: function (jq, param) { return processToolbar(param.$target, param.item, param.context); }, processFooter: function (jq, param) { return processFooter(param.$target, param.item, param.context); } }; $.fn.power.defaults = { beforeRender: [], afterRender: [], xtype: {} }; $.fn.power.dialogs = { defaults: { title: '未命名对话框', width: 300, height: 200, resizable: true, maximizable: true, collapsible: false, minimizable: false, closable: true, modal: true, inline: true } }; })(jQuery);