Download jQuery EasyUI 1.3.1

Current Version: 1.3.1

ChangeLog

Bug
  • datagrid: Setting the ‘pageNumber’ property is not valid. fixed.
  • datagrid: The id attribute of rows isn’t adjusted properly while calling ‘insertRow’ or ‘deleteRow’ method.
  • dialog: When load content from ‘href’, the script will run twice. fixed.
  • propertygrid: The editors that extended from combo can not accept its changed value. fixed.
Improvement
  • droppable: Add ‘disabled’ property.
  • droppable: Add ‘options’,’enable’ and ‘disable’ methods.
  • tabs: The tab panel tools can be changed by calling ‘update’ method.
  • messager: When show a message window, the user can define the window position by applying ‘style’ property.
  • window: Prevent script on window body from running twice.
  • window: Add ‘hcenter’,’vcenter’ and ‘center’ methods.
  • tree: Add ‘onBeforeCheck’ callback event.
  • tree: Extend the ‘getChecked’ method to allow users to get ‘checked’,’unchecked’ or ‘indeterminate’ nodes.
  • treegrid: Add ‘update’ method to update a specified node.
  • treegrid: Add ‘insert’ method to insert a new node.
  • treegrid: Add ‘pop’ method to remove a node and get the removed node data.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
parser

Download this EasyUI package:

EasyUI Portal Extension

Step 1: Create an HTML Page

    <div id="pp" style="width:800px;height:500px;">
        <div style="width:33%"></div>
        <div style="width:33%"></div>
        <div style="width:33%"></div>
    </div>

Step 3: Add panel widgets to this portal

    // create the panel
    var p = $('<div></div>').appendTo('body');
    p.panel({
        title: 'My Title',
        height:150,
        closable: true,
        collapsible: true
    });

    // add the panel to portal
    $('#pp').portal('add', {
        panel: p,
        columnIndex: 0
    });

Properties

Name Type Description Default
width number The width of portal. auto
height number The height of portal. auto
border boolean Defines if to show portal border. false
fit boolean When true to set the portal size fit it’s parent container. false

Events

Name Parameters Description
onStateChange none Fires when users drag and drop a panel.
onResize width,height Fires when the portal size is changed.

Methods

Name Parameter Description
options none Return the options object.
resize param Set the portal size, the ‘param’ parameter contains following properties:
width: the new width of portal.
height: the new height of portal.
getPanels columnIndex Get the specified column panels, when columnIndex parameter is not assigned, return all panels.
add param Add a new panel, the ‘param’ parameter contains following properties:
panel: the panel object to be added.
columnIndex: the column index to be inserted.
remove panel Remove and destroy the specified panel.
disableDragging panel Disable the dragging feature for a panel.
enableDragging panel Enable the dragging feature for a panel.

Download the EasyUI Extension:

Download jQuery EasyUI 1.3

Download jQuery EasyUI 1.3

Current Version: 1.3

ChangeLog

Bug
  • combogrid: When set to ‘remote’ query mode, the ‘queryParams’ parameters can’t be sent to server. fixed.
  • combotree: The tree nodes on drop-down panel can not be unchecked while calling ‘clear’ method. fixed.
  • datetimebox: Setting ‘showSeconds’ property to false cannot hide seconds info. fixed.
  • datagrid: Calling ‘mergeCells’ method can’t auto resize the merged cell while header is hidden. fixed.
  • dialog: Set cache to false and load data via ajax, the content cannot be refreshed. fixed.
Improvement
  • The HTML5 ‘data-options’ attribute is available for components to declare all custom options, including properties and events.
  • More detailed documentation is available.
  • panel: Prevent script on panel body from running twice.
  • accordion: Add ‘getPanelIndex’ method.
  • accordion: The tools can be added on panel header.
  • datetimebox: Add ‘timeSeparator’ option that allows users to define the time separator.
  • pagination: Add ‘refresh’ and ‘select’ methods.
  • datagrid: Auto resize the column width to fit the contents when the column width is not defined.
  • datagrid: Double click on the right border of columns to auto resize the columns to the contents in the columns.
  • datagrid: Add ‘autoSizeColumn’ method that allows users to adjust the column width to fit the contents.
  • datagrid: Add ‘getChecked’ method to get all rows where the checkbox has been checked.
  • datagrid: Add ‘selectOnCheck’ and ‘checkOnSelect’ properties and some checking methods to enhance the row selections.
  • datagrid: Add ‘pagePosition’ property to allow users to display pager bar at either top,bottom or both places of the grid.
  • datagrid: The buffer view and virtual scroll view are supported to display large amounts of records without pagination.
  • tabs: Add ‘disableTab’ and ‘enableTab’ methods to allow users to disable or enable a tab panel.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
parser

Download this EasyUI package:

Extends two methods of EasyUI tree get parents nodes

$.extend($.fn.tree.methods,{
getCheckedExt: function(jq){
var checked = $(jq).tree(“getChecked”);
var checkbox2 = $(jq).find(“span.tree-checkbox2”).parent();
$.each(checkbox2,function(){
var node = $.extend({}, $.data(this, “tree-node”), {
target : this
});
checked.push(node);
});
return checked;
},
getSolidExt:function(jq){
var checked =[];
var checkbox2 = $(jq).find(“span.tree-checkbox2”).parent();
$.each(checkbox2,function(){
var node = $.extend({}, $.data(this, “tree-node”), {
target : this
});
checked.push(node);
});
return checked;
}
});

[demos]Build CRUD Application with jQuery EasyUI

It has become a common necessily for web application to collect data and manage it properly. CRUD allows us to generate pages to list and edit database records. This tutorial will show you how to implement a CRUD DataGrid using jQuery EasyUI framework.

We will use following plugins:

  • datagrid: show the user list data.
  • dialog: create or edit a single user information.
  • form: used to submit form data.
  • messager: to show some operation messages.

Step 1: Prepare database

We will use MySql database to store user information. Create database and ‘users’ table.

Step 2: Create DataGrid to display user information

Create the DataGrid with no javascript code.

  1. <table id=”dg” title=”My Users” class=”easyui-datagrid” style=”width:550px;height:250px”
  2.         url=”get_users.php”
  3.         toolbar=”#toolbar”
  4.         rownumbers=”true” fitColumns=”true” singleSelect=”true”>
  5.     <thead>
  6.         <tr>
  7.             <th field=”firstname” width=”50″>First Name</th>
  8.             <th field=”lastname” width=”50″>Last Name</th>
  9.             <th field=”phone” width=”50″>Phone</th>
  10.             <th field=”email” width=”50″>Email</th>
  11.         </tr>
  12.     </thead>
  13. </table>
  14. <div id=”toolbar”>
  15.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-add” plain=”true” onclick=”newUser()”>New User</a>
  16.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-edit” plain=”true” onclick=”editUser()”>Edit User</a>
  17.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-remove” plain=”true” onclick=”removeUser()”>Remove User</a>
  18. </div>

We don’t need to write any javascript code and we can show the user list as following image:

The DataGrid use the ‘url’ property that is assigned to ‘get_users.php’ to retrieve data from server.

Code of get_users.php file

  1. $rs = mysql_query(‘select * from users’);
  2. $result = array();
  3. while($row = mysql_fetch_object($rs)){
  4.     array_push($result, $row);
  5. }
  6. echo json_encode($result);

Step 3: Create form dialog

To create or edit a user, we use the same dialog.

  1. <div id=”dlg” class=”easyui-dialog” style=”width:400px;height:280px;padding:10px 20px”
  2.         closed=”true” buttons=”#dlg-buttons”>
  3.     <div class=”ftitle”>User Information</div>
  4.     <form id=”fm” method=”post”>
  5.         <div class=”fitem”>
  6.             <label>First Name:</label>
  7.             <input name=”firstname” class=”easyui-validatebox” required=”true”>
  8.         </div>
  9.         <div class=”fitem”>
  10.             <label>Last Name:</label>
  11.             <input name=”lastname” class=”easyui-validatebox” required=”true”>
  12.         </div>
  13.         <div class=”fitem”>
  14.             <label>Phone:</label>
  15.             <input name=”phone”>
  16.         </div>
  17.         <div class=”fitem”>
  18.             <label>Email:</label>
  19.             <input name=”email” class=”easyui-validatebox” validType=”email”>
  20.         </div>
  21.     </form>
  22. </div>
  23. <div id=”dlg-buttons”>
  24.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-ok” onclick=”saveUser()”>Save</a>
  25.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-cancel” onclick=”javascript:$(‘#dlg’).dialog(‘close’)”>Cancel</a>
  26. </div>

The dialog is created with no javascript code also.

Step 4: Implement creating and editing a user

When create a user, we open the dialog and clear form data.

  1. function newUser(){
  2.     $(‘#dlg’).dialog(‘open’).dialog(‘setTitle’,’New User’);
  3.     $(‘#fm’).form(‘clear’);
  4.     url = ‘save_user.php’;
  5. }

When edit a user, we open the dialog and load form data from the selected datagrid row.

  1. var row = $(‘#dg’).datagrid(‘getSelected’);
  2. if (row){
  3.     $(‘#dlg’).dialog(‘open’).dialog(‘setTitle’,’Edit User’);
  4.     $(‘#fm’).form(‘load’,row);
  5.     url = ‘update_user.php?id=’+row.id;
  6. }

The ‘url’ stores the URL address where the form will post to when save the user data.

Step 5: Save the user data

To save the user data we use the following code:

  1. function saveUser(){
  2.     $(‘#fm’).form(‘submit’,{
  3.         url: url,
  4.         onSubmit: function(){
  5.             return $(this).form(‘validate’);
  6.         },
  7.         success: function(result){
  8.             var result = eval(‘(‘+result+’)’);
  9.             if (result.success){
  10.                 $(‘#dlg’).dialog(‘close’);      // close the dialog
  11.                 $(‘#dg’).datagrid(‘reload’);    // reload the user data
  12.             } else {
  13.                 $.messager.show({
  14.                     title: ‘Error’,
  15.                     msg: result.msg
  16.                 });
  17.             }
  18.         }
  19.     });
  20. }

Before submit the form, the ‘onSubmit’ function will be called, in which we can validate the form field value. When the form field values are submited successfully, close the dialog and reload the datagrid data.

Step 6: Remove a user

To remove a user, we use the following code:

  1. function removeUser(){
  2.     var row = $(‘#dg’).datagrid(‘getSelected’);
  3.     if (row){
  4.         $.messager.confirm(‘Confirm’,’Are you sure you want to remove this user?’,function(r){
  5.             if (r){
  6.                 $.post(‘remove_user.php’,{id:row.id},function(result){
  7.                     if (result.success){
  8.                         $(‘#dg’).datagrid(‘reload’);    // reload the user data
  9.                     } else {
  10.                         $.messager.show({   // show error message
  11.                             title: ‘Error’,
  12.                             msg: result.msg
  13.                         });
  14.                     }
  15.                 },’json’);
  16.             }
  17.         });
  18.     }
  19. }

Before remove a row, we will display a confirm dialog to let user to determine whether to really remove the row data. When remove data successfully, call ‘reload’ method to refresh the datagrid data.

Step 7: Run the Code

Run the code in your browser with MySQL started.

So, you now know the basics of CRUD in jQuery EasyUI framework. Press below link to start the demo application.

Download the EasyUI example:

Download jQuery EasyUI 1.2.6

Download jQuery EasyUI 1.2.6

Current Version: 1.2.6

ChangeLog

Bug
  • tabs: Call ‘add’ method with ‘selected:false’ option, the added tab panel is always selected. fixed.
  • treegrid: The ‘onSelect’ and ‘onUnselect’ events can’t be triggered. fixed.
  • treegrid: Cannot display zero value field. fixed.
Improvement
  • propertygrid: Add ‘expandGroup’ and ‘collapseGroup’ methods.
  • layout: Allow users to create collapsed layout panels by assigning ‘collapsed’ property to true.
  • layout: Add ‘add’ and ‘remove’ methods that allow users to dynamically add or remove region panel.
  • layout: Additional tool icons can be added on region panel header.
  • calendar: Add ‘firstDay’ option that allow users to set first day of week. Sunday is 0, Monday is 1, …
  • tree: Add ‘lines’ option, true to display tree lines.
  • tree: Add ‘loadFilter’ option that allow users to change data format before loading into the tree.
  • tree: Add ‘loader’ option that allow users to define how to load data from remote server.
  • treegrid: Add ‘onClickCell’ and ‘onDblClickCell’ callback function options.
  • datagrid: Add ‘autoRowHeight’ property that allow users to determine if set the row height based on the contents of that row.
  • datagrid: Improve performance to load large data set.
  • datagrid: Add ‘loader’ option that allow users to define how to load data from remote server.
  • treegrid: Add ‘loader’ option that allow users to define how to load data from remote server.
  • combobox: Add ‘onBeforeLoad’ callback event function.
  • combobox: Add ‘loader’ option that allow users to define how to load data from remote server.
  • Add support for other loading mode such as dwr,xml,etc.
New Plugins
  • slider: Allows the user to choose a numeric value from a finite range.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
parser

Download this EasyUI package:

Download jQuery EasyUI 1.2.5

Download jQuery EasyUI 1.2.5

Current Version: 1.2.5

ChangeLog

Bug
  • tabs: When add a new tab panel with href property, the content page is loaded twice. fixed.
  • form: Failed to call ‘load’ method to load form input with complex name. fixed.
  • draggable: End drag in ie9, the cursor cannot be restored. fixed.
Improvement
  • panel: The tools can be defined via html markup.
  • tabs: Call ‘close’ method to close specified tab panel, users can pass tab title or index of tab panel. Other methods such ‘select’,’getTab’ and ‘exists’ are similar to ‘close’ method.
  • tabs: Add ‘getTabIndex’ method.
  • tabs: Users can define mini tools on tabs.
  • tree: The mouse must move a specified distance to begin drag and drop operation.
  • resizable: Add ‘options’,’enable’ and ‘disable’ methods.
  • numberbox: Allow users to change number format.
  • datagrid: The subgrid is supported now.
  • searchbox: Add ‘selectName’ method to select searching type name.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
parser

Download this EasyUI package:

Download jQuery EasyUI 1.2.4

Download jQuery EasyUI 1.2.4

Current Version: 1.2.4

ChangeLog

Bug
  • menu: The menu position is wrong when scroll bar appears. fixed.
  • accordion: Cannot display the default selected panel in jQuery 1.6.2. fixed.
  • tabs: Cannot display the default selected tab panel in jQuery 1.6.2. fixed.
Improvement
  • menu: Allow users to disable or enable menu item.
  • combo: Add ‘delay’ property to set the delay time to do searching from the last key input event.
  • treegrid: The ‘getEditors’ and ‘getEditor’ methods are supported now.
  • treegrid: The ‘loadFilter’ option is supported now.
  • messager: Add ‘progress’ method to display a message box with a progress bar.
  • panel: Add ‘extractor’ option to allow users to extract panel content from ajax response.
New Plugins
  • searchbox: Allow users to type words into box and do searching operation.
  • progressbar: To display the progress of a task.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
parser

Download this EasyUI package:

Download jQuery EasyUI 1.2.3

Download jQuery EasyUI 1.2.3

Current Version: 1.2.3

ChangeLog

Bug
  • window: Cannot resize the window with iframe content. fixed.
  • tree: The node will be removed when dragging to its child. fixed.
  • combogrid: The onChange event fires multiple times. fixed.
  • accordion: Cannot add batch new panels when animate property is set to true. fixed.
Improvement
  • treegrid: The footer row and row styler features are supported now.
  • treegrid: Add ‘getLevel’,’reloadFooter’,’getFooterRows’ methods.
  • treegrid: Support root nodes pagination and editable features.
  • datagrid: Add ‘getFooterRows’,’reloadFooter’,’insertRow’ methods and improve editing performance.
  • datagrid: Add ‘loadFilter’ option that allow users to change original source data to standard data format.
  • draggable: Add ‘onBeforeDrag’ callback event function.
  • validatebox: Add ‘remote’ validation type.
  • combobox: Add ‘method’ option.
New Plugins
  • propertygrid: Allow users to edit property value in datagrid.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
parser

Download this EasyUI package:

Download jQuery EasyUI 1.2.2

Download jQuery EasyUI 1.2.2

Current Version: 1.2.2

ChangeLog

  • Bug
    • datagrid: Apply fitColumns cannot work fine while set checkbox column. fixed.
    • datagrid: The validateRow method cannot return boolean type value. fixed.
    • numberbox: Cannot fix value in chrome when min or max property isn’t defined. fixed.
  • Improvement
    • menu: Add some crud methods.
    • combo: Add hasDownArrow property to determine whether to display the down arrow button.
    • tree: Supports inline editing.
    • calendar: Add some useful methods such as ‘resize’, ‘moveTo’ etc.
    • timespinner: Add some useful methods.
    • datebox: Refactoring based on combo and calendar plugin now.
    • datagrid: Allow users to change row style in some conditions.
    • datagrid: Users can use the footer row to display summary information.
  • New Plugins
    • datetimebox: Combines datebox with timespinner component.

License: GPLv3

Plugins:

  • draggable
  • droppable
  • resizable
  • panel
  • tabs
  • accordion
  • layout
  • linkbutton
  • menubutton
  • splitbutton
  • menu
  • form
  • combo
  • combobox
  • combotree
  • combogrid
  • numberbox
  • validatebox
  • spinner
  • numberspinner
  • timespinner
  • window
  • dialog
  • datagrid
  • pagination
  • tree
  • treegrid
  • calendar
  • datebox
  • datetimebox
  • parser

Download this EasyUI package: