Latest web development tutorials
×

jQuery EasyUI Tutorial

jQuery EasyUI Tutorial jQuery EasyUI Introduction

jEasyUI application

jEasyUI Create a CRUD application jEasyUI Create a CRUD data grid jEasyUI Form CRUD application jEasyUI Create an RSS reader

jEasyUI Drag and drop

jEasyUI Basic drag and drop jEasyUI Create a drag-and-drop shopping cart jEasyUI Create a school curriculum

jEasyUI Menus and buttons

jEasyUI Create a simple menu jEasyUI Create a link button jEasyUI Create a menu button jEasyUI Create a split button

jEasyUI layout

jEasyUI Create a border layout jEasyUI Create a complex layout jEasyUI Creates a fold panel jEasyUI Create a tab page jEasyUI Dynamically add a tab jEasyUI Add the AutoPlay tab jEasyUI Create the XP style left panel

jEasyUI Data grid

jEasyUI Convert HTML tables to data grids jEasyUI Get the selected row data jEasyUI Add the query function jEasyUI Add a toolbar jEasyUI Create complex toolbars jEasyUI Sets the frozen column jEasyUI Dynamically change columns jEasyUI Format the column jEasyUI Set sort jEasyUI Custom sorting jEasyUI Create a column combination jEasyUI Add a check box jEasyUI Custom tab jEasyUI Enable in-line editing jEasyUI Extension editor jEasyUI Column operation jEasyUI Merge Cells jEasyUI Create a custom view jEasyUI Create a footer summary jEasyUI Condition Sets the line background color jEasyUI Create an attribute grid jEasyUI The extended line shows the details jEasyUI Create a subgrid jEasyUI Display massive data jEasyUI Add a paging component

jEasyUI window

jEasyUI Create a simple window jEasyUI Customize the Window Toolbar jEasyUI Window and layout jEasyUI Create a dialog box jEasyUI Customize the dialog box

jEasyUI Tree menu

jEasyUI Use the markup to create a tree menu jEasyUI Create an asynchronous tree menu jEasyUI Tree menu to add nodes jEasyUI Create a tree menu with check boxes jEasyUI Tree menu drag and drop control jEasyUI The Tree menu loads the parent / child nodes jEasyUI Create the base tree grid jEasyUI Create a complex tree grid jEasyUI Dynamic loading of tree jEasyUI The tree grid adds pagination jEasyUI Tree-lazy lazy-loading node

jEasyUI Form

jEasyUI Create an asynchronous submission form jEasyUI Form validation jEasyUI Create a tree drop-down box jEasyUI Format the drop-down box jEasyUI Filter down the data grid

jEasyUI Reference Manual

jQuery EasyUI Plugin jQuery EasyUI Extended

jQuery EasyUI plugin

jQuery EasyUI provided for creating cross-browser web pages complete set of components, including powerful datagrid (data grid), treegrid (tree form), panel (Panel), combo (drop-down combination) and so on. Users can combine these components can also be used alone one.

Plug-in list

Base (base)

Layout (Layout)

Menu (Menu) and Button (Button)

Form (Form)

Window (Window)

DataGrid (Data Grid) and Tree (Tree)

Widget

Easyui Each component has properties, methods and events. Users can easily extend to those components.

Attributes

It is defined in the jQuery.fn. {Plugin} .defaults. For example, dialog attributes are defined in jQuery.fn.dialog.defaults.

event

Event (callback function) is defined in jQuery.fn. {Plugin} .defaults.

method

Method call syntax: $ ( 'selector') plugin ( 'method', parameter);.

among them:

  • jquery selector is the object selector.
  • plugin is a plug-in name.
  • method with plug to match the existing method.
  • parameter is a parameter object can be an object, a string ...

The method is defined in jQuery.fn. {Plugin} .methods. Each method has two parameters: jq and param. The first parameter 'jq' is necessary, a reference to the jQuery object. The second parameter 'param' refers to the actual method parameters passed. For example, to extend dialog component method called 'mymove' approach, as follows: 

$ .extend ($. Fn.dialog.methods, {
    mymove: function (jq, newposition) {
		return jq.each (function () {
			$ (This) .dialog ( 'move', newposition);
		});
    }
});

Now you can call 'mymove' method to move the dialog box (dialog) to the specified location: 

$ ( '# Dd'). Dialog ( 'mymove', {
    left: 200,
    top: 100
});

I started using jQuery EasyUI

Download Library, and references EasyUI CSS and JavaScript files in your page. 

<Link rel = "stylesheet" type = "text / css" href = "easyui / themes / default / easyui.css">
<Link rel = "stylesheet" type = "text / css" href = "easyui / themes / icon.css">
<Script type = "text / javascript" src = "easyui / jquery-1.7.2.min.js"> </ script>
<Script type = "text / javascript" src = "easyui / jquery.easyui.min.js"> </ script>

Once you reference EasyUI necessary files, you can define a EasyUI components through the use of tags or JavaScript. For example, to a top panel with a folding function, you need to write the HTML code as follows: 

<Div id = "p" class = "easyui-panel" style = "width: 500px; height: 200px; padding: 10px;"
    title = "My Panel" iconCls = "icon-save" collapsible = "true">
    The panel content
</ Div>

When creating a component by marking, 'data-options' attribute is used to support the property name since Version 1.3 HTML5 compatible. So you can rewrite the above code as follows: 

<Div id = "p" class = "easyui-panel" style = "width: 500px; height: 200px; padding: 10px;"
    title = "My Panel" data-options = "iconCls: 'icon-save', collapsible: true">
    The panel content
</ Div>

The following code shows how to create a bound combo box 'onSelect' event. 

<Input class = "easyui-combobox" name = "language"
    data-options = "
    url: 'combobox_data.json',
    valueField: 'id',
    textField: 'text',
    panelHeight: 'auto',
    onSelect: function (record) {
    alert (record.text)
    } ">