jQuery EasyUI framework helps you build your web pages easily.

  • easyui is a collection of user-interface plugin based on jQuery.
  • easyui provides essential functionality for building modern, interactive, javascript applications.
  • using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
  • complete framework for HTML5 web page.
  • easyui save your time and scales while developing your products.
  • easyui is very easy but powerful.

its currently still not supporting a responsive design but I hope the developer will do it soon. jEasyUI is good for a Backend system (as i think its aimed for). some cool features i use most are Datagrid, Layout, Combogrid and Calender. Datagrid is probably the most wanted thing to make our live easier. Its 'fully' customizable, Ajax support, cool pagination etc.

Here some screenshots

Layout
Screenshot from 2014-05-08 20:27:22

Datagrid

Screenshot from 2014-05-08 20:12:03 

Screenshot from 2014-05-08 20:16:58


Combogrid, dynamic combobox with a filter

Screenshot from 2014-05-08 20:26:45
Calender
Screenshot from 2014-05-08 20:41:04Screenshot from 2014-05-08 20:39:18


here's an example of code to display data into Datagrid in PHP - Codeigniter
Controller
public function get_product() {

$offset = isset($_POST['page']) ? intval($_POST['page']) : 1;
$limit   = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$search= isset($_POST['search']) ? $_POST['itemid'] : '';
$offset = ($offset-1)*$limit;
$data = $this->master_data_model->get_product($offset,$limit,$search);
$i = 0;
$rows = array(); 
foreach ($data ['product'] as $r) {
$rows[$i]['code'] = $r->code;
$rows[$i]['product_name'] = $r->product_name;
$rows[$i]['price'] = $r->price;

$i++;
}
echo json_encode(array('total'=>$data['count'],'rows'=>$rows));
}

Views
<table id="dg" title="Product" class="easyui-datagrid" style="width:auto;height:400px"
url="<?php echo base_url().'index.php/master_data/get_product'?>" toolbar="#toolbar" pagination="true" rownumbers="false" fitColumns="true" singleSelect="true" checkBox="true" striped="true" remoteSort="false" nowrap="false">
<thead>
<tr>
<th field="ck" checkbox="true"></th> 
<th field="code" width="200"  sortable="true"> <b>Code</b> </th>
<th field="product_name" width="700" sortable="true"> <b>Product Name</b> </th>
<th field="price" width="100" sortable="true"> <b>Price</b> </th>

</tr>
</thead> </table>

That's it. Try it now :D