下載后增加：
Add these lines to the HEAD section of your HTML document:
<!-- Include one of jTable styles. -->
<link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>
You can select any theme and color schema in themes folder.
NOTE: You must also add needed jQuery and jQueryUI JavaScript and CSS files before importing jTable files.
Creating a container
jTable needs only a container element for your table.
<div id="PersonTableContainer"></div>
Creating a jTable instance
Add these JavaScript codes to your page:
<script type="text/javascript"> $(document).ready(function () { $('#PersonTableContainer').jtable({ title: 'Table of people', actions: { listAction: '/GettingStarted/PersonList', createAction: '/GettingStarted/CreatePerson', updateAction: '/GettingStarted/UpdatePerson', deleteAction: '/GettingStarted/DeletePerson' }, fields: { PersonId: { key: true, list: false }, Name: { title: 'Author Name', width: '40%' }, Age: { title: 'Age', width: '20%' }, RecordDate: { title: 'Record date', width: '30%', type: 'date', create: false, edit: false } } }); }); </script>
global options:
addRecordButton: $('#addBtn'),A jQuery object that can be used instead of the '+ add new record' link. Thus you can set any element on the page to open the 'add new record' dialog.
paging: true,
If paging enabled, this value indicates number of rows in a page. pageSize option can be changed later as like below:
|
1
|
$(
'#MyTableContainer'
).jtable(
'option'
,
'pageSize'
, 20);
|
pageSizes :[10, 25, 50, 100, 250, 500],
boolean default: true
If paging enabled, this value can be used to make 'page size change combobox' visible or not.
selecting boolean default: false
Indicates that whether jTable allows user to select rows on the table.
defaultSorting string default: none
Default sorting of table. It can be a field name of a column of the table. For instance, if you want table sorted by Name by default, defaultSorting can be 'Name ASC' or 'Name DESC'.
selectingCheckboxes boolean default: false
Indicates that whether jTable shows checkbox column for selecting.
這個需要selecting為true。
multiselect:default false
sorting: true,
defaultSorting: 'id ASC',
分頁示例：
<html> <head> <link href="themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> <link href="Scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script src="Scripts/jtable/jquery.jtable.js" type="text/javascript"></script> </head> <body> <div id="PeopleTableContainer" style="width: 600px;"></div> <script type="text/javascript"> $(document).ready(function () { //Prepare jTable $('#PeopleTableContainer').jtable({ title: 'Table of people', paging: true, pageSize: 2, sorting: true, defaultSorting: 'Name ASC', actions: { listAction: 'PersonActionsPagedSorted.php?action=list', createAction: 'PersonActionsPagedSorted.php?action=create', updateAction: 'PersonActionsPagedSorted.php?action=update', deleteAction: 'PersonActionsPagedSorted.php?action=delete' }, fields: { PersonId: { key: true, create: false, edit: false, list: false }, Name: { title: 'Author Name', width: '40%' }, Age: { title: 'Age', width: '20%' }, RecordDate: { title: 'Record date', width: '30%', type: 'date', create: false, edit: false } } }); //Load person list from server $('#PeopleTableContainer').jtable('load'); }); </script> </body> </html>
獲取數據的代碼：
<?php try { //Open database connection $con = mysql_connect("localhost","root","sm159357"); mysql_select_db("jtabletestdb", $con); //Getting records (listAction) if($_GET["action"] == "list") { //Get record count $result = mysql_query("SELECT COUNT(*) AS RecordCount FROM people;"); $row = mysql_fetch_array($result); $recordCount = $row['RecordCount']; //Get records from database $result = mysql_query("SELECT * FROM people ORDER BY " . $_GET["jtSorting"] . " LIMIT " . $_GET["jtStartIndex"] . "," . $_GET["jtPageSize"] . ";"); //Add all records to an array $rows = array(); while($row = mysql_fetch_array($result)) { $rows[] = $row; } //Return result to jTable $jTableResult = array(); $jTableResult['Result'] = "OK"; $jTableResult['TotalRecordCount'] = $recordCount; $jTableResult['Records'] = $rows; print json_encode($jTableResult); } //Creating a new record (createAction) else if($_GET["action"] == "create") { //Insert record into database $result = mysql_query("INSERT INTO people(Name, Age, RecordDate) VALUES('" . $_POST["Name"] . "', " . $_POST["Age"] . ",now());"); //Get last inserted record (to return to jTable) $result = mysql_query("SELECT * FROM people WHERE PersonId = LAST_INSERT_ID();"); $row = mysql_fetch_array($result); //Return result to jTable $jTableResult = array(); $jTableResult['Result'] = "OK"; $jTableResult['Record'] = $row; print json_encode($jTableResult); } //Updating a record (updateAction) else if($_GET["action"] == "update") { //Update record in database $result = mysql_query("UPDATE people SET Name = '" . $_POST["Name"] . "', Age = " . $_POST["Age"] . " WHERE PersonId = " . $_POST["PersonId"] . ";"); //Return result to jTable $jTableResult = array(); $jTableResult['Result'] = "OK"; print json_encode($jTableResult); } //Deleting a record (deleteAction) else if($_GET["action"] == "delete") { //Delete from database $result = mysql_query("DELETE FROM people WHERE PersonId = " . $_POST["PersonId"] . ";"); //Return result to jTable $jTableResult = array(); $jTableResult['Result'] = "OK"; print json_encode($jTableResult); } //Close database connection mysql_close($con); } catch(Exception $ex) { //Return error message $jTableResult = array(); $jTableResult['Result'] = "ERROR"; $jTableResult['Message'] = $ex->getMessage(); print json_encode($jTableResult); } ?>
數據字段filed參數：
id: {
key: true,
title:'ID',
width: '5%',
},
A boolean value that indicates whether this field is the key (primary key) field of the record. Every record must has one and only one key field that is used on update and delete operations.
If a field is marked as key, create and edit options are set to false as default.
If a key field is not editable in edit form, a hidden input element is generated for it. Thus, key value is post to server. If the key field is editable (with setting edit option to true), key's original value (the value before update) is post to server asjtRecordKey.
display function default: none
This option is a function that allows you to define a fully custom column for table. jTable directly shows return value of this function on the table. See the sample below:
TestColumn: {
title: 'Test',
display: function (data) {
return '<b>test</b>';
}
}
This sample Test column returns a bold 'test' string for all rows. You can return any text, html code or jQuery object that will be shown on the table. This method is called for each row. You can get record of the row using data.record. So, if your record has Name property, you can use data.record.Name property to get the Name.
你能使用data.record來得到一個記錄。得到某個屬性data.record.propertyname
display function can be used for many purposes such as creating calculated columns, opening child tables for a row... etc. See demos for detailed usage.
input function default: none
This option is a function that allows you to define a fully custom input element for create and edit forms. jTable directly shows return value of this function on the form. See the sample below:
Name: { title: 'Name', width: '20%', input: function (data) { if (data.record) { return '<input type="text" name="Name" style="width:200px" value="' + data.record.Name + '" />'; } else { return '<input type="text" name="Name" style="width:200px" value="enter your name here" />'; } } }
data argument has some fields those can be used while creating the input:
- data.formType: Can be 'create' or 'edit' according to the form.
- data.form: Reference to the form element as jQuery selection.
- data.record: Gets the editing record if this input is being created for edit form (if formType='edit'). So, it's undefined for 'create' form.
- data.value: Gets current value of the field. This is default value (if defined) of field for create form, current value of field for edit form.
While jTable automatically creates appropriate input element for each field, you can use input option to create custom input elements. Remember to set name attribute of input element if you want to post this field to the server.
inputClass string default: none
A string value that can be set as the class of an input item for this field in create/edit forms. So you can style input elements in the forms for this field. This can be useful when working with validation plug-ins (we will see soon).
inputTitle string default: none
This option can be used to show a different title for a field in edit/create forms. If it's not set, input title will be same as title option.
options object, array, URL or a function default: none
If this field's value will be selected in an option list (combobox as default, can be radio button list), you must supply a source. An option source can be one of these values:
object: Property names are values, property values are display texts.
array: An array of options.
URL: A URL to download the option list for this field.
function: A function that takes some arguments and returns an object, an array or a URL string.
Defining an object
This is the simplest way of defining options is creating an object like shown below:
PhoneType: {
title: 'Phone type',
options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }
}
Thus, jTable creates a dropdown list in edit/create form for that field:
Defining an array
You can also define an array of options as shown below:
PhoneType: {
title:
'Phone type'
,
options: [{ Value:
'1'
, DisplayText:
'Home phone'
}, { Value:
'2'
, DisplayText:
'Office phone'
}, { Value:
'2'
, DisplayText:
'Cell phone'
}]
}
Defining a URL
You can define a URL to download array of options:
|
1
2
3
4
|
PhoneType: {
title:
'Class year'
,
options:
'/Demo/GetPhoneTypes.php'
}
|
Your URL must return array of options just like described in the section above. A successfull return value from server is shown below:
{ "Result":"OK", "Options":[ { "DisplayText":"Home phone", "Value":"1" }, { "DisplayText":"Office phone", "Value":"2" }, { "DisplayText":"Cell phone", "Value":"3" } ] }
Result can be "OK" or "ERROR". If it's "ERROR", you can supply a "Message" property to show to the user.
當為ERROR，顯示message信息，ok時不顯示。、
type: 'radiobutton', 要加這個，不加則顯示select下拉框。
options:{ '0' : '否', '1' : '是' },
defaultValue: '0',
顯示：
options:<?php $this->getArr();?>
getArrr()數組返回的是json_encode(array(0=>"user1",1=>'user2"));
編輯時會生成一個下拉列表，顯示list的時候顯示當前字段key的值，比如當前field為0，顯示user1.
一定要json_encode，否則報錯，array to string conversion error
也可以返回一個數值數組json_encode(array(0,1,2)，這樣會生成
<select>
<option value=0>0</option>
<option value=1>1</option>
增加記錄按鈕：
$('#TableContainer').jtable({
addRecordButton: $('#addBtn'),
A column (related to a field) can be showed or hided by user or this option. Values can be:
- fixed: This column is always visible and can not be hided by the user.
- visible: This column is visible as default but can be hided by the user.
- hidden: This column is hidden as default but can be showed by the user.
Note: User can open column selection list by right clicking the table header if columnSelectable option is true (it's true as default).
fieldOptions的字段
A boolean value that indicates whether this field is shown in the table.
感覺visibility:'hidden'和list:false功能相同，都是隱藏。
create:默認true
A boolean value that indicates whether this field is shown in the create record form.
Default value is false for the key field. True for other fields.
edit：true：
A boolean value that indicates whether this field is shown in the edit record form.
Default value is false for the key field. True for other fields.
defaultValue：string，默認none
You can set a default value for a field. It must be a valid value. For instance, if the field is an option list, it must be one of these options.
This option is a function that allows you to define a fully custom input element for create and edit forms. jTable directly shows return value of this function on the form. See the sample below:
Name: {
title: 'Name',
width: '20%',
input: function (data) {
if (data.record) {
return '<input type="text" name="Name" style="width:200px" value="' + data.record.Name + '" />';
} else {
return '<input type="text" name="Name" style="width:200px" value="enter your name here" />';
}
}
}
This option can be used to show a different title for a field in edit/create forms. If it's not set, input title will be same as title option.
A string value that can be set as the class of an input item for this field in create/edit forms. So you can style input elements in the forms for this field. This can be useful when working with validation plug-ins (we will see soon).
如InputClass為cronBlock,返回
<input class="cronBlock" id="Edit-name" type="text" name="name">
load(postData, completeCallback)
Loads records from the server. All parameters are optional. If you want to pass some parameters to the server, you can pass them in the postData parameter while calling the load method, like this:
$('#PersonTable').jtable('load', { CityId: 2, Name: 'Halil' });
You can get people who are living in city 2 and whose name is Halil like shown above. Surely, you must handle these parameters in the server side. Also, you can pass a callback method as completeCallback, that is called when loading of data is successfully completed.
http://www.jtable.org/demo/pagingandsorting
犯的一個錯誤：
"location": { title: "<?php echo Yii::t($this->i18n_common, 'loginname'); ?>", width: '10%', display:function(data){ last_login_ip=data.record.last_login_ip; url="<?php echo Yii::app()->createUrl('static/online/location');?>"; return '<a class="tip" rel="'+url+'&ip='+ last_login_ip+'">查看</a>'; } },
最開始用
$('a.tip').cluetip({sticky: true, closePosition: 'title', arrows: true});
沒起作用，$('a.tip').size()總是為0，這是因為數據沒有加載完全，我們用$獲取不到。這時候放在回調函數里面就可以正確執行了：
$('#TableContainer').jtable('load',{},function(){
$('a.tip').cluetip({sticky: true, closePosition: 'title', arrows: true});
}
);
最后發現，上面的做法是有問題的，當翻頁時， $('a.tip').cluetip({ 就不起作用了。所以點擊沒有效果。
應該用到一個事件:
This event is raised when jTable loads records from server and refreshes the table (If paging enabled, this event is also raised when user changes the current page). You can get all records loaded from server by data.records argument. You can get the response JSON object returned from server as data.serverResponse.
如何使用delete：
deleteAction: '/Demo/DeleteStudent',
fields: {
StudentId: {
key: true,
create:
false
,
edit:
false
,
list:
false
},
//Delete from database
$result
= mysql_query(
"DELETE FROM Student WHERE StudentId = "
.
$_POST
[
"StudentId"
] .
";"
);
//Return result to jTable
$jTableResult
=
array
();
$jTableResult
[
'Result'
] =
"OK"
;
print
json_encode(
$jTableResult
);
This event is raised just before AJAX request to load records from server. It has no arguments.