jquery Plugin Easyui Property Rollup _jquery

For a list of this properties, please click here for more information about the jquery Easyui 1.0.5.

Attributes are divided into CSS fragments and JS fragments.

CSS class definition:


1. Div Easyui-window generates a window style.


The properties are as follows:


1) Modal: whether to generate modal window. True[is] false[No]


2) Shadow: Whether to display window shadows. True[Show] false[not displayed]





2, Div easyui-panel to generate a panel.


The properties are as follows:


1 title: The caption text is displayed in the panel head.


2) Iconcls: Displays the 16x16 icon on the panel through a CSS class.


3) Width: Set the thickness of the panel. Default Auto.


4) Height: Set the level of the panel. Default Auto.


5 Left: Sets the left-hand margin of the panel.


6 Top: Sets the position of the panel.


7 CLS: Add a class to the panel.


8) Headercls: Add a class to the head of the panel.


9) Bodycls: Add a class to the panel content.


Style: Adds a specified style to the panel.


Fit: When True, setting the panel size is appropriate for its parent container. Default false.


Border: Displays the panel boundary when defined. The default is true.


Dosize: If set to true, the panel will redraw the size and rebuild the layout. The default is true.


Collapsible: A button that displays a collapsible panel when defined. Default false.


Minimizable: Displays the minimized panel button when defined. Default false.


Maximizable: Displays a button that maximizes the panel when defined. Default false.


Closable: Displays a button that closes the panel when defined. Default false.


Tools: Customize the toolbar, each containing two properties: Iconcls, Handler.


Collapsed: Is in a shrinking state when the panel is initialized when it is defined. Default false.


Minimized: is minimized when the panel is initialized when it is defined. Default false.


Maximized: When defined, the panel is maximized when it is initialized. Default false.


Closed: The panel is closed when it is initialized when it is defined. Default false.


href: a URL that loads the remote data and displays it in the panel.


Loadingmessage: Displays a message in the panel when remote data is loaded. Default Loading ...


The events are as follows:


1 onLoad: When the remote data loaded after the activation.


2) Onbeforeopen: Activate before panel opens.


3) OnOpen: Activated when the panel is open.


4) Onbeforeclose: Activate before panel closes.


5) OnClose: Activate when panel is closed.


6) Onbeforedestroy: Activate before panel is destroyed.


7) OnDestroy: Activated when the panel is destroyed.


8) Onbeforecollpase: Activate before the panel shrinks.


9) Oncollapse: Activated when the panel is shrunk.


Onbeforeexpand: Activated before the panel expands.


One) Onexpand: Activated when the panel is expanded.


OnResize: Activated when the panel is redrawn.


Width: New external width


Height: New external height


OnMove: Activated when the panel is moved.


Left: The new position on the left-hand side.


Top: The new location at the front.


Onmaximize: Activates when the window is maximized.


Onrestore: Activates when the window is restored to its original size.


Onminimize: Activates when the window is minimized.


The method is as follows:


1 options: Returns the Options property.


2 panel: Returns the object of the palette.


3 Header: Returns the Panel header object.


4) Body: Returns the Panel Principal object.


5) Settitle: Sets the header text of the head.


6 Open: When the ForceOpen parameter is set to True, the panel bypasses the Onbeforeopen callback function when it is opened.


7 Close: When the Forceclose parameter is set to True, the panel bypasses the Onbeforeclose callback function when it closes.


8) Destroy: Bypasses the Onbeforedestroy callback function when the Forcedestroy parameter is set to True when the panel is destroyed.


9 Refresh: When the href property is set, the panel is refreshed to load the remote data.


Resize: Sets the size and layout of the panel. The Options object contains the following properties:


Width: new panel widths.


Height: The new panel height.


Left: The new panel is positioned on the left-hand side.


Top: The new panel tops the position.


Move: Moves the panel to a new location. The Options object contains the following properties:


Left: The new panel is positioned on the left-hand side.


Top: The new panel tops the position.

3, a Easyui-linkbutton to generate link Type button.

The properties are as follows:
1) Disabled: Disables the button when True. Default false.
2) Plain: Displays a normal effect when true. Default false.

4, Input/textarea easyui-validatebox generate field validation.


The properties are as follows:


1) required:true[Required] false[not required] default false


2) Validtype:


A, length[a,b] field lengths are controlled between A and B.


b, email verification email.


C, URL authentication network address.


3) Missingmessage: When the text appears empty when the ToolTip pops up, the system has the default [English], the custom can cover it.


4) Invalidmessage: When the text content is invalid, pop-up the ToolTip, the system has the default [English], custom can cover it.





5, UL Easyui-tree to produce a tree-shaped structure.


The properties are as follows:


1 URL: An address to obtain remote data.


2) Animate: Whether animation effects are defined when the node is expanded or collapsed. True[is] false[No] default false


The node properties are as follows:


1 text: The display of the node.


2 ID: The node ID is important for loading remote data.


3 State: Node status, ' Open ' or ' closed ', default to ' open '. When set to ' close ', the node contains child nodes, and the remote site is loaded (not triggered and reloaded).


4) Attributes: Adds custom attributes for the node.


5) Children: defines some byte points in the form of array nodes.


The events are as follows:


1) OnClick:


Activated when a user clicks on a node, the node parameter contains the following properties:


ID: Node ID


Text: Node literals


Attributes: Node custom attribute.


Target: The DOM object that the destination clicks on.


2) Onloadsuccess:


Activated when data is successfully loaded, this parameter is the same as Jquery.ajax's ' success ' function.


3) Onloaderror:


Activated when data loading data fails, this parameter is the same as Jquery.ajax's ' error ' function.


The method is as follows:


1) Reload: Reloads the tree data.


2) getselected: Gets the selected node and returns it, if no node is selected, returns NULL.


3) Collapse: Collapses a node, which is the DOM object for that node.


4) Expand: Expands a node that is the DOM object for that node.


5) Append: Append some child nodes to a parent node.


Param has two properties:


Parent:dom the object, appending it as the parent node (them).


Data:array, or node data.


6 Remove: Deletes it and the child node below it, which is the DOM object of the node.





6. Table Easyui-datagrid generates a table.


The properties are as follows:


1 title: The header text of the DataGrid panel.


2 Iconcls: A CSS class that will provide a background picture as the title icon.


3 border: When True, displays the border of the DataGrid panel.


4 Width: Panel widths, automatic column width.


5) Height: The height of the panel, automatic column height.


6) Columns: This DataGrid column configures the object to see the column property for more information.


7) FrozenColumns: Same as the Columns property, but these columns will be pinned to the left.


8) Striped: When true, cells display stripes. Default false.


9 Method: Request remote Data through this type of approach. The default post.


NoWrap: When True, the data is displayed on the same line. The default is true.


One) IDfield: Describes which field is an identity field.


URL: A URL that retrieves data from a remote site.


Loadmsg: When you load data from a remote site, a message is displayed. Default "Processing,please wait ...". Custom overlay.


Pagination: Displays a paging toolbar at the bottom of the DataGrid when True. Default false.


Rownumbers: Displays the line number when true. Default false.


Singleselect: When True, only the currently selected row is allowed. Default false.


Fit: When True, sets the size to accommodate its parent container. Default false.


PageNumber: The number of page numbers that are initialized when the paging property is set. Default starting from 1


PageSize: When the paging property is set, the page size is initialized. Default 10 lines


PageList: Initializes the size selection list for the page when the paging property is set. Default [10,20,30,40,50]


Queryparams: When remote data is requested, additional parameters can also be sent.


Sortname: Defines which columns can be sorted.


SortOrder: Defines the order in which the columns are ordered, only ' ASC ' or ' desc '. The default ASC.


The column property is as follows:


1 title: The column header text.


2 field: The column corresponds to the fields name.


3) Width: column width.


4) RowSpan: Explains how many lines the cell needs.


5) Colspan: Explains how many columns the cell needs.


6) Align: Explains the alignment of column data. ' Left ', ' right ', ' center ' can be used.


7) Sortable: Allows the column to be sorted when true.


8 checkbox: Allows the checkbox to appear when true.


The events are as follows:


1) onloadsuccess: When the remote data is loaded successfully is activated.


2) Onloaderror: Activated when a remote data load discovers some errors.


3) Onclickrow: When the user clicks on a row to activate, the parameter contains:


RowIndex: Click on the row index, starting from 0.


RowData: Click the record for the row.


4) Ondblclickrow: When the user double-clicks a row to activate, the parameter contains:


RowIndex: Click on the row index, starting from 0.


RowData: Click the record for the row.


5) Onsortcolumn: When the user is sorted on a column, the parameter contains:


Sort: Sorts the name of the field.


Order: Sort field type.


6) Onselect: When the user selects a row to activate, the parameter contains:


RowIndex: Click on the row index, starting from 0.


RowData: Click the record for the row.


7) Onunselect: When the user cancels selecting a row activation, the parameter contains:


RowIndex: Click on the row index, starting from 0.


RowData: Click the record for the row.


The method is as follows:


1 options: Returns the Selection object.


2) Resize: resize, generate layout.


3) Reload: Reload data.


4) Fixcolumnsize: fixed column size.


5) LoadData: Loading local data, past rows are deleted.


6) GetSelected: Returns the record of the first selected row, or null if not selected.


7) Getselections: Returns all selected rows, and an empty array is returned when no record is selected.


8) Clearselections: Clears the selection status of all options.


9) SelectRow: Select a row and the row index starts at 0.


Selectrecord: Select a row by passing an ID value parameter.


One) Unselectrow: deselect a row.





7. Div easyui-tabs generates a tab container.


The properties are as follows:


1 width: container widths, automatic column width.


2) Height: height of container, automatic column height.


3) Idseed: The root ID is derived into the tag panel Dom id attribute. Default 0


4) Plain: When True, the tab rendering does not use a container background picture. Default False


5 fit: When True, set the tab size to accommodate its parent container. Default False


6 border: When True, the tab border is displayed.


7) Scrollincrement:


8) Scrollduration:


The events are as follows:


1 OnLoad: Activates when an AJAX tab panel needs to load remote data. This parameter has the same effect as the Jquery.ajax ' success ' function.


2) Onselect: Activates when the user selects a tab panel.


3) OnClose: Activates when a user closes a tab panel.


The method is as follows:


1) Resize: Redraw The layout of the tab container.


2 Add: Add a new tab panel, this option parameter is a configuration object, see tab Panel properties for more information.


3 Close: Closes the tab panel, and the caption parameter displays the object you want to close.


4) Select: Choose a tab panel.


5) Exists: If the tab panel exists, it is displayed.


The tab panel properties are as follows:


1 ID: the TAB panel DOM id attribute.


2) Text: The tab panel title literal.


3 Content: the tab panel contents.


4 href: A URL that loads the remote content to populate the tab panel.


5 cache: When True, the Caching tab panel is valid when the HREF property is set. Default True


6) Icon: Add a CSS class icon to display next to the tab panel title.


7) Closable: When True, the tab panel displays a closed button that can be clicked to close the tab panel. Default False


8) Selected: When True, the tab panel is selected. Default False


9 Width: Panel widths, automatic column width.


) Height: Height of the panel, automatic row height.





8, Div menu-sep to generate a menu separator line.

9. A Easyui-splitbutton generates a menu column.

10, the Div easyui-accordion produces the accordion type Drop-down box. Inherit from panel

11. Select Easyui-combobox generates a combo drop-down box.


The properties are as follows:


1 width: container widths, automatic column width.


2) ListWidth: The width of the combo dropdown box.


3) Listheight: The height of the combo dropdown box.


4) Valuefield: Bind the value name of the underlying data to the combo Drop-down box [value].


5) TextField: Bind the field name of the underlying data to the combo drop-down box [text].


6) Editable: When True, you can type text directly into a text field. The default is true.


7 URL: A URL that loads the list data from the remote.


The events are as follows:


1) onloadsuccess: When the remote data is loaded successfully is activated.


2) Onloaderror: Activated when a remote data load discovers some errors.


2) Onselect: Activates when the user selects a list option.


3) OnChange: Activates when the value of the field changes.


The method is as follows:


1) Select: Choose a value in the Drop-down list.


2) SetValue: Sets the specified value to the field. The ' param ' argument can be a string or a JS object. Note: The JS object contains properties corresponding to the Valuefield and TextField two attributes.


3) GetValue: Gets the value of the field.


4) Reload: Re-request remote list data.





12. Select Easyui-combotree to generate a combo tree box.


The properties are as follows:


1 width: container widths, automatic column width.


2) Treewidth: The width of the tree drop-down box.


3) Treeheight: The height of the tree drop-down box.


4 URL: A URL that loads tree-shaped data from the remote.


The events are as follows:


1) Onselect: Activates when the user selects a tree node.


2) OnChange: Activates when the value of the field changes.


The method is as follows:


1) SetValue: Sets the specified value to the field. The ' param ' parameter can be a tree node ID value or a JS object. Note: The JS object contains attributes corresponding to the ID and text two attributes.


2) GetValue: Gets the value of the field.


3) Reload: Re-request remote list data.





13, Body[div] Easyui-layout generates a layout.


The properties are as follows:


1 title: The Panel header text.


2) Region: Defines the location of the layout panel, containing the following values: North,south, East, west, center.


3 border: Displays the border of the layout panel when True. The default is true.


4 Split: Displays a separator when true to allow the user to change the panel size. Default false.


5 icons: An icon CSS class that displays an icon in the Panel header.


6 href: A URL to load data from the remote site.





14, Div easyui-menu to generate a menu.


The properties are as follows:


1) Zindex:menu Z-index style. Note: The Z-index property sets the stacking order of the elements.


2 Left: Menu start position. Default 0.


3 Top: Menu tops position. Default 0.


4 href: When you click on the menu item, you can display a different URL in the current browser window.


The events are as follows:


1) OnShow: Display menu after activation.


2) Onhide: Hide menu after activation.


The method is as follows:


1 Show: Displays a menu at the specified location. The location contains two parameters:


Left: the new starting position.


Top: The new top-level position.


2 Hide: Hides a menu.





15, a Easyui-menubutton to generate a menu button.


The properties are as follows:


1) Disabled: Disables the button when True. Default false.


2) Plain: Displays a normal effect when true. Default false.


3) Menu: A selector name to create the corresponding menu.


4) Duration: When you hover the button, define the duration of the menu to be displayed in milliseconds. Default 100.





16, input Easyui-numberbox generate a digital input box.


The options are as follows:


1 min: The minimum allowable value. Displays the minimum value when the input value is less than the minimum value.


2 Max: The maximum allowable value. Displays the maximum value when the input value is greater than the maximum value.


3) Precision: The exact number of decimal places after the separator. Integers append the number of decimal places by default.








JS Definition:


1. window generates a window.

2. Tree produces a structure of trees.

3. The DataGrid generates a table.

4. ComboBox generates a combo Drop-down box.

5. Combotree generates a combo tree box.

6. dialog generates a dialog box. It inherits from window


The private properties are as follows:


1 title: the dialog box header text. Default "New Dialog".


2) Collapsible: The collapse button can be displayed when True. Default false.


3) Minimizable: When True, the minimized button can be displayed. Default false.


4) Maximizable: When True, the Maximize button can be displayed. Default false.


5 resizable: Can redraw the dialog box size when True. Default false.


6 Toolbar: The toolbar is placed at the top of the dialog box, and each toolbar contains: text, ICONCLS, disabled, handler, and so on.


7 buttons: This button is placed at the bottom of the dialog box, each button contains: text, ICONCLS, handler and other properties.





7. Draggable generates a block that can be dragged freely.


The properties are as follows:


1) Handle: Select "#id" to drag.


2) Disabled: Stop dragging freely when true. Default false.


3 Edge: Start by dragging the width when dragging the block. Default 0.


4 axis: When the drag block is moved, the axis is defined, the optional value is ' V ' or ' h ', which is set to null when the ' V ' and ' h ' are exceeded.


The events are as follows:


1) Onstartdrag: Activates when the target object starts dragging.


2) Ondrag: active during drag. Returning false will not actually drag it (the position).


3) Onstopdrag: Activates when the target object stops dragging.





8. LinkButton generates a chain-type button.

9. Messager generates a message box.


The options are as follows:


1 OK: Show the button text.


2) Cancel: Displays the Cancel button text.


The method is as follows:


1 Show: A message box appears in the lower-right corner of the screen. The option parameter is a configuration object that includes:


ShowType: Defines the mode that the message box displays, optional values include: null,slide,fade,show. Default slide.


Showspeed: Defines when a message box finishes displaying. Default 600 milliseconds.


Width: Defines how wide the message box is. Default 250.


Height: Defines how high the message box is. Default 100.


Msg: Defines the text that the message box displays.


Title: Displays the caption text in the message box panel header.


Timeout: If defined as 0, the message box will not automatically close unless the user manually closes it. If defined as a value other than 0, the message box will automatically close it at the end of the timeout. Unit milliseconds.


2 alert: Displays a print window. Its parameters are as follows:


Title: Displays the caption text in the header.


Msg: Displays text content.


Icon: Display icons. Optional value: error,question,info,warning.


FN: Triggers the callback function when the window closes.


3) Confirm: Displays a confirmation message box containing the OK and Cancel buttons. Parameters include:


Title: Displays the caption text in the header.


Msg: Displays text content.


FN (b): callback function, when the user clicks the OK button, returns True before the function is processed, the other buttons return false and do not process.


4) Prompt: Displays a message box that contains the OK and Cancel buttons and prompts the user to enter some text. Parameters include:


Title: Displays the caption text in the header.


Msg: Displays text content.


FN (val): This callback function handles the parameter values entered by the user.





10. Pagination generates a page number bar.


The properties are as follows:


1 Total: The number of records that are set when the page bar is created. Default 1.


2) PageSize: Page size. Default 10.


3) PageNumber: The page number displayed when pagination is created. Default 1.


4) PageList: Users can change the size of the page. You can also change the default size defined by this property. Default [10,20,30,50].


5) Loading: Defines whether the load is being loaded. Default false.


6) Buttons: Defines the custom button, each button contains two attributes:


ICONCLS: The CSS class will display a background icon.


Handler: Triggers a handler function when the button is clicked.


7) Beforepagetext: Displays a label text before the input component.


8) Afterpagetext: Displays a label text after the input component.


9) Displaymsg: Displays a page information.


The method is as follows:


1) Onselectpage: Active when the user selects a new page. The callback function includes two parameters:


PageNumber: The number of the new page.


PageSize: The size of the new page.