Rich Easyui plug-ins

Plug-in purpose:

It is mainly used in forms. The content of a field uses the record ID in other tables. Of course, you can use combobox, combotree, combogrid, and so on, but sometimes these expressions are not very good, and you want to bring up a layer, and then perform some query and selection operations. Therefore, it is encapsulated to facilitate future use without repeatedly writing code.

:

　　

 

Usage:

The plug-in uses Easyui-related styles. Therefore, you need to introduce the relevant scripts and styles of Easyui.

　　

Var lu = $ ('# txt_parentid '). lookup ({title: 'select upper-level region', 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'); // close the pop-up window }});}}}). lookup ('settext', 'select Region '). lookup ('setvalue',-1 );

　　

Dialog: {} Here is the dialog in Easyui. The parameters are the same.

 

Plug-in source code:

Css

 .lookup .combo-arrow{    background:url(../images/icon-select.gif) no-repeat 50% 50%;}

Image:

Js

/* Crazy talent (1055818239) version: 0.01 */(function ($) {// create control 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> "). appendTo (lookup); var valbox = $ ("<input type = \" hidden \ "class = \" combo-value \"> "). AppendTo (lookup); lookup. addClass ('lookup '); var state = $. data (target, 'lookup '); // Add the icon if (state. options. iconCls) {arrow. find ('. combo-arrow '). addClass (state. options. iconCls);} else {arrow. find ('. combo-arrow '). addClass ('icon-search');} // create dialog var _ dialogOpts = {closed: true, title: state. options. title, onClose: function () {state. dialog. dialog ('deststroy'); 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: 'select', width: 400, height: 300}, onOpened: function () {}}) (jQuery );