mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 20:29:29 +00:00
Merge branch 'ci' of https://github.com/FH-Complete/FHC-Core into ci
Conflicts: application/config/autoload.php application/controllers/api/v1/Person.php application/models/person/Person_model.php
This commit is contained in:
Paminger
@@ -58,9 +58,14 @@ $autoload['packages'] = array();
|
||||
|
|
||||
| $autoload['libraries'] = array('user_agent' => 'ua');
|
||||
*/
|
||||
|
||||
//$autoload['libraries'] = array();
|
||||
$autoload['libraries'] = array('session', 'FHC_Auth');
|
||||
|
||||
//$autoload['libraries'] = array();
|
||||
$autoload['libraries'] = array('session');
|
||||
|
||||
|
||||
/*
|
||||
| -------------------------------------------------------------------
|
||||
| Auto-load Drivers
|
||||
|
||||
@@ -301,7 +301,7 @@ $config['rest_keys_table'] = 'ci_apikey';
|
||||
| ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
|
||||
|
|
||||
*/
|
||||
$config['rest_enable_keys'] = TRUE;
|
||||
$config['rest_enable_keys'] = FALSE;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* FH-Complete
|
||||
*
|
||||
* @package FHC-API
|
||||
* @author FHC-Team
|
||||
* @copyright Copyright (c) 2016, fhcomplete.org
|
||||
* @license GPLv3
|
||||
* @link http://fhcomplete.org
|
||||
* @since Version 1.0
|
||||
* @filesource
|
||||
*/
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
defined('BASEPATH') || exit('No direct script access allowed');
|
||||
|
||||
class Kontakt extends REST_Controller
|
||||
{
|
||||
|
||||
//public $session;
|
||||
/**
|
||||
* Person API constructor.
|
||||
*/
|
||||
public function __construct()
|
||||
{
|
||||
parent::__construct();
|
||||
|
||||
$this->load->model('kontakt/Kontakt_model');
|
||||
}
|
||||
|
||||
public function kontaktPerson_get()
|
||||
{
|
||||
$result = $this->Kontakt_model->getKontaktPerson($this->get("person_id"));
|
||||
if($result != FALSE)
|
||||
{
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Kontakt found.'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
}
|
||||
else
|
||||
{
|
||||
$payload = [
|
||||
'success' => false,
|
||||
'message' => 'Could not find Kontakt.'
|
||||
];
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
public function kontakt_post()
|
||||
{
|
||||
$result = $this->Kontakt_model->saveKontakt($this->post());
|
||||
if($result != FALSE)
|
||||
{
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Kontakt saved.'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
}
|
||||
else
|
||||
{
|
||||
$payload = [
|
||||
'success' => false,
|
||||
'message' => 'Could not save Kontakt.'
|
||||
];
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -11,37 +11,46 @@
|
||||
* @since Version 1.0
|
||||
* @filesource
|
||||
*/
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
defined('BASEPATH') || exit('No direct script access allowed');
|
||||
|
||||
class Person extends APIv1_Controller
|
||||
{
|
||||
//public $session;
|
||||
|
||||
//public $session;
|
||||
/**
|
||||
* Person API constructor.
|
||||
*/
|
||||
public function __construct()
|
||||
{
|
||||
parent::__construct();
|
||||
parent::__construct();
|
||||
|
||||
$this->load->model('person/person_model');
|
||||
$this->load->model('person/person_model');
|
||||
}
|
||||
|
||||
public function person_get()
|
||||
{
|
||||
//if (!$this->session_model->validate($this->get('session_id'), $this->get('device_id')))
|
||||
// $this->response(array(['success' => false, 'message' => 'access denied']), REST_Controller::HTTP_UNAUTHORIZED);
|
||||
//if (!$this->session_model->validate($this->get('session_id'), $this->get('device_id')))
|
||||
// $this->response(array(['success' => false, 'message' => 'access denied']), REST_Controller::HTTP_UNAUTHORIZED);
|
||||
|
||||
$code = $this->get('code');
|
||||
|
||||
if (!is_null($code))
|
||||
$result = $this->person_model->getPersonByCode($code);
|
||||
else
|
||||
$result = $this->person_model->getPerson();
|
||||
// var_dump($result[0]);
|
||||
$code = $this->get('code');
|
||||
$person_id = $this->get('person_id');
|
||||
|
||||
if (!is_null($code))
|
||||
{
|
||||
$result = $this->person_model->getPersonByCode($code);
|
||||
}
|
||||
elseif (!is_null($person_id))
|
||||
{
|
||||
$result = $this->person_model->getPerson($person_id);
|
||||
}
|
||||
else
|
||||
{
|
||||
$result = $this->person_model->getPerson();
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
if ($result['err'])
|
||||
{
|
||||
$payload = [
|
||||
@@ -60,8 +69,114 @@ class Person extends APIv1_Controller
|
||||
$payload['data'] = $result;
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
=======
|
||||
if (empty($result))
|
||||
{
|
||||
$payload = [
|
||||
'success' => false,
|
||||
'message' => 'Person not found'
|
||||
];
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
else
|
||||
{
|
||||
// return all available persons
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Persons found'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
>>>>>>> 97ddc838a8c9e707d3bf5a6a700301252d2f5ed8
|
||||
|
||||
// Set the response and exit
|
||||
$this->response($payload, $httpstatus);
|
||||
// Set the response and exit
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
public function person_post()
|
||||
{
|
||||
$result = $this->person_model->savePerson($this->post());
|
||||
if($result != FALSE)
|
||||
{
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Person saved.'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
}
|
||||
else
|
||||
{
|
||||
$payload = [
|
||||
'success' => false,
|
||||
'message' => 'Could not save person.'
|
||||
];
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
public function personUpdate_post()
|
||||
{
|
||||
$result = $this->person_model->updatePerson($this->post());
|
||||
if($result != FALSE)
|
||||
{
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Person updated.'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
}
|
||||
else
|
||||
{
|
||||
$payload = [
|
||||
'success' => false,
|
||||
'message' => 'Could not update person.'
|
||||
];
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
//
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
public function checkBewerbung_get()
|
||||
{
|
||||
$result = $this->person_model->checkBewerbung($this->get("email"),$this->get("studiensemester_kurzbz"));
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Bewerbung exists.'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
public function checkZugangscodePerson_get()
|
||||
{
|
||||
$result = $this->person_model->checkZugangscodePerson($this->get("code"));
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
if(!empty($result))
|
||||
{
|
||||
$payload = [
|
||||
'success' => true,
|
||||
'message' => 'Zugangscode exists.'
|
||||
];
|
||||
$payload['data'] = $result;
|
||||
}
|
||||
else
|
||||
{
|
||||
$payload = [
|
||||
'success' => false,
|
||||
'message' => 'Zugangscode does not exist.'
|
||||
];
|
||||
$httpstatus = REST_Controller::HTTP_OK;
|
||||
}
|
||||
|
||||
$this->response($payload, $httpstatus);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
class Kontakt extends FHC_Controller
|
||||
{
|
||||
public function __construct()
|
||||
{
|
||||
parent::__construct();
|
||||
$this->load->model('kontakt/kontakt_model');
|
||||
}
|
||||
|
||||
public function index()
|
||||
{
|
||||
$data['person'] = $this->person_model->getPersonen();
|
||||
$data['title'] = 'Personen Archiv';
|
||||
|
||||
$this->load->view('templates/header', $data);
|
||||
$this->load->view('kontakt/index', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
public function view($slug = null)
|
||||
{
|
||||
$data['person_item'] = $this->person_model->getPersonen($slug);
|
||||
if (empty($data['person_item']))
|
||||
show_404();
|
||||
|
||||
$data['title'] = $data['person_item']->titelpre;
|
||||
|
||||
$this->load->view('templates/header', $data);
|
||||
$this->load->view('kontakt/view', $data);
|
||||
$this->load->view('templates/footer');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<?php
|
||||
|
||||
class Kontakt_model extends DB_Model
|
||||
{
|
||||
|
||||
public function __construct($uid = null)
|
||||
{
|
||||
parent::__construct($uid);
|
||||
$this->dbTable = 'public.tbl_kontakt';
|
||||
}
|
||||
|
||||
public function saveKontakt($kontakt)
|
||||
{
|
||||
//TODO check berechtigung
|
||||
// if ($this->fhc_db_acl->bb->isBerechtigt('person', 'sui'))
|
||||
// {
|
||||
$data = array(
|
||||
"person_id"=>$kontakt["person_id"],
|
||||
"kontakttyp"=>$kontakt["kontakttyp"],
|
||||
"kontakt"=>$kontakt["kontakt"],
|
||||
"insertvon"=>$kontakt["insertvon"],
|
||||
"insertamum"=>date('Y-m-d H:i:s')
|
||||
);
|
||||
if($this->db->insert("public.tbl_kontakt", $data)){
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// return "Nicht berechtigt";
|
||||
// }
|
||||
}
|
||||
|
||||
public function getKontaktPerson($person_id)
|
||||
{
|
||||
$this->db->select("*")
|
||||
->from("public.tbl_kontakt k")
|
||||
->where("k.person_id", $person_id);
|
||||
|
||||
return $this->db->get()->result_array();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,24 +1,36 @@
|
||||
<?php
|
||||
class Person_model extends DB_Model
|
||||
|
||||
class Person_model extends DB_Model
|
||||
{
|
||||
public function __construct($uid=null)
|
||||
|
||||
public function __construct($uid = null)
|
||||
{
|
||||
parent::__construct($uid);
|
||||
$this->dbTable = 'public.tbl_person';
|
||||
}
|
||||
|
||||
public function getPerson($person_id = null)
|
||||
{
|
||||
if (is_null($person_id))
|
||||
{
|
||||
parent::__construct($uid);
|
||||
$this->dbTable='public.tbl_person';
|
||||
$query = $this->db->get_where('public.tbl_person', array());
|
||||
return $query->result_object();
|
||||
}
|
||||
|
||||
public function getPerson($person_id = null)
|
||||
$query = $this->db->get_where('public.tbl_person', array('person_id' => $person_id));
|
||||
return $query->row_object();
|
||||
}
|
||||
|
||||
public function getPersonByCode($code)
|
||||
{
|
||||
if ($this->fhc_db_acl->bb->isBerechtigt('person', 's'))
|
||||
{
|
||||
if (is_null($person_id))
|
||||
{
|
||||
$query = $this->db->get_where('public.tbl_person', array('vorname' => 'Christian'));
|
||||
return $query->result_object();
|
||||
}
|
||||
|
||||
$query = $this->db->get_where('public.tbl_person', array('person_id' => $person_id));
|
||||
return $query->row_object();
|
||||
$query = $this->db->get_where('public.tbl_person', array('zugangscode' => $code));
|
||||
return $query->result_object();
|
||||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
/**
|
||||
* Laedt Personendaten einer Person mittels Code
|
||||
* @param string $code DB-Attr: tbl_benutzer.zugangscode .
|
||||
@@ -36,22 +48,117 @@ class Person_model extends DB_Model
|
||||
return $this->_general_error($this->fhc_db_acl->bb->errormsg);
|
||||
//return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Laedt Personendaten eine BenutzerUID
|
||||
* @param string $uid DB-Attr: tbl_benutzer.uid .
|
||||
* @return bool
|
||||
*/
|
||||
public function getPersonFromBenutzerUID($uid)
|
||||
=======
|
||||
/**
|
||||
* Laedt Personendaten eine BenutzerUID
|
||||
* @param string $uid DB-Attr: tbl_benutzer.uid .
|
||||
* @return bool
|
||||
*/
|
||||
public function getPersonFromBenutzerUID($uid)
|
||||
{
|
||||
if (!$this->fhc_db_acl->bb->isBerechtigt('person', 's'))
|
||||
{
|
||||
|
||||
if (!$this->fhc_db_acl->bb->isBerechtigt('person','s'))
|
||||
{
|
||||
$this->db->select('tbl_person.*');
|
||||
$this->db->from('public.tbl_person JOIN public.tbl_benutzer USING (person_id)');
|
||||
$query = $this->db->get_where(null, array('uid' => $uid));
|
||||
return $query->result_object();
|
||||
}
|
||||
$this->db->select('tbl_person.*');
|
||||
$this->db->from('public.tbl_person JOIN public.tbl_benutzer USING (person_id)');
|
||||
$query = $this->db->get_where(null, array('uid' => $uid));
|
||||
return $query->result_object();
|
||||
>>>>>>> 97ddc838a8c9e707d3bf5a6a700301252d2f5ed8
|
||||
}
|
||||
}
|
||||
|
||||
public function savePerson($person)
|
||||
{
|
||||
//TODO check berechtigung
|
||||
// if ($this->fhc_db_acl->bb->isBerechtigt('person', 'sui'))
|
||||
// {
|
||||
$data = array(
|
||||
"vorname"=>$person["vorname"],
|
||||
"nachname"=>$person["nachname"],
|
||||
"gebdatum"=>$person["gebdatum"],
|
||||
"aktiv" => true,
|
||||
"zugangscode"=>$person["zugangscode"],
|
||||
"insertamum"=>date('Y-m-d H:i:s'),
|
||||
"insertvon"=>$person["insertvon"],
|
||||
);
|
||||
if($this->db->insert("public.tbl_person", $data)){
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// return "Nicht berechtigt";
|
||||
// }
|
||||
}
|
||||
|
||||
public function checkBewerbung($email, $studiensemester_kurzbz=NULL)
|
||||
{
|
||||
$this->db->distinct();
|
||||
|
||||
if(is_null($studiensemester_kurzbz))
|
||||
{
|
||||
$this->db->select("p.person_id, p.zugangscode, p.insertamum")
|
||||
->from("public.tbl_person p")
|
||||
->join("public.tbl_kontakt k", "p.person_id=k.person_id")
|
||||
->join("public.tbl_benutzer b", "p.person_id=b.person_id", "left")
|
||||
->where("k.kontakttyp", 'email')
|
||||
->where("(kontakt='".$email."'".
|
||||
" OR alias ||'@technikum-wien.at'='".$email."'".
|
||||
" OR uid ||'@technikum-wien.at'='".$email."')")
|
||||
->order_by("p.insertamum", "DESC")
|
||||
->limit(1)
|
||||
;
|
||||
}
|
||||
else
|
||||
{
|
||||
$this->db->select("p.person_id,p.zugangscode,p.insertamum")
|
||||
->from("public.tbl_person p")
|
||||
->join("public.tbl_kontakt k", "p.person_id=k.person_id")
|
||||
->join("public.tbl_benutzer b", "p.person_id=b.person_id", "left")
|
||||
->join("public.tbl_prestudent ps", "p.person_id=ps.person_id")
|
||||
->join("public.tbl_prestudentstatus pst", "pst.prestudent_id=ps.prestudent_id")
|
||||
->where("k.kontakttyp", 'email')
|
||||
->where("(kontakt='".$email."'".
|
||||
" OR alias ||'@technikum-wien.at'='".$email."'".
|
||||
" OR uid ||'@technikum-wien.at'='".$email."')")
|
||||
->where("studiensemester_kurzbz='".$studiensemester_kurzbz."'")
|
||||
->order_by("p.insertamum", "DESC")
|
||||
->limit(1)
|
||||
;
|
||||
}
|
||||
return $this->db->get()->result_array();
|
||||
}
|
||||
|
||||
public function checkZugangscodePerson($code)
|
||||
{
|
||||
$this->db->select("p.person_id")
|
||||
->from("public.tbl_person p")
|
||||
->where("p.zugangscode", $code);
|
||||
return $this->db->get()->result_array();
|
||||
}
|
||||
|
||||
public function updatePerson($person)
|
||||
{
|
||||
//TODO check berechtigung
|
||||
// if ($this->fhc_db_acl->bb->isBerechtigt('person', 'sui'))
|
||||
// {
|
||||
//TODO set other columns to be updated
|
||||
$this->db->set("zugangscode", $person["zugangscode"]);
|
||||
$this->db->where("person_id", $person["person_id"]);
|
||||
if($this->db->update("public.tbl_person")){
|
||||
return true;
|
||||
}
|
||||
else
|
||||
{
|
||||
return false;
|
||||
}
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// return "Nicht berechtigt";
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -414,6 +414,11 @@ trait db_extra
|
||||
return ($var!==''?$var:'null');
|
||||
}
|
||||
|
||||
public function db_qoute($var)
|
||||
{
|
||||
return "'".$var."'";
|
||||
}
|
||||
|
||||
public function db_parse_bool($var)
|
||||
{
|
||||
if($var=='t')
|
||||
|
||||
+2144
-2144
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 702 KiB |
@@ -1,2 +0,0 @@
|
||||
.idea
|
||||
bower_components
|
||||
-21
@@ -1,21 +0,0 @@
|
||||
The MIT License
|
||||
|
||||
Copyright (c) 2013 Mattias Holmlund, http://www.holmlund.se/mattias
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
-119
@@ -1,119 +0,0 @@
|
||||
AngularJS Tablesort
|
||||
===================
|
||||
|
||||
Allow tables to be sorted by clicking their headings.
|
||||
|
||||
Web site: [http://mattiash.github.io/angular-tablesort](http://mattiash.github.io/angular-tablesort)
|
||||
|
||||
Background
|
||||
----------
|
||||
|
||||
When you use jquery to build your web-pages, it is very easy to add sorting-functionality to your tables - include [tablesorter](http://tablesorter.com) and annotate your column headings slightly to tell it what type of data your table contains.
|
||||
|
||||
The goal with this module is to make it just as easy to add sorting to AngularJS tables, but with proper use of angular features and not jquery.
|
||||
|
||||
Click once on a heading to sort ascending, twice for descending. Use shift-click to sort on more than one column.
|
||||
|
||||
Additionally, these directives also makes it easy to add a default row that is shown in empty tables to make
|
||||
it explicit that the table is intentionally empty and not just broken.
|
||||
|
||||
Installation
|
||||
------------
|
||||
|
||||
bower install angular-tablesort
|
||||
|
||||
or
|
||||
|
||||
npm install angular-tablesort
|
||||
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
Include the script in your markup
|
||||
|
||||
```html
|
||||
<script src="bower_components/angular-tablesort/js/angular-tablesort.js"></script>
|
||||
```
|
||||
|
||||
Include the module in your app
|
||||
|
||||
```js
|
||||
angular.module('myApp', ['tableSort']);
|
||||
```
|
||||
|
||||
The following code generates a table that can be sorted by clicking on the table headings:
|
||||
|
||||
```html
|
||||
<table border="1" ts-wrapper>
|
||||
<thead>
|
||||
<tr>
|
||||
<th ts-criteria="Id">Id</th>
|
||||
<th ts-criteria="Name|lowercase" ts-default>Name</th>
|
||||
<th ts-criteria="Price|parseFloat">Price</th>
|
||||
<th ts-criteria="Quantity|parseInt">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="item in items" ts-repeat>
|
||||
<td>{{item.Name}}</td>
|
||||
<td>{{item.Price | currency}}</td>
|
||||
<td>{{item.Quantity}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
The `ts-wrapper` attribute must be set on element that surrounds both the headings and the ng-repeat statement.
|
||||
|
||||
The `ts-criteria` attribute tells tablesort which expression it should sort on when that element is clicked. Normally, the ts-criteria is the same as the expression that is shown in the column, but it doesn't have to be. The ts-criteria can also be filtered using the normal AngularJS filter syntax. Tablesort includes two filters parseInt and parseFloat that use the javascript functions of the same name, but any filter can be used.
|
||||
|
||||
The `ts-default` attribute can be set on one or more columns to sort on them in ascending order by default.
|
||||
To sort in descending order, set ts-default to "descending"
|
||||
|
||||
The `ts-repeat` attribute must be set on the element with ng-repeat.
|
||||
|
||||
```html
|
||||
<tr ng-repeat="item in items" ts-repeat>
|
||||
```
|
||||
|
||||
Alternatively, `ts-repeat-start` and `ts-repeat-end` may be used to compliment the `ng-repeat-start` and `ng-repeat-end` directives.
|
||||
|
||||
```html
|
||||
<tr ng-repeat-start="item in items track by item.Id" ts-repeat-start>
|
||||
<td><input type="checkbox" ng-model="item.selected"></td>
|
||||
<td>{{ item.Name }}</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end data-ts-repeat-end ng-show="item.selected">
|
||||
<td colspan="2">{{ item.Description }}</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
By default, the sorting will be done as the last operation in the ng-repeat expression. To override this behavior, use an explicit `tablesort` directive as part of your ng-repeat expression. E.g.
|
||||
|
||||
```html
|
||||
<tr ng-repeat="item in items | limitTo: 10" ts-repeat>
|
||||
```
|
||||
|
||||
This will first select the first 10 items in `items` and then sort them. Alternatively, you can insert an explicit tablesort in the pipe:
|
||||
|
||||
```html
|
||||
<tr ng-repeat="item in items | tablesort | limitTo: 10" ts-repeat>
|
||||
```
|
||||
|
||||
This will first sort the rows according to your specification and then only show the first 10 rows.
|
||||
|
||||
If the `ng-repeat` expression contains a `track by` statement (which is generally a good idea), that expression will
|
||||
be used to provide a [stable](http://en.wikipedia.org/wiki/Sorting_algorithm#Stability) sort result.
|
||||
|
||||
CSS
|
||||
---
|
||||
|
||||
All table headings that can be sorted on is styled with css-class `tablesort-sortable`. The table headings that the table is currently sorted on is styled with `tablesort-asc` or `tablesort-desc` classes depending on the sort-direction. A stylesheet is included to show that it works, but you probably want to build your own.
|
||||
|
||||
By default the content and look of the data for empty tables is controlled via css. It is inserted as one empty `<td>` spanning
|
||||
all columns and placed inside a `<tr>` with class `showIfLast` The `<tr>` is placed at the top of each table.
|
||||
To disable this feature add the attribute `ts-hide-no-data` to the `ts-repeat` row:
|
||||
```html
|
||||
<tr ng-repeat="item in items" ts-repeat ts-hide-no-data>
|
||||
```
|
||||
-10
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "angular-tablesort",
|
||||
"description": "Sort AngularJS tables easily",
|
||||
"version": "1.1.2",
|
||||
"main": ["./js/angular-tablesort.js"],
|
||||
"dependencies": {
|
||||
"angular": "*"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
||||
-152
@@ -1,152 +0,0 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular Tablesort</title>
|
||||
<link rel="stylesheet" href="tablesort.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div ng-app="myApp">
|
||||
<div ng-controller="tableTestCtrl">
|
||||
<h1>Angular Tablesort</h1>
|
||||
<table border="1" ts-wrapper>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th ts-criteria="Id">Id</th>
|
||||
<th ts-criteria="Name|lowercase" ts-default>Name</th>
|
||||
<th ts-criteria="Price|parseFloat">Price</th>
|
||||
<th ts-criteria="Quantity|parseInt">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="item in items track by item.Id" ts-repeat>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>{{item.Id}}</td>
|
||||
<td>{{item.Name}}</td>
|
||||
<td>{{item.Price | currency}}</td>
|
||||
<td>{{item.Quantity}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Angular Tablesort with tablesort filter and max 5 entries</h1>
|
||||
<table border="1" ts-wrapper>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th ts-criteria="Id">Id</th>
|
||||
<th ts-criteria="Name|lowercase" ts-default>Name</th>
|
||||
<th ts-criteria="Price|parseFloat">Price</th>
|
||||
<th ts-criteria="Quantity|parseInt">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="item in items | tablesort | limitTo: 5 track by item.Id" ts-repeat>
|
||||
<td><input type="checkbox"></td>
|
||||
<td>{{item.Id}}</td>
|
||||
<td>{{item.Name}}</td>
|
||||
<td>{{item.Price | currency}}</td>
|
||||
<td>{{item.Quantity}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Angular Tablesort with Multi-Element ts-repeat-start & ts-repeat-end</h1>
|
||||
<h2><em>Click Select to reveal item details.</em></h2>
|
||||
<table border="1" data-ts-wrapper>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th data-ts-criteria="Id">Id</th>
|
||||
<th data-ts-criteria="Name|lowercase" data-ts-default>Name</th>
|
||||
<th data-ts-criteria="Price|parseFloat">Price</th>
|
||||
<th data-ts-criteria="Quantity|parseInt">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr data-ng-repeat-start="item in items track by item.Id" data-ts-repeat-start>
|
||||
<td><input type="checkbox" data-ng-model="item.selected"></td>
|
||||
<td>{{item.Id}}</td>
|
||||
<td>{{item.Name}}</td>
|
||||
<td>{{item.Price | currency}}</td>
|
||||
<td>{{item.Quantity}}</td>
|
||||
</tr>
|
||||
<tr data-ng-repeat-end data-ts-repeat-end data-ng-show="item.selected">
|
||||
<td colspan="5">{{item.Description}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<h1>Empty table</h1>
|
||||
<table border="1" ts-wrapper>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th ts-criteria="Id">Id</th>
|
||||
<th ts-criteria="Name|lowercase" ts-default>Name</th>
|
||||
<th ts-criteria="Price|parseFloat">Price</th>
|
||||
<th ts-criteria="Quantity|parseInt">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="item in noitems" ts-repeat ng-click="clickRow()">
|
||||
<td><input type="checkbox"></td>
|
||||
<td>{{item.Id}}</td>
|
||||
<td>{{item.Name}}</td>
|
||||
<td>{{item.Price | currency}}</td>
|
||||
<td>{{item.Quantity}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Empty table without "No data" row</h1>
|
||||
<table border="1" ts-wrapper>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th ts-criteria="Id">Id</th>
|
||||
<th ts-criteria="Name|lowercase" ts-default>Name</th>
|
||||
<th ts-criteria="Price|parseFloat">Price</th>
|
||||
<th ts-criteria="Quantity|parseInt">Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="item in noitems" ts-repeat ts-hide-no-data ng-click="clickRow()">
|
||||
<td><input type="checkbox"></td>
|
||||
<td>{{item.Id}}</td>
|
||||
<td>{{item.Name}}</td>
|
||||
<td>{{item.Price | currency}}</td>
|
||||
<td>{{item.Quantity}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
|
||||
<script src="js/angular-tablesort.js"></script>
|
||||
<script>
|
||||
var myApp = angular.module( 'myApp', ['tableSort'] )
|
||||
.controller( "tableTestCtrl", function tableTestCtrl($scope) {
|
||||
$scope.items = [
|
||||
{Id: "01", Name: "A", Price: "1.00", Quantity: "1", Description: "This is the description for item A.", selected: false},
|
||||
{Id: "02", Name: "B", Price: "10.00", Quantity: "1", Description: "This is the description for item B.", selected: false},
|
||||
{Id: "04", Name: "C", Price: "9.50", Quantity: "10", Description: "This is the description for item C.", selected: false},
|
||||
{Id: "03", Name: "a", Price: "9.00", Quantity: "2", Description: "This is the description for item a.", selected: false},
|
||||
{Id: "06", Name: "b", Price: "100.00", Quantity: "2", Description: "This is the description for item b.", selected: false},
|
||||
{Id: "05", Name: "c", Price: "1.20", Quantity: "2", Description: "This is the description for item c.", selected: false}
|
||||
];
|
||||
$scope.noitems = [];
|
||||
$scope.clickRow = function () {
|
||||
alert('You clicked the row.');
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,2 +0,0 @@
|
||||
require('./js/angular-tablesort');
|
||||
module.exports = 'tableSort';
|
||||
@@ -1,226 +0,0 @@
|
||||
/*
|
||||
angular-tablesort v1.1.2
|
||||
(c) 2013-2015 Mattias Holmlund, http://mattiash.github.io/angular-tablesort
|
||||
License: MIT
|
||||
*/
|
||||
|
||||
var tableSortModule = angular.module( 'tableSort', [] );
|
||||
|
||||
tableSortModule.directive('tsWrapper', ['$log', '$parse', function( $log, $parse ) {
|
||||
'use strict';
|
||||
return {
|
||||
scope: true,
|
||||
controller: ['$scope', function($scope) {
|
||||
$scope.sortExpression = [];
|
||||
$scope.headings = [];
|
||||
|
||||
var parse_sortexpr = function( expr ) {
|
||||
return [$parse( expr ), null, false];
|
||||
};
|
||||
|
||||
this.setSortField = function( sortexpr, element ) {
|
||||
var i;
|
||||
var expr = parse_sortexpr( sortexpr );
|
||||
if( $scope.sortExpression.length === 1
|
||||
&& $scope.sortExpression[0][0] === expr[0] ) {
|
||||
if( $scope.sortExpression[0][2] ) {
|
||||
element.removeClass( "tablesort-desc" );
|
||||
element.addClass( "tablesort-asc" );
|
||||
$scope.sortExpression[0][2] = false;
|
||||
}
|
||||
else {
|
||||
element.removeClass( "tablesort-asc" );
|
||||
element.addClass( "tablesort-desc" );
|
||||
$scope.sortExpression[0][2] = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
for( i=0; i<$scope.headings.length; i=i+1 ) {
|
||||
$scope.headings[i]
|
||||
.removeClass( "tablesort-desc" )
|
||||
.removeClass( "tablesort-asc" );
|
||||
}
|
||||
element.addClass( "tablesort-asc" );
|
||||
$scope.sortExpression = [expr];
|
||||
}
|
||||
};
|
||||
|
||||
this.addSortField = function( sortexpr, element ) {
|
||||
var i;
|
||||
var toggle_order = false;
|
||||
var expr = parse_sortexpr( sortexpr );
|
||||
for( i=0; i<$scope.sortExpression.length; i=i+1 ) {
|
||||
if( $scope.sortExpression[i][0] === expr[0] ) {
|
||||
if( $scope.sortExpression[i][2] ) {
|
||||
element.removeClass( "tablesort-desc" );
|
||||
element.addClass( "tablesort-asc" );
|
||||
$scope.sortExpression[i][2] = false;
|
||||
}
|
||||
else {
|
||||
element.removeClass( "tablesort-asc" );
|
||||
element.addClass( "tablesort-desc" );
|
||||
$scope.sortExpression[i][2] = true;
|
||||
}
|
||||
toggle_order = true;
|
||||
}
|
||||
}
|
||||
if( !toggle_order ) {
|
||||
element.addClass( "tablesort-asc" );
|
||||
$scope.sortExpression.push( expr );
|
||||
}
|
||||
};
|
||||
|
||||
this.setTrackBy = function( trackBy ) {
|
||||
$scope.trackBy = trackBy;
|
||||
};
|
||||
|
||||
this.registerHeading = function( headingelement ) {
|
||||
$scope.headings.push( headingelement );
|
||||
};
|
||||
|
||||
$scope.sortFun = function( a, b ) {
|
||||
var i, aval, bval, descending, filterFun;
|
||||
for( i=0; i<$scope.sortExpression.length; i=i+1 ){
|
||||
aval = $scope.sortExpression[i][0](a);
|
||||
bval = $scope.sortExpression[i][0](b);
|
||||
filterFun = b[$scope.sortExpression[i][1]];
|
||||
if( filterFun ) {
|
||||
aval = filterFun( aval );
|
||||
bval = filterFun( bval );
|
||||
}
|
||||
if( aval === undefined || aval === null ) {
|
||||
aval = "";
|
||||
}
|
||||
if( bval === undefined || bval === null ) {
|
||||
bval = "";
|
||||
}
|
||||
descending = $scope.sortExpression[i][2];
|
||||
if( aval > bval ) {
|
||||
return descending ? -1 : 1;
|
||||
}
|
||||
else if( aval < bval ) {
|
||||
return descending ? 1 : -1;
|
||||
}
|
||||
}
|
||||
|
||||
// All the sort fields were equal. If there is a "track by" expression,
|
||||
// use that as a tiebreaker to make the sort result stable.
|
||||
if( $scope.trackBy ) {
|
||||
aval = a[$scope.trackBy];
|
||||
bval = b[$scope.trackBy];
|
||||
if( aval === undefined || aval === null ) {
|
||||
aval = "";
|
||||
}
|
||||
if( bval === undefined || bval === null ) {
|
||||
bval = "";
|
||||
}
|
||||
if( aval > bval ) {
|
||||
return descending ? -1 : 1;
|
||||
}
|
||||
else if( aval < bval ) {
|
||||
return descending ? 1 : -1;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
}]
|
||||
};
|
||||
}]);
|
||||
|
||||
tableSortModule.directive('tsCriteria', function() {
|
||||
return {
|
||||
require: "^tsWrapper",
|
||||
link: function(scope, element, attrs, tsWrapperCtrl) {
|
||||
var clickingCallback = function(event) {
|
||||
scope.$apply( function() {
|
||||
if( event.shiftKey ) {
|
||||
tsWrapperCtrl.addSortField(attrs.tsCriteria, element);
|
||||
}
|
||||
else {
|
||||
tsWrapperCtrl.setSortField(attrs.tsCriteria, element);
|
||||
}
|
||||
} );
|
||||
};
|
||||
element.bind('click', clickingCallback);
|
||||
element.addClass('tablesort-sortable');
|
||||
if( "tsDefault" in attrs && attrs.tsDefault !== "0" ) {
|
||||
tsWrapperCtrl.addSortField( attrs.tsCriteria, element );
|
||||
if( attrs.tsDefault == "descending" ) {
|
||||
tsWrapperCtrl.addSortField( attrs.tsCriteria, element );
|
||||
}
|
||||
}
|
||||
tsWrapperCtrl.registerHeading( element );
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
tableSortModule.directive("tsRepeat", ['$compile', function($compile) {
|
||||
return {
|
||||
terminal: true,
|
||||
multiElement: true,
|
||||
require: "^tsWrapper",
|
||||
priority: 1000000,
|
||||
link: function(scope, element, attrs, tsWrapperCtrl) {
|
||||
var repeatAttrs = ["ng-repeat", "data-ng-repeat", "ng-repeat-start", "data-ng-repeat-start"];
|
||||
var ngRepeatDirective = repeatAttrs[0];
|
||||
var tsRepeatDirective = "ts-repeat";
|
||||
for (var i = 0; i < repeatAttrs.length; i++) {
|
||||
if (angular.isDefined(element.attr(repeatAttrs[i]))) {
|
||||
ngRepeatDirective = repeatAttrs[i];
|
||||
tsRepeatDirective = ngRepeatDirective.replace(/^(data-)?ng/, '$1ts');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var repeatExpr = element.attr(ngRepeatDirective);
|
||||
var trackBy = null;
|
||||
var trackByMatch = repeatExpr.match(/\s+track\s+by\s+\S+?\.(\S+)/);
|
||||
if( trackByMatch ) {
|
||||
trackBy = trackByMatch[1];
|
||||
tsWrapperCtrl.setTrackBy(trackBy);
|
||||
}
|
||||
|
||||
if (repeatExpr.search(/tablesort/) != -1) {
|
||||
repeatExpr = repeatExpr.replace(/tablesort/,"tablesortOrderBy:sortFun");
|
||||
} else {
|
||||
repeatExpr = repeatExpr.replace(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(\s+track\s+by\s+[\s\S]+?)?\s*$/,
|
||||
"$1 in $2 | tablesortOrderBy:sortFun$3");
|
||||
}
|
||||
|
||||
if (angular.isUndefined(attrs.tsHideNoData)) {
|
||||
var noDataRow = angular.element(element[0]).clone();
|
||||
noDataRow.removeAttr(ngRepeatDirective);
|
||||
noDataRow.removeAttr(tsRepeatDirective);
|
||||
noDataRow.addClass("showIfLast");
|
||||
noDataRow.children().remove();
|
||||
noDataRow.append('<td colspan="' + element[0].childElementCount + '"></td>');
|
||||
noDataRow = $compile(noDataRow)(scope);
|
||||
element.parent().prepend(noDataRow);
|
||||
}
|
||||
|
||||
angular.element(element[0]).attr(ngRepeatDirective, repeatExpr);
|
||||
$compile(element, null, 1000000)(scope);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
tableSortModule.filter( 'tablesortOrderBy', function(){
|
||||
return function(array, sortfun ) {
|
||||
if(!array) return;
|
||||
var arrayCopy = [];
|
||||
for ( var i = 0; i < array.length; i++) { arrayCopy.push(array[i]); }
|
||||
return arrayCopy.sort( sortfun );
|
||||
};
|
||||
} );
|
||||
|
||||
tableSortModule.filter( 'parseInt', function(){
|
||||
return function(input) {
|
||||
return parseInt( input ) || null;
|
||||
};
|
||||
} );
|
||||
|
||||
tableSortModule.filter( 'parseFloat', function(){
|
||||
return function(input) {
|
||||
return parseFloat( input ) || null;
|
||||
};
|
||||
} );
|
||||
@@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "angular-tablesort",
|
||||
"version": "1.1.2",
|
||||
"description": "Sort angularjs tables easily",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/mattiash/angular-tablesort.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/mattiash/angular-tablesort"
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
th.tablesort-sortable {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table .tablesort-sortable:after{
|
||||
content:"";
|
||||
float:right;
|
||||
margin-top:7px;
|
||||
visibility:hidden;
|
||||
border-left:4px solid transparent;
|
||||
border-right:4px solid transparent;
|
||||
|
||||
border-top:none;
|
||||
border-bottom:4px solid #000;
|
||||
}
|
||||
|
||||
table .tablesort-desc:after{
|
||||
border-top:4px solid #000;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
table .tablesort-asc,table .tablesort-desc{
|
||||
background-color:rgba(141, 192, 219, 0.25);
|
||||
}
|
||||
|
||||
table .tablesort-sortable:hover:after, table .tablesort-asc:after, table .tablesort-desc:after {
|
||||
visibility:visible;
|
||||
}
|
||||
|
||||
/*
|
||||
* Styling for the table row shown in empty tables
|
||||
*/
|
||||
|
||||
/* The row is always added as the first row in a table
|
||||
Hide it by default */
|
||||
.showIfLast {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Only show it if it is also the last row of the table. */
|
||||
.showIfLast:last-child {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.showIfLast td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.showIfLast td:after {
|
||||
content: "No data";
|
||||
}
|
||||
-491
@@ -1,491 +0,0 @@
|
||||
Version 1.4.4
|
||||
-------------
|
||||
* Bug
|
||||
* filebox: The 'clear' and 'reset' methods do not work properly in IE9. fixed.
|
||||
* messager: After calling $.messager.progress() with no arguments, the $.messager.progress('close') does not work properly. fixed.
|
||||
* timespinner: The value does not display properly in IE8 while clicking the spin buttons. fixed.
|
||||
* window: The window does not display when calling 'options' method in 'onMove' event. fixed.
|
||||
* treegrid: The 'getLevel' method does not accept the parameter value of 0. fixed.
|
||||
* Improvement
|
||||
* layout: The 'collapsedContent','expandMode' and 'hideExpandTool' properties are supported in region panel.
|
||||
* layout: The 'hideCollapsedContent' property can be set to display the vertical title bar on collapsed panel.
|
||||
* layout: Add 'onCollapse','onExpand','onAdd','onRemove' events.
|
||||
* datagrid: Display the 'up-down' icon on the sortable columns.
|
||||
* datagrid: Add 'gotoPage' method.
|
||||
* propertygrid: Add 'groups' method that allows to get all the data groups.
|
||||
* messager: Auto scroll feature is supported when displaying long messages.
|
||||
* tabs: The 'disabled' property is supported when defining a disabled tab panel.
|
||||
* tabs: The percentange size is supported now.
|
||||
|
||||
Version 1.4.3
|
||||
-------------
|
||||
* Bug
|
||||
* textbox: The 'setText' method does not accept value 0. fixed.
|
||||
* timespinner: When running in IE11, the error occurs when clicking on the empty textbox. fixed.
|
||||
* tabs: The 'update' method can not update only the panel body. fixed.
|
||||
* Improvement
|
||||
* combobox: Improve the performance of displaying the drop-down panel.
|
||||
* combogrid: Remember the displaying text when the drop-down datagrid go to other pages.
|
||||
* combogrid: The 'setValue' and 'setValues' methods accept a key-value object.
|
||||
* window: The inline window's mask can auto-stretch its size to fill parent container.
|
||||
* tabs: The 'showTool' and 'hideTool' methods are available for users to show or hide the tools.
|
||||
* layout: Allow the user to override the 'cls','headerCls' and 'bodyCls' property values.
|
||||
* New Plugins
|
||||
* switchbutton: The switch button with two states:'on' and 'off'.
|
||||
|
||||
Version 1.4.2
|
||||
-------------
|
||||
* Bug
|
||||
* treegrid: The column will restore its size to original size after recreating the treegrid. fixed.
|
||||
* Improvement
|
||||
* draggable: Add 'delay' property that allows the user to delay the drag operation.
|
||||
* tree: Add 'filter' property and 'doFilter' method.
|
||||
* tabs: The 'add' method allows the user to insert a tab panel at a specified index.
|
||||
* tabs: The user can determine what tab panel can be selected.
|
||||
* tabs: Add 'justified' and 'narrow' properties.
|
||||
* layout: Add 'unsplit' and 'split' methods.
|
||||
* messager: Keyboard navigation features are supported now.
|
||||
* form: Add 'onChange' event.
|
||||
* combobox: Add 'queryParams' property.
|
||||
* slider: Add 'range' property.
|
||||
* menu: Add 'itemHeight','inline','noline' properties.
|
||||
* panel: The 'header' property allows the user to customize the panel header.
|
||||
* menubutton: Add 'hasDownArrow' property.
|
||||
* New Plugins
|
||||
* datalist: The plugin to render items in a list.
|
||||
* navpanel: The root component for the mobile page.
|
||||
* mobile: The plugin to provide the mobile page stack management and navigation.
|
||||
|
||||
Version 1.4.1
|
||||
-------------
|
||||
* Bug
|
||||
* combogrid: The combogrid has different height than other combo components. fixed.
|
||||
* datagrid: The row element loses some class style value after calling 'updateRow' method. fixed.
|
||||
* menubutton: Calling 'enable' method on a disabled button can not work well. fixed.
|
||||
* form: The filebox components in the form do not work correctly after calling 'clear' method. fixed.
|
||||
* Improvement
|
||||
* tabs: The 'update' method accepts 'type' option that allows the user to update the header,body,or both.
|
||||
* panel: Add 'openAnimation','openDuration','closeAnimation' and 'closeDuration' properties to set the animation for opening or closing a panel.
|
||||
* panel: Add 'footer' property that allows the user to add a footer bar to the bottom of panel.
|
||||
* datagrid: Calling 'endEdit' method will accept the editing value correctly.
|
||||
* datagrid: Add 'onBeforeSelect','onBeforeCheck','onBeforeUnselect','onBeforeUncheck' events.
|
||||
* propertygrid: The user can edit a row by calling 'beginEdit' method.
|
||||
* datebox: Add 'cloneFrom' method to create the datebox component quickly.
|
||||
* datetimebox: Add 'cloneFrom' method to create the datetimebox component quickly.
|
||||
|
||||
Version 1.4
|
||||
-------------
|
||||
* Bug
|
||||
* menu: The menu should not has a correct height when removed a menu item. fixed.
|
||||
* datagrid: The 'fitColumns' method does not work normally when the datarid width is too small. fixed.
|
||||
* Improvement
|
||||
* The fluid/percentange size is supported now for all easyui components.
|
||||
* menu: Add 'showItem', 'hideItem' and 'resize' methods.
|
||||
* menu: Auto resize the height upon the window size.
|
||||
* menu: Add 'duration' property that allows the user to define duration time in milliseconds to hide menu.
|
||||
* validatebox: Add 'onBeforeValidate' and 'onValidate' events.
|
||||
* combo: Extended from textbox now.
|
||||
* combo: Add 'panelMinWidth','panelMaxWidth','panelMinHeight' and 'panelMaxHeight' properties.
|
||||
* searchbox: Extended from textbox now.
|
||||
* tree: The 'getRoot' method will return the top parent node of a specified node if pass a 'nodeEl' parameter.
|
||||
* tree: Add 'queryParams' property.
|
||||
* datetimebox: Add 'spinnerWidth' property.
|
||||
* panel: Add 'doLayout' method to cause the panel to lay out its components.
|
||||
* panel: Add 'clear' method to clear the panel's content.
|
||||
* datagrid: The user is allowed to assign percent width to columns.
|
||||
* form: Add 'ajax','novalidate' and 'queryParams' properties.
|
||||
* linkbutton: Add 'resize' method.
|
||||
* New Plugins
|
||||
* textbox: A enhanced input field that allows users build their form easily.
|
||||
* datetimespinner: A date and time spinner that allows to pick a specific day.
|
||||
* filebox: The filebox component represents a file field of the forms.
|
||||
|
||||
Version 1.3.6
|
||||
-------------
|
||||
* Bug
|
||||
* treegrid: The 'getChecked' method can not return correct checked rows. fixed.
|
||||
* tree: The checkbox does not display properly on async tree when 'onlyLeafCheck' property is true. fixed.
|
||||
* Improvement
|
||||
* treegrid: All the selecting and checking methods are extended from datagrid component.
|
||||
* linkbutton: The icon alignment is fully supported, possible values are: 'top','bottom','left','right'.
|
||||
* linkbutton: Add 'size' property, possible values are: 'small','large'.
|
||||
* linkbutton: Add 'onClick' event.
|
||||
* menubutton: Add 'menuAlign' property that allows the user set top level menu alignment.
|
||||
* combo: Add 'panelAlign' property, possible values are: 'left','right'.
|
||||
* calendar: The 'formatter','styler' and 'validator' options are available to custom the calendar dates.
|
||||
* calendar: Add 'onChange' event.
|
||||
* panel: Add 'method','queryParams' and 'loader' options.
|
||||
* panel: Add 'onLoadError' event.
|
||||
* datagrid: Add 'onBeginEdit' event that fires when a row goes into edit mode.
|
||||
* datagrid: Add 'onEndEdit' event that fires when finishing editing but before destroying editors.
|
||||
* datagrid: Add 'sort' method and 'onBeforeSortColumn' event.
|
||||
* datagrid: The 'combogrid' editor has been integrated into datagrid.
|
||||
* datagrid: Add 'ctrlSelect' property that only allows multi-selection when ctrl+click is used.
|
||||
* slider: Add 'converter' option that allows users determine how to convert a value to the slider position or the slider position to the value.
|
||||
* searchbox: Add 'disabled' property.
|
||||
* searchbox: Add 'disable','enable','clear','reset' methods.
|
||||
* spinner: Add 'readonly' property, 'readonly' method and 'onChange' event.
|
||||
|
||||
Version 1.3.5
|
||||
-------------
|
||||
* Bug
|
||||
* searchbox: The 'searcher' function can not offer 'name' parameter value correctly. fixed.
|
||||
* combo: The 'isValid' method can not return boolean value. fixed.
|
||||
* combo: Clicking combo will trigger the 'onHidePanel' event of other combo components that have hidden drop-down panels. fixed.
|
||||
* combogrid: Some methods can not inherit from combo. fixed.
|
||||
* Improvement
|
||||
* datagrid: Improve performance on checking rows.
|
||||
* menu: Allows to append a menu separator.
|
||||
* menu: Add 'hideOnUnhover' property to indicate if the menu should be hidden when mouse exits it.
|
||||
* slider: Add 'clear' and 'reset' methods.
|
||||
* tabs: Add 'unselect' method that will trigger 'onUnselect' event.
|
||||
* tabs: Add 'selected' property to specify what tab panel will be opened.
|
||||
* tabs: The 'collapsible' property of tab panel is supported to determine if the tab panel can be collapsed.
|
||||
* tabs: Add 'showHeader' property, 'showHeader' and 'hideHeader' methods.
|
||||
* combobox: The 'disabled' property can be used to disable some items.
|
||||
* tree: Improve loading performance.
|
||||
* pagination: The 'layout' property can be used to customize the pagination layout.
|
||||
* accordion: Add 'unselect' method that will trigger 'onUnselect' event.
|
||||
* accordion: Add 'selected' and 'multiple' properties.
|
||||
* accordion: Add 'getSelections' method.
|
||||
* datebox: Add 'sharedCalendar' property that allows multiple datebox components share one calendar component.
|
||||
|
||||
Version 1.3.4
|
||||
-------------
|
||||
* Bug
|
||||
* combobox: The onLoadSuccess event fires when parsing empty local data. fixed.
|
||||
* form: Calling 'reset' method can not reset datebox field. fixed.
|
||||
* Improvement
|
||||
* mobile: The context menu and double click features are supported on mobile devices.
|
||||
* combobox: The 'groupField' and 'groupFormatter' options are available to display items in groups.
|
||||
* tree: When append or insert nodes, the 'data' parameter accepts one or more nodes data.
|
||||
* tree: The 'getChecked' method accepts a single 'state' or an array of 'state'.
|
||||
* tree: Add 'scrollTo' method.
|
||||
* datagrid: The 'multiSort' property is added to support multiple column sorting.
|
||||
* datagrid: The 'rowStyler' and column 'styler' can return CSS class name or inline styles.
|
||||
* treegrid: Add 'load' method to load data and navigate to the first page.
|
||||
* tabs: Add 'tabWidth' and 'tabHeight' properties.
|
||||
* validatebox: The 'novalidate' property is available to indicate whether to perform the validation.
|
||||
* validatebox: Add 'enableValidation' and 'disableValidation' methods.
|
||||
* form: Add 'enableValidation' and 'disableValidation' methods.
|
||||
* slider: Add 'onComplete' event.
|
||||
* pagination: The 'buttons' property accepts the existing element.
|
||||
|
||||
Version 1.3.3
|
||||
-------------
|
||||
* Bug
|
||||
* datagrid: Some style features are not supported by column styler function. fixed.
|
||||
* datagrid: IE 31 stylesheet limit. fixed.
|
||||
* treegrid: Some style features are not supported by column styler function. fixed.
|
||||
* menu: The auto width of menu item displays incorrect in ie6. fixed.
|
||||
* combo: The 'onHidePanel' event can not fire when clicked outside the combo area. fixed.
|
||||
* Improvement
|
||||
* datagrid: Add 'scrollTo' and 'highlightRow' methods.
|
||||
* treegrid: Enable treegrid to parse data from <tbody> element.
|
||||
* combo: Add 'selectOnNavigation' and 'readonly' options.
|
||||
* combobox: Add 'loadFilter' option to allow users to change data format before loading into combobox.
|
||||
* tree: Add 'onBeforeDrop' callback event.
|
||||
* validatebox: Dependent on tooltip plugin now, add 'deltaX' property.
|
||||
* numberbox: The 'filter' options can be used to determine if the key pressed was accepted.
|
||||
* linkbutton: The group button is available.
|
||||
* layout: The 'minWidth','maxWidth','minHeight','maxHeight' and 'collapsible' properties are available for region panel.
|
||||
* New Plugins
|
||||
* tooltip: Display a popup message when moving mouse over an element.
|
||||
|
||||
Version 1.3.2
|
||||
-------------
|
||||
* Bug
|
||||
* datagrid: The loading message window can not be centered when changing the width of datagrid. fixed.
|
||||
* treegrid: The 'mergeCells' method can not work normally. fixed.
|
||||
* propertygrid: Calling 'endEdit' method to stop editing a row will cause errors. fixed.
|
||||
* tree: Can not load empty data when 'lines' property set to true. fixed.
|
||||
* Improvement
|
||||
* RTL feature is supported now.
|
||||
* tabs: Add 'scrollBy' method to scroll the tab header by the specified amount of pixels
|
||||
* tabs: Add 'toolPosition' property to set tab tools to left or right.
|
||||
* tabs: Add 'tabPosition' property to define the tab position, possible values are: 'top','bottom','left','right'.
|
||||
* datagrid: Add a column level property 'order' that allows users to define different default sort order per column.
|
||||
* datagrid: Add a column level property 'halign' that allows users to define how to align the column header.
|
||||
* datagrid: Add 'resizeHandle' property to define the resizing column position, by grabbing the left or right edge of the column.
|
||||
* datagrid: Add 'freezeRow' method to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.
|
||||
* datagrid: Add 'clearChecked' method to clear all checked records.
|
||||
* datagrid: Add 'data' property to initialize the datagrid data.
|
||||
* linkbutton: Add 'iconAlgin' property to define the icon position, supported values are: 'left','right'.
|
||||
* menu: Add 'minWidth' property.
|
||||
* menu: The menu width can be automatically calculated.
|
||||
* tree: New events are available including 'onBeforeDrag','onStartDrag','onDragEnter','onDragOver','onDragLeave',etc.
|
||||
* combo: Add 'height' property to allow users to define the height of combo.
|
||||
* combo: Add 'reset' method.
|
||||
* numberbox: Add 'reset' method.
|
||||
* spinner: Add 'reset' method.
|
||||
* spinner: Add 'height' property to allow users to define the height of spinner.
|
||||
* searchbox: Add 'height' property to allow users to define the height of searchbox.
|
||||
* form: Add 'reset' method.
|
||||
* validatebox: Add 'delay' property to delay validating from the last inputting value.
|
||||
* validatebox: Add 'tipPosition' property to define the tip position, supported values are: 'left','right'.
|
||||
* validatebox: Multiple validate rules on a field is supported now.
|
||||
* slider: Add 'reversed' property to determine if the min value and max value will switch their positions.
|
||||
* progressbar: Add 'height' property to allow users to define the height of progressbar.
|
||||
|
||||
Version 1.3.1
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.3
|
||||
-----------
|
||||
* 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.
|
||||
|
||||
Version 1.2.6
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.2.5
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.2.4
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.2.3
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.2.2
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.2.1
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.2
|
||||
-------------
|
||||
* 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.
|
||||
|
||||
Version 1.1.2
|
||||
-------------
|
||||
* Bug
|
||||
* messager: When call show method in layout, the message window will be blocked. fixed.
|
||||
* Improvement
|
||||
* datagrid: Add validateRow method, remember the current editing row status when do editing action.
|
||||
* datagrid: Add the ability to create merged cells.
|
||||
* form: Add callback functions when loading data.
|
||||
* panel,window,dialog: Add maximize,minimize,restore,collapse,expand methods.
|
||||
* panel,tabs,accordion: The lazy loading feature is supported.
|
||||
* tabs: Add getSelected,update,getTab methods.
|
||||
* accordion: Add crud methods.
|
||||
* linkbutton: Accept an id option to set the id attribute.
|
||||
* tree: Enhance tree node operation.
|
||||
|
||||
Version 1.1.1
|
||||
-------------
|
||||
* Bug
|
||||
* form: Cannot clear the value of combobox and combotree component. fixed.
|
||||
* Improvement
|
||||
* tree: Add some useful methods such as 'getRoot','getChildren','update',etc.
|
||||
* datagrid: Add editable feature, improve performance while loading data.
|
||||
* datebox: Add destroy method.
|
||||
* combobox: Add destroy and clear method.
|
||||
* combotree: Add destroy and clear method.
|
||||
|
||||
Version 1.1
|
||||
-------------
|
||||
* Bug
|
||||
* messager: When call show method with timeout property setted, an error occurs while clicking the close button. fixed.
|
||||
* combobox: The editable property of combobox plugin is invalid. fixed.
|
||||
* window: The proxy box will not be removed when dragging or resizing exceed browser border in ie. fixed.
|
||||
* Improvement
|
||||
* menu: The menu item can use <a> markup to display a different page.
|
||||
* tree: The tree node can use <a> markup to act as a tree menu.
|
||||
* pagination: Add some event on refresh button and page list.
|
||||
* datagrid: Add a 'param' parameter for reload method, with which users can pass query parameter when reload data.
|
||||
* numberbox: Add required validation support, the usage is same as validatebox plugin.
|
||||
* combobox: Add required validation support.
|
||||
* combotree: Add required validation support.
|
||||
* layout: Add some method that can get a region panel and attach event handlers.
|
||||
* New Plugins
|
||||
* droppable: A droppable plugin that supports drag drop operation.
|
||||
* calendar: A calendar plugin that can either be embedded within a page or popup.
|
||||
* datebox: Combines a textbox with a calendar that let users to select date.
|
||||
* easyloader: A JavaScript loader that allows you to load plugin and their dependencies into your page.
|
||||
|
||||
Version 1.0.5
|
||||
* Bug
|
||||
* panel: The fit property of panel performs incorrectly. fixed.
|
||||
* Improvement
|
||||
* menu: Add a href attribute for menu item, with which user can display a different page in the current browser window.
|
||||
* form: Add a validate method to do validation for validatebox component.
|
||||
* dialog: The dialog can read collapsible,minimizable,maximizable and resizable attribute from markup.
|
||||
* New Plugins
|
||||
* validatebox: A validation plugin that checks to make sure the user's input value is valid.
|
||||
|
||||
Version 1.0.4
|
||||
-------------
|
||||
* Bug
|
||||
* panel: When panel is invisible, it is abnormal when resized. fixed.
|
||||
* panel: Memory leak in method 'destroy'. fixed.
|
||||
* messager: Memory leak when messager box is closed. fixed.
|
||||
* dialog: No onLoad event occurs when loading remote data. fixed.
|
||||
* Improvement
|
||||
* panel: Add method 'setTitle'.
|
||||
* window: Add method 'setTitle'.
|
||||
* dialog: Add method 'setTitle'.
|
||||
* combotree: Add method 'getValue'.
|
||||
* combobox: Add method 'getValue'.
|
||||
* form: The 'load' method can load data and fill combobox and combotree field correctly.
|
||||
|
||||
Version 1.0.3
|
||||
-------------
|
||||
* Bug
|
||||
* menu: When menu is show in a DIV container, it will be cropped. fixed.
|
||||
* layout: If you collpase a region panel and then expand it immediately, the region panel will not show normally. fixed.
|
||||
* accordion: If no panel selected then the first one will become selected and the first panel's body height will not set correctly. fixed.
|
||||
* Improvement
|
||||
* tree: Add some methods to support CRUD operation.
|
||||
* datagrid: Toolbar can accept a new property named 'disabled' to disable the specified tool button.
|
||||
* New Plugins
|
||||
* combobox: Combines a textbox with a list of options that users are able to choose from.
|
||||
* combotree: Combines combobox with drop-down tree component.
|
||||
* numberbox: Make input element can only enter number char.
|
||||
* dialog: rewrite the dialog plugin, dialog can contains toolbar and buttons.
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, interactive, javascript applications.</li>
|
||||
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
|
||||
<li>complete framework for HTML5 web page.</li>
|
||||
<li>easyui save your time and scales while developing your products.</li>
|
||||
<li>easyui is very easy but powerful.</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Row Editing DataGrid - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table id="dg" data-options="
|
||||
header:'#hh',
|
||||
iconCls: 'icon-edit',
|
||||
singleSelect: true,
|
||||
fit:true,
|
||||
fitColumns:true,
|
||||
border: false,
|
||||
scrollbarSize: 0,
|
||||
data: data,
|
||||
onClickRow: onClickRow
|
||||
">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100,editor:'textbox'">Product</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div id="hh">
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Row Editing</div>
|
||||
<div class="m-right">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()"></a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()"></a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var data = [
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
];
|
||||
$(function(){
|
||||
$('#dg').datagrid({
|
||||
data: data
|
||||
});
|
||||
});
|
||||
|
||||
var editIndex = undefined;
|
||||
function endEditing(){
|
||||
if (editIndex == undefined){return true}
|
||||
if ($('#dg').datagrid('validateRow', editIndex)){
|
||||
$('#dg').datagrid('endEdit', editIndex);
|
||||
editIndex = undefined;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function onClickRow(index){
|
||||
if (editIndex != index){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('selectRow', index)
|
||||
.datagrid('beginEdit', index);
|
||||
editIndex = index;
|
||||
} else {
|
||||
$('#dg').datagrid('selectRow', editIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
function removeit(){
|
||||
if (editIndex == undefined){return}
|
||||
$('#dg').datagrid('cancelEdit', editIndex)
|
||||
.datagrid('deleteRow', editIndex);
|
||||
editIndex = undefined;
|
||||
}
|
||||
function accept(){
|
||||
if (endEditing()){
|
||||
$('#dg').datagrid('acceptChanges');
|
||||
}
|
||||
}
|
||||
function reject(){
|
||||
$('#dg').datagrid('rejectChanges');
|
||||
editIndex = undefined;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Basic Dialog - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel" style="position:relative">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Basic Dialog</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer>
|
||||
<div class="m-buttongroup m-buttongroup-justified" style="width:100%">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top',plain:true">Picture</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top',plain:true">Clip Art</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top',plain:true">Shapes</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top',plain:true">SmartArt</a>
|
||||
</div>
|
||||
</footer>
|
||||
<div style="text-align:center;margin:50px 30px">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:80px;height:30px" onclick="$('#dlg1').dialog('open').dialog('center')">Login</a>
|
||||
</div>
|
||||
|
||||
<div id="dlg1" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Login'">
|
||||
<div style="margin-bottom:10px">
|
||||
<input class="easyui-textbox" prompt="Username" style="width:100%;height:30px">
|
||||
</div>
|
||||
<div>
|
||||
<input class="easyui-textbox" type="password" prompt="Password" style="width:100%;height:30px">
|
||||
</div>
|
||||
<div class="dialog-button">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dlg1').dialog('close')">Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Message Dialog - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel" style="position:relative">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Message Dialog</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer>
|
||||
<div class="m-buttongroup m-buttongroup-justified" style="width:100%;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top',plain:true">Picture</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top',plain:true">Clip Art</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top',plain:true">Shapes</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top',plain:true">SmartArt</a>
|
||||
</div>
|
||||
</footer>
|
||||
<div style="text-align:center;margin:50px 30px">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:80px;height:30px" onclick="$('#dlg1').dialog('open').dialog('center')">Click me</a>
|
||||
</div>
|
||||
|
||||
<div id="dlg1" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'Information'">
|
||||
<p>This is a message dialog.</p>
|
||||
<div class="dialog-button">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dlg1').dialog('close')">OK</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,54 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Basic Form - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel" style="position:relative;padding:20px">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Basic Form</div>
|
||||
<div class="m-right">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#ff').form('reset')" style="width:60px">Reset</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<form id="ff">
|
||||
<div>
|
||||
<label>Full name</label>
|
||||
<input class="easyui-textbox" prompt="Full name" style="width:100%">
|
||||
</div>
|
||||
<div>
|
||||
<label>Birthday</label>
|
||||
<input class="easyui-datebox" prompt="Birthday" data-options="editable:false,panelWidth:220,panelHeight:240,iconWidth:30" style="width:100%">
|
||||
</div>
|
||||
<div>
|
||||
<label>Password</label>
|
||||
<input class="easyui-textbox" type="password" prompt="Password" style="width:100%">
|
||||
</div>
|
||||
<div>
|
||||
<label>Number</label>
|
||||
<input class="easyui-numberbox" prompt="Number" style="width:100%">
|
||||
</div>
|
||||
<div>
|
||||
<label>Volumn</label>
|
||||
<input class="easyui-slider" value="10" style="width:100%">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<style scoped>
|
||||
form label{
|
||||
display: block;
|
||||
margin: 10px 0 5px 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Basic Layout - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Layout</div>
|
||||
<div class="m-left">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true">Back</a>
|
||||
</div>
|
||||
<div class="m-right">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" outline="true">Search</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer style="padding:2px 3px">
|
||||
<input class="easyui-textbox" style="width:100%;height:32px;" data-options="prompt:'Type something here',buttonText:'<span style=\'padding:0 15px\'>Send</span>'">
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Basic Menu - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Menu</div>
|
||||
<div class="m-right">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"></a>
|
||||
<a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more',menu:'#mm',menuAlign:'right',hasDownArrow:false"></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div id="mm" class="easyui-menu" style="width:150px;">
|
||||
<div data-options="iconCls:'icon-undo'">Undo</div>
|
||||
<div data-options="iconCls:'icon-redo'">Redo</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Cut</div>
|
||||
<div>Copy</div>
|
||||
<div>Paste</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Toolbar</div>
|
||||
<div data-options="iconCls:'icon-remove'">Delete</div>
|
||||
<div>Select All</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Menubar - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:70px">Home</a>
|
||||
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit',outline:true" style="width:70px">Edit</a>
|
||||
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help',outline:true" style="width:75px">Help</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:70px">About</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div id="mm1" class="easyui-menu" style="width:150px;">
|
||||
<div data-options="iconCls:'icon-undo'">Undo</div>
|
||||
<div data-options="iconCls:'icon-redo'">Redo</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Cut</div>
|
||||
<div>Copy</div>
|
||||
<div>Paste</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Toolbar</div>
|
||||
<div data-options="iconCls:'icon-remove'">Delete</div>
|
||||
<div>Select All</div>
|
||||
</div>
|
||||
<div id="mm2" style="width:100px;">
|
||||
<div>Help</div>
|
||||
<div>Update</div>
|
||||
<div>About</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, interactive, javascript applications.</li>
|
||||
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
|
||||
<li>complete framework for HTML5 web page.</li>
|
||||
<li>easyui save your time and scales while developing your products.</li>
|
||||
<li>easyui is very easy but powerful.</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Navigation Panel - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Navigation</div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="margin:50px 0 0;text-align:center">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.go('#p2')">Goto Panel2</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="p2" class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Panel2</div>
|
||||
<div class="m-left">
|
||||
<a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="margin:50px 0 0;text-align:center">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$.mobile.back()">Go Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1 +0,0 @@
|
||||
<!doctype html>
|
||||
@@ -1,63 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Basic Toolbar - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Basic Toolbar</div>
|
||||
<div class="m-left">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true">Back</a>
|
||||
</div>
|
||||
<div class="m-right">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton m-next" plain="true" outline="true">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="easyui-datalist" data-options="
|
||||
fit: true,
|
||||
lines: true,
|
||||
border: false,
|
||||
textFormatter: function(value){
|
||||
return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
|
||||
},
|
||||
onClickRow: function(index,row){
|
||||
$('#p2-title').html(row.text);
|
||||
$.mobile.go('#p2');
|
||||
}
|
||||
">
|
||||
<li>Large</li>
|
||||
<li>Spotted Adult Female</li>
|
||||
<li>Venomless</li>
|
||||
<li>Rattleless</li>
|
||||
<li>Green Adult</li>
|
||||
<li>Tailless</li>
|
||||
<li>With tail</li>
|
||||
<li>Adult Female</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="p2" class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<span id="p2-title" class="m-title">Detail</span>
|
||||
<div class="m-left">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" style="width:50px" onclick="$.mobile.back()">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="margin:50px 0 0;text-align:center">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.back()">Go Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Toolbar Button - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Toolbar Button</div>
|
||||
</div>
|
||||
</header>
|
||||
<footer>
|
||||
<div class="m-buttongroup m-buttongroup-justified" style="width:100%">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top',plain:true">Picture</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top',plain:true">Clip Art</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top',plain:true">Shapes</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top',plain:true">SmartArt</a>
|
||||
</div>
|
||||
</footer>
|
||||
<ul class="easyui-datalist" data-options="
|
||||
fit: true,
|
||||
lines: true,
|
||||
border: false
|
||||
">
|
||||
<li>Large</li>
|
||||
<li>Spotted Adult Female</li>
|
||||
<li>Venomless</li>
|
||||
<li>Rattleless</li>
|
||||
<li>Green Adult</li>
|
||||
<li>Tailless</li>
|
||||
<li>With tail</li>
|
||||
<li>Adult Female</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Menu on Toolbar - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Menu on Toolbar</div>
|
||||
<div class="m-left">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-man',plain:true"></a>
|
||||
</div>
|
||||
<div class="m-right">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true"></a>
|
||||
<a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more',plain:true,hasDownArrow:false,menu:'#mm',menuAlign:'right'"></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="mm" class="easyui-menu" style="width:150px;" data-options="itemHeight:30,noline:true">
|
||||
<div data-options="iconCls:'icon-undo'">Undo</div>
|
||||
<div data-options="iconCls:'icon-redo'">Redo</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Cut</div>
|
||||
<div>Copy</div>
|
||||
<div>Paste</div>
|
||||
<div class="menu-sep"></div>
|
||||
<div>Toolbar</div>
|
||||
<div data-options="iconCls:'icon-remove'">Delete</div>
|
||||
<div>Select All</div>
|
||||
</div>
|
||||
<ul class="easyui-datalist" data-options="
|
||||
fit: true,
|
||||
lines: true,
|
||||
border: false,
|
||||
textFormatter: function(value){
|
||||
return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
|
||||
},
|
||||
onClickRow: function(index,row){
|
||||
$('#p2-title').html(row.text);
|
||||
$.mobile.go('#p2');
|
||||
}
|
||||
">
|
||||
<li>Large</li>
|
||||
<li>Spotted Adult Female</li>
|
||||
<li>Venomless</li>
|
||||
<li>Rattleless</li>
|
||||
<li>Green Adult</li>
|
||||
<li>Tailless</li>
|
||||
<li>With tail</li>
|
||||
<li>Adult Female</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="p2" class="easyui-navpanel">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<span id="p2-title" class="m-title">Detail</span>
|
||||
<div class="m-left">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" style="width:50px" onclick="$.mobile.back()">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="margin:50px 0 0;text-align:center">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.back()">Go Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Basic Tree - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel" style="padding:10px">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Basic Tree</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="easyui-tree" data-options="animate:true">
|
||||
<li>
|
||||
<span>My Documents</span>
|
||||
<ul>
|
||||
<li data-options="state:'closed'">
|
||||
<span>Photos</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Friend</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Wife</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Company</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>Program Files</span>
|
||||
<ul>
|
||||
<li>Intel</li>
|
||||
<li>Java</li>
|
||||
<li>Microsoft Office</li>
|
||||
<li>Games</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>index.html</li>
|
||||
<li>about.html</li>
|
||||
<li>welcome.html</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Drag Drop Tree Nodes - jQuery EasyUI Mobile Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="easyui-navpanel" style="padding:10px">
|
||||
<header>
|
||||
<div class="m-toolbar">
|
||||
<div class="m-title">Drag Drop Tree Nodes</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="easyui-tree" data-options="animate:true,dnd:true">
|
||||
<li>
|
||||
<span>My Documents</span>
|
||||
<ul>
|
||||
<li data-options="state:'closed'">
|
||||
<span>Photos</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Friend</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Wife</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Company</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>Program Files</span>
|
||||
<ul>
|
||||
<li>Intel</li>
|
||||
<li>Java</li>
|
||||
<li>Microsoft Office</li>
|
||||
<li>Games</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>index.html</li>
|
||||
<li>about.html</li>
|
||||
<li>welcome.html</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, interactive, javascript applications.</li>
|
||||
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
|
||||
<li>complete framework for HTML5 web page.</li>
|
||||
<li>easyui save your time and scales while developing your products.</li>
|
||||
<li>easyui is very easy but powerful.</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accordion Actions - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Accordion Actions</h2>
|
||||
<p>Click the buttons below to add or remove accordion items.</p>
|
||||
<div style="margin:20px 0 10px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectPanel()">Select</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addPanel()">Add</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removePanel()">Remove</a>
|
||||
</div>
|
||||
<div id="aa" class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function selectPanel(){
|
||||
$.messager.prompt('Prompt','Please enter the panel title:',function(s){
|
||||
if (s){
|
||||
$('#aa').accordion('select',s);
|
||||
}
|
||||
});
|
||||
}
|
||||
var idx = 1;
|
||||
function addPanel(){
|
||||
$('#aa').accordion('add',{
|
||||
title:'Title'+idx,
|
||||
content:'<div style="padding:10px">Content'+idx+'</div>'
|
||||
});
|
||||
idx++;
|
||||
}
|
||||
function removePanel(){
|
||||
var pp = $('#aa').accordion('getSelected');
|
||||
if (pp){
|
||||
var index = $('#aa').accordion('getPanelIndex',pp);
|
||||
$('#aa').accordion('remove',index);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading Accordion Content with AJAX - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Loading Accordion Content with AJAX</h2>
|
||||
<p>Click AJAX panel header to load content via AJAX.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="Ajax" data-options="href:'_content.html'" style="padding:10px">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Accordion - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Basic Accordion</h2>
|
||||
<p>Click on panel header to show its content.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
|
||||
<ul class="easyui-tree">
|
||||
<li>
|
||||
<span>Foods</span>
|
||||
<ul>
|
||||
<li>
|
||||
<span>Fruits</span>
|
||||
<ul>
|
||||
<li>apple</li>
|
||||
<li>orange</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span>Vegetables</span>
|
||||
<ul>
|
||||
<li>tomato</li>
|
||||
<li>carrot</li>
|
||||
<li>cabbage</li>
|
||||
<li>potato</li>
|
||||
<li>lettuce</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
{"total":28,"rows":[
|
||||
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
|
||||
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
|
||||
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
|
||||
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
|
||||
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
|
||||
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
|
||||
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
|
||||
]}
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Keep Expandable Panel in Accordion - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Keep Expandable Panel in Accordion</h2>
|
||||
<p>Keep a expandable panel and prevent it from collapsing.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="Top Panel" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:10px;">
|
||||
<input class="easyui-searchbox" prompt="Enter something here" style="width:300px;height:25px;">
|
||||
</div>
|
||||
<div title="About" data-options="selected:true" style="padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Title1" style="padding:10px">
|
||||
<p>Content1</p>
|
||||
</div>
|
||||
<div title="Title2" style="padding:10px">
|
||||
<p>Content2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid Accordion - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Fluid Accordion</h2>
|
||||
<p>This example shows how to set the width of accordion to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:100%;height:180px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>width: 100%</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help',href:'_content.html'" style="padding:10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
|
||||
<div class="easyui-accordion" style="width:50%;height:180px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>width: 50%</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help',href:'_content.html'" style="padding:10px;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Accordion Panels - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Multiple Accordion Panels</h2>
|
||||
<p>Enable 'multiple' mode to expand multiple panels at one time.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;height1:300px;">
|
||||
<div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p>
|
||||
</div>
|
||||
<div title="Java" style="padding:10px;">
|
||||
<p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
|
||||
</div>
|
||||
<div title="C#" style="padding:10px;">
|
||||
<p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
|
||||
</div>
|
||||
<div title="Ruby" style="padding:10px;">
|
||||
<p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
|
||||
</div>
|
||||
<div title="Fortran" style="padding:10px;">
|
||||
<p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Accordion Tools - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Accordion Tools</h2>
|
||||
<p>Click the tools on top right of panel to perform actions.</p>
|
||||
<div style="margin:20px 0 10px 0;"></div>
|
||||
<div class="easyui-accordion" style="width:500px;height:300px;">
|
||||
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
|
||||
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
|
||||
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
|
||||
</div>
|
||||
<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
|
||||
<p>The accordion allows you to provide multiple panels and display one ore more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
|
||||
</div>
|
||||
<div title="DataGrid" style="padding:10px" data-options="
|
||||
selected:true,
|
||||
tools:[{
|
||||
iconCls:'icon-reload',
|
||||
handler:function(){
|
||||
$('#dg').datagrid('reload');
|
||||
}
|
||||
}]">
|
||||
<table id="dg" class="easyui-datagrid"
|
||||
data-options="url:'datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-options="field:'itemid',width:80">Item ID</th>
|
||||
<th data-options="field:'productid',width:100">Product ID</th>
|
||||
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
|
||||
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
|
||||
<th data-options="field:'attr1',width:150">Attribute</th>
|
||||
<th data-options="field:'status',width:50,align:'center'">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Calendar - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Basic Calendar</h2>
|
||||
<p>Click to select date.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-calendar" style="width:250px;height:250px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Calendar - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Custom Calendar</h2>
|
||||
<p>This example shows how to custom the calendar date by using 'formatter' function.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div>
|
||||
|
||||
<script>
|
||||
var d1 = Math.floor((Math.random()*30)+1);
|
||||
var d2 = Math.floor((Math.random()*30)+1);
|
||||
function formatDay(date){
|
||||
var m = date.getMonth()+1;
|
||||
var d = date.getDate();
|
||||
var opts = $(this).calendar('options');
|
||||
if (opts.month == m && d == d1){
|
||||
return '<div class="icon-ok md">' + d + '</div>';
|
||||
} else if (opts.month == m && d == d2){
|
||||
return '<div class="icon-search md">' + d + '</div>';
|
||||
}
|
||||
return d;
|
||||
}
|
||||
</script>
|
||||
<style scoped="scoped">
|
||||
.md{
|
||||
height:16px;
|
||||
line-height:16px;
|
||||
background-position:2px center;
|
||||
text-align:right;
|
||||
font-weight:bold;
|
||||
padding:0 2px;
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Disable Calendar Date - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Disable Calendar Date</h2>
|
||||
<p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="
|
||||
validator: function(date){
|
||||
if (date.getDay() == 1){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>First Day of Week - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>First Day of Week</h2>
|
||||
<p>Choose the first day of the week.</p>
|
||||
|
||||
<div style="margin:20px 0">
|
||||
<select onchange="$('#cc').calendar({firstDay:this.value})">
|
||||
<option value="0">Sunday</option>
|
||||
<option value="1">Monday</option>
|
||||
<option value="2">Tuesday</option>
|
||||
<option value="3">Wednesday</option>
|
||||
<option value="4">Thursday</option>
|
||||
<option value="5">Friday</option>
|
||||
<option value="6">Saturday</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid Calendar - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Fluid Calendar</h2>
|
||||
<p>This example shows how to set the width of calendar to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<div class="easyui-panel" style="width:700px;padding:10px">
|
||||
<p>width: 50%, height: 250px</p>
|
||||
<div class="easyui-calendar" style="width:50%;height:250px;"></div>
|
||||
<p>width: 30%, height: 40%</p>
|
||||
<div class="easyui-calendar" style="width:30%;height:40%;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Combo Animation - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Combo Animation</h2>
|
||||
<p>Change the animation type when open & close the drop-down panel.</p>
|
||||
<div style="margin:20px 0">
|
||||
<span>Animation Type:</span>
|
||||
<select onchange="changeAnimation(this.value)">
|
||||
<option>slide</option>
|
||||
<option>fade</option>
|
||||
<option>show</option>
|
||||
</select>
|
||||
</div>
|
||||
<select id="cc" style="width:150px"></select>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#cc').combo();
|
||||
changeAnimation('slide');
|
||||
});
|
||||
function changeAnimation(atype){
|
||||
$('#cc').combo('panel').panel({
|
||||
openAnimation:atype,
|
||||
closeAnimation:(atype=='show'?'hide':atype)
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-42
@@ -1,42 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Combo - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Basic Combo</h2>
|
||||
<p>Click the right arrow button to show drop down panel that can be filled with any content.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<select id="cc" style="width:150px"></select>
|
||||
<div id="sp">
|
||||
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
|
||||
<div style="padding:10px">
|
||||
<input type="radio" name="lang" value="01"><span>Java</span><br/>
|
||||
<input type="radio" name="lang" value="02"><span>C#</span><br/>
|
||||
<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
|
||||
<input type="radio" name="lang" value="04"><span>Basic</span><br/>
|
||||
<input type="radio" name="lang" value="05"><span>Fortran</span>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#cc').combo({
|
||||
required:true,
|
||||
editable:false
|
||||
});
|
||||
$('#sp').appendTo($('#cc').combo('panel'));
|
||||
$('#sp input').click(function(){
|
||||
var v = $(this).val();
|
||||
var s = $(this).next('span').text();
|
||||
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,86 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComboBox Actions - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>ComboBox</h2>
|
||||
<p>Click the buttons below to perform actions.</p>
|
||||
|
||||
<div style="margin:20px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function setvalue(){
|
||||
$.messager.prompt('SetValue','Please input the value(CO,NV,UT,etc):',function(v){
|
||||
if (v){
|
||||
$('#state').combobox('setValue',v);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<select id="state" class="easyui-combobox" name="state" style="width:200px;">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,71 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic ComboBox - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Basic ComboBox</h2>
|
||||
<p>Type in ComboBox to try auto complete.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<select class="easyui-combobox" name="state" style="width:200px;">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,22 +0,0 @@
|
||||
[{
|
||||
"id":1,
|
||||
"text":"Java",
|
||||
"desc":"Write once, run anywhere"
|
||||
},{
|
||||
"id":2,
|
||||
"text":"C#",
|
||||
"desc":"One of the programming languages designed for the Common Language Infrastructure"
|
||||
},{
|
||||
"id":3,
|
||||
"text":"Ruby",
|
||||
"selected":true,
|
||||
"desc":"A dynamic, reflective, general-purpose object-oriented programming language"
|
||||
},{
|
||||
"id":4,
|
||||
"text":"Perl",
|
||||
"desc":"A high-level, general-purpose, interpreted, dynamic programming language"
|
||||
},{
|
||||
"id":5,
|
||||
"text":"Basic",
|
||||
"desc":"A family of general-purpose, high-level programming languages"
|
||||
}]
|
||||
@@ -1,47 +0,0 @@
|
||||
[{
|
||||
"value":"f20",
|
||||
"text":"Firefox 2.0 or higher",
|
||||
"group":"Firefox"
|
||||
},{
|
||||
"value":"f15",
|
||||
"text":"Firefox 1.5.x",
|
||||
"group":"Firefox"
|
||||
},{
|
||||
"value":"f10",
|
||||
"text":"Firefox 1.0.x",
|
||||
"group":"Firefox"
|
||||
},{
|
||||
"value":"ie7",
|
||||
"text":"Microsoft Internet Explorer 7.0 or higher",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"ie6",
|
||||
"text":"Microsoft Internet Explorer 6.x",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"ie5",
|
||||
"text":"Microsoft Internet Explorer 5.x",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"ie4",
|
||||
"text":"Microsoft Internet Explorer 4.x",
|
||||
"group":"Microsoft Internet Explorer"
|
||||
},{
|
||||
"value":"op9",
|
||||
"text":"Opera 9.0 or higher",
|
||||
"group":"Opera"
|
||||
},{
|
||||
"value":"op8",
|
||||
"text":"Opera 8.x",
|
||||
"group":"Opera"
|
||||
},{
|
||||
"value":"op7",
|
||||
"text":"Opera 7.x",
|
||||
"group":"Opera"
|
||||
},{
|
||||
"value":"Safari",
|
||||
"text":"Safari"
|
||||
},{
|
||||
"value":"Other",
|
||||
"text":"Other"
|
||||
}]
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Custom Format in ComboBox</h2>
|
||||
<p>This sample shows how to custom the format of list item.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<input class="easyui-combobox" name="language" data-options="
|
||||
url: 'combobox_data1.json',
|
||||
method: 'get',
|
||||
valueField: 'id',
|
||||
textField: 'text',
|
||||
panelWidth: 350,
|
||||
panelHeight: 'auto',
|
||||
formatter: formatItem
|
||||
">
|
||||
<script type="text/javascript">
|
||||
function formatItem(row){
|
||||
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
|
||||
'<span style="color:#888">' + row.desc + '</span>';
|
||||
return s;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Load Dynamic ComboBox Data - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Load Dynamic ComboBox Data</h2>
|
||||
<p>Click the button below to load data.</p>
|
||||
|
||||
<div style="margin:20px 0;">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', 'combobox_data1.json')">LoadData</a>
|
||||
</div>
|
||||
|
||||
<input class="easyui-combobox" id="language" name="language"
|
||||
data-options="valueField:'id',textField:'text'">
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fluid ComboBox - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Fluid ComboBox</h2>
|
||||
<p>This example shows how to set the width of combobox to a percentage of its parent container.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<p>width: 50%</p>
|
||||
<input class="easyui-combobox" name="language" style="width:50%"
|
||||
data-options="
|
||||
url: 'combobox_data2.json',
|
||||
method: 'get',
|
||||
valueField:'value',
|
||||
textField:'text',
|
||||
groupField:'group'
|
||||
">
|
||||
<p>width: 30%</p>
|
||||
<input class="easyui-combobox" name="language" style="width:30%"
|
||||
data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
panelHeight:'auto'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Group ComboBox - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Group ComboBox</h2>
|
||||
<p>This example shows how to display combobox items in groups.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<input class="easyui-combobox" name="browser" style="width:280px;" data-options="
|
||||
url: 'combobox_data2.json',
|
||||
method: 'get',
|
||||
valueField:'value',
|
||||
textField:'text',
|
||||
groupField:'group'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ComboBox with Extra Icons- jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>ComboBox with Extra Icons</h2>
|
||||
<p>The user can attach extra icons to the ComboBox.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<input class="easyui-combobox"
|
||||
name="language"
|
||||
data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
panelHeight:'auto',
|
||||
icons:[{
|
||||
iconCls:'icon-add'
|
||||
},{
|
||||
iconCls:'icon-cut'
|
||||
}]
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,71 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiline ComboBox - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Multiline ComboBox</h2>
|
||||
<p>This example shows how to create a multiline ComboBox.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<select class="easyui-combobox" name="state" data-options="multiple:true,multiline:true" style="width:200px;height:50px">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple Select - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Load Dynamic ComboBox Data</h2>
|
||||
<p>Drop down the panel and select multiple items.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
|
||||
<input class="easyui-combobox"
|
||||
name="language"
|
||||
data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
multiple:true,
|
||||
panelHeight:'auto'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,73 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Navigate ComboBox - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Navigate ComboBox</h2>
|
||||
<p>Navigate through combobox items width keyboard to select an item.</p>
|
||||
<div style="margin:20px 0;">
|
||||
<input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">
|
||||
<span>SelectOnNavigation</span>
|
||||
</div>
|
||||
|
||||
<select id="cc" class="easyui-combobox" name="state" style="width:200px;">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Binding to Remote Data - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Binding to Remote Data</h2>
|
||||
<p>The ComboBox is bound to a remote data.</p>
|
||||
<div style="margin:20px 0"></div>
|
||||
<input class="easyui-combobox"
|
||||
name="language"
|
||||
data-options="
|
||||
url:'combobox_data1.json',
|
||||
method:'get',
|
||||
valueField:'id',
|
||||
textField:'text',
|
||||
panelHeight:'auto'
|
||||
">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user