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:

Download jQuery EasyUI 1.2.1

Current Version: 1.2.1

ChangeLog:

  • Bug
    • easyloader: Some dependencies cannot be loaded by their order. fixed.
    • tree: The checkbox is setted incorrectly when removing a node. fixed.
    • dialog: The dialog layout incorrectly when ‘closed’ property is setted to true. fixed.
  • Improvement
    • parser: Add onComplete callback function that can indicate whether the parse action is complete.
    • menu: Add onClick callback function and some other methods.
    • tree: Add some useful methods.
    • tree: Drag and Drop feature is supported now.
    • tree: Add onContextMenu callback function.
    • tabs: Add onContextMenu callback function.
    • tabs: Add ‘tools’ property that can create buttons on right bar.
    • datagrid: Add onHeaderContextMenu and onRowContextMenu callback functions.
    • datagrid: Custom view is supported.
    • treegrid: Add onContextMenu callback function and append,remove methods.

License: GPLv3

Auto parse classes:

  • easyui-linkbutton
  • easyui-accordion
  • easyui-menu
  • easyui-menubutton
  • easyui-splitbutton
  • easyui-layout
  • easyui-panel
  • easyui-tabs
  • easyui-tree
  • easyui-window
  • easyui-dialog
  • easyui-datagrid
  • easyui-combobox
  • easyui-combotree
  • easyui-numberbox
  • easyui-validatebox
  • easyui-numberspinner
  • easyui-timespinner
  • easyui-calendar
  • easyui-datebox

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
  • parser

Download this EasyUI package:

Download jQuery EasyUI 1.2

Current Version: 1.2

ChangeLog:

  • Improvement
    • tree: Add cascadeCheck,onlyLeafCheck properties and select event.
    • combobox: Enable multiple selection.
    • combotree: Enable multiple selection.
    • tabs: Remember the trace of selection, when current tab panel is closed, the previous selected tab will be selected.
    • datagrid: Extend from panel, so many properties defined in panel can be used for datagrid.
  • New Plugins
    • treegrid: Represent tabular data in hierarchical view, combines tree view and datagrid.
    • combo: The basic component that allow user to extend their combo component such as combobox,combotree,etc.
    • combogrid: Combines combobox with drop-down datagrid component.
    • spinner: The basic plugin to create numberspinner,timespinner,etc.
    • numberspinner: The numberbox that allow user to change value by clicking up and down spin buttons.
    • timespinner: The time selector that allow user to quickly inc/dec a time.

License: GPLv3

Auto parse classes:

  • easyui-linkbutton
  • easyui-accordion
  • easyui-menu
  • easyui-menubutton
  • easyui-splitbutton
  • easyui-layout
  • easyui-panel
  • easyui-tabs
  • easyui-tree
  • easyui-window
  • easyui-dialog
  • easyui-datagrid
  • easyui-combobox
  • easyui-combotree
  • easyui-numberbox
  • easyui-validatebox
  • easyui-numberspinner
  • easyui-timespinner
  • easyui-calendar
  • easyui-datebox

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
  • parser

Download this EasyUI package: jquery-easyui-1.2.zip