[转载]丰富Easyui 的插件 – lookup – 疯狂秀才 – 博客园.
插件用途:
主要用于表单中,某字段的内容是用其他表里的记录ID。当然你可以使用combobox、combotree、combogrid等,但有时这 些表现方式并不是很好,希望弹出个层,然后在去做一些查询并选取的操作。所以就封装了一下,方便以后使用,不用在写重复的代码。
效果图:
使用方法:
插件使用Easyui 的相关样式,所以使用时需要引入Easyui 的相关脚本及样式。
var lu = $( '#txt_ParentId' ).lookup({ title: '选择上级区域' , dialog: { content: '<ul id=ptree></ul>' , height: 400,width:300, onOpen: function () { $( '#ptree' ).tree({ url: actionUrl, data: $( '#areatree' ).tree( 'getData' ), onClick: function (node) { lu.lookup( 'setValue' , node.id).lookup( 'setText' , node.text); lu.lookup( 'close' ); // 关闭弹窗 } }); } } }).lookup( 'setText' , '请选择区域' ).lookup( 'setValue' , -1); |
dialog:{} 这里就是Easyui 中的dialog ,参数神马的都一样
插件源码:
css
.lookup .combo-arrow{ background : url (../images/icon-select.gif) no-repeat 50% 50% ; } |
图片:
js
/* 疯狂秀才(1055818239) version: 0.01 */ ( function ($) { // 创建控件DOM function create(target) { var id = $(target).attr( 'id' ); if (!id) { id = 'lookup_' + new Date().getTime(); $(target).attr( 'id' , id); } $(target).addClass( 'combo-f' ).hide(); var lookup = $( '<span class="combo"></span>' ).insertAfter(target); var textbox = $( '<input type="text" class="combo-text" />' ).appendTo(lookup); var arrow = $( "<span><span class=\"combo-arrow \"></span></span>" ).appendTo(lookup); var valbox = $( "<input type=\"hidden\" class=\"combo-value\">" ).appendTo(lookup); lookup.addClass( 'lookup' ); var state = $.data(target, 'lookup' ); // 添加图标 if (state.options.iconCls) { arrow.find( '.combo-arrow' ).addClass(state.options.iconCls); } else { arrow.find( '.combo-arrow' ).addClass( 'icon-search' ); } // 创建 dialog var _dialogOpts = { closed: true , title: state.options.title, onClose: function () { state.dialog.dialog( 'destroy' ); state.dialog = null ; } } var name = $(target).attr( "name" ); if (name) { lookup.find( "input.combo-value" ).attr( "name" , name); $(target).removeAttr( "name" ).attr( "comboName" , name); } textbox.attr( "autocomplete" , "off" ); arrow.on( 'click' , function () { if (!state.dialog) { var did = 'dialog_' + id + '-' + new Date().getTime(); _dialogOpts = $.extend({}, state.options.dialog, _dialogOpts); var _dialog = $( '<div/>' ).attr( 'id' , did).dialog(_dialogOpts); state.dialog = _dialog; } state.dialog.dialog( 'open' ); }); state.textbox = textbox; state.valbox = valbox; } $.fn.lookup = function (options, param) { if ( typeof options == 'string' ) { var method = $.fn.lookup.methods[options]; if (method) { return method( this , param); } else { return this .lookup(options, param); } } options = options || {}; return this .each( function () { var state = $.data( this , 'lookup' ); if (state) { $.extend(state.options, options); create( this ); } else { $.data( this , 'lookup' , { options: $.extend({}, $.fn.lookup.defaults, options) }); create( this ); } }) } $.fn.lookup.methods = { open: function () { }, close: function (jq) { return jq.each( function () { var state = $.data( this , 'lookup' ); state.dialog.dialog( 'close' ); }); }, setValue: function (jq, val) { return jq.each( function () { var state = $.data( this , 'lookup' ); state.valbox.val(val); }); }, getValue: function (jq) { var state = $.data(jq[0], 'lookup' ); return state.valbox.val(); }, setText: function (jq, text) { return jq.each( function () { var state = $.data( this , 'lookup' ); state.textbox.val(text); }); }, getText: function (jq) { var state = $.data(jq[0], 'lookup' ); return state.textbox.val(); } } $.fn.lookup.defaults = { iconCls: '' , width: 120, height: 'auto' , dialog: { title: '选择' , width: 400, height: 300 }, onOpened: function () { } } })(JQuery); |