Field options（字段選項）
- columnResizable
- create
- edit
- defaultValue
- dependsOn
- display
- input
- inputClass
- inputTitle
- key
- list
- listClass
- options
- optionsSorting
- sorting
- title
- type
- visibility
- width
字段定義定義了一條記錄中字段的結(jié)構(gòu)和行為。像下面這樣格式：
FieldName: {
//Field options
}
<a id="columnResizable"></a>
columnResizable boolean default: true
一個bool值，代表列是否可以被用戶改變大小妥泉。
<a id="create"></a>
create boolean default: true
bool值，代表是否在添加的表單中顯示阐枣。
key字段默認(rèn)是false，其余的默認(rèn)是true奄抽。
<a id="edit"></a>
edit boolean default: true
bool值蔼两，代表是否在編輯的表單中顯示。
key字段默認(rèn)是false逞度，其余的默認(rèn)是true额划。
<a id="defaultValue"></a>
defaultValue string default: none
你可以為這個字段設(shè)置一個默認(rèn)值。但必須是一個有效的值档泽。例如俊戳，這個字段是一個選項列表，那么這個值必須是這個列表中的其中一個馆匿。
<a id="dependsOn"></a>
dependsOn string or array default: none
這個選項用于創(chuàng)建級聯(lián)下拉列表抑胎。如果一個下拉列表字段依賴于另外一個，jTable可以自動創(chuàng)建級聯(lián)下拉列表渐北。查看demo了解使用方法阿逃。
下面是一個簡單的 國家/城市 級聯(lián)下拉列表案例：
CountryId: {
title: 'Country',
options: 'Demo/GetCountryOptions',
list: false
},
CityId: {
title: 'City',
dependsOn: 'CountryId', //Cities depends on countries.
options: function (data) {
if (data.source == 'list') {
//Return url of all cities for optimization.
return 'Demo/GetCityOptions?countryId=0';
}
//This code runs when user opens edit/create form or changes country combobox on an edit/create form.
return 'Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId;
}
}
一個字段可以依賴于多個字段。在上面的案例中，你可以用逗號把依賴的字段分開：'ContinentalId,CountryId'恃锉，或者用一個數(shù)組也可以：dependsOn: ['ContinentalId', 'CountryId']
更多信息查看options搀菩。
<a id="display"></a>
display function default: none
這個選項是一個function，允許你完全自定義表格中的一列破托。jTable直接展示function返回的結(jié)果到表格上肪跋。看下面的案例：
TestColumn: {
title: 'Test',
display: function (data) {
return '<b>test</b>';
}
}
‘TestColumn’列返回了一個加粗的‘test’文案土砂，會應(yīng)用到所有行州既。你可以返回任何text、html或者jQuery object萝映，返回結(jié)果會直接展示到table上易桃。每一行都會調(diào)用這個方法。在這個函數(shù)中锌俱，你可以使用data.record獲取當(dāng)前行的數(shù)據(jù)。例如：用data.record.name來獲取數(shù)據(jù)里面的name屬性值敌呈。
這個函數(shù)可以有很多用處贸宏，比如動態(tài)創(chuàng)建列、打開子表（點(diǎn)擊行的時候）磕洪。
<a id="input"></a>
input function default: none
這個選項是一個function吭练，允許你定義一個完全自定義的輸入元素，在添加/編輯表單中使用析显。jTable直接將返回結(jié)果展示到表單中鲫咽。看下面的案例：
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 參數(shù)包含一些屬性用于創(chuàng)建輸入框的時候谷异。
- data.formType：可以是‘create’或者‘edit’（對于表單）分尸。
- data.form：是這個表單的一個jQuery選擇器。
- data.record：如果當(dāng)前是編輯表單（formType=‘edit’）歹嘹，獲取當(dāng)前行的數(shù)據(jù)箩绍。所以當(dāng)處于創(chuàng)建表單情況下，此值是undefined尺上。
- data.value：獲取字段的當(dāng)前值材蛛。如果是創(chuàng)建表單，那么是默認(rèn)值怎抛，如果是編輯表單卑吭，等于當(dāng)前值。
jTable會自動為每個字段創(chuàng)建適當(dāng)?shù)妮斎朐芈砭憧梢允褂眠@個選項來創(chuàng)建自定義的輸入元素豆赏。記得設(shè)置輸入元素的name屬性，如果你想用post的方式發(fā)送請求到服務(wù)器。
<a id="inputClass"></a>
inputClass string default: none
一個字符串用來設(shè)置這個字段在創(chuàng)建/編輯表單中輸入框的樣式河绽。因此己单，你可以在表單中為此字段輸入元素設(shè)置樣式。這在使用驗(yàn)證插件時很有用（我們將很快看到）耙饰。
<a id="inputTitle"></a>
inputTitle string default: none
這個選項為表單中的字段顯示不同的標(biāo)題纹笼。如果沒有設(shè)置，標(biāo)題會和title中設(shè)置的一樣苟跪。
<a id="key"></a>
key boolean default: false
是一個bool值廷痘，代表此字段在當(dāng)前記錄中是否是主鍵。每一行記錄中必須有一個且只能有一個主鍵件已，在編輯和刪除的時候用笋额。
如果一個字段被標(biāo)記為key，添加和編輯操作會默認(rèn)設(shè)置為false篷扩。
如果一個主鍵字段在編輯表單中不能被編輯兄猩，那么會為它自動生成一個hidden元素。這樣主鍵也能發(fā)送到服務(wù)器鉴未。如果主鍵字段可以被編輯（設(shè)置edit為true）枢冤，則主鍵的原始值（更新前的值）會作為jtRecordKey發(fā)送到服務(wù)器。
<a id="list"></a>
list boolean default: true
bool值铜秆，代表此字段是否在表格中顯示淹真。
<a id="listClass"></a>
listClass string default: none
設(shè)置此字段在單元格（td）中的樣式。這樣连茧，可以為表格中的每一個字段設(shè)置樣式核蘸。
<a id="options"></a>
options object, array, URL or a function default: none
如果這個字段的值是要在一個選項列表中選擇（默認(rèn)是下拉列表，也可以是radio button列表）啸驯，你必須提供一個數(shù)據(jù)源客扎。一個選項數(shù)據(jù)源可以是一下幾種格式：
- object：屬性名稱是value，屬性值是顯示文本坯汤。這個有點(diǎn)怪
- array：一個數(shù)組虐唠。
- URL：請求數(shù)據(jù)作為數(shù)據(jù)源。
- function：一個函數(shù)惰聂，它接收一些參數(shù)并且返回一個object疆偿、array或者URL字符串。
定義一個object
創(chuàng)建一個object是定義選項最簡單的方法搓幌，像下面一樣：
PhoneType: {
title: 'Phone type',
options: { '1': 'Home phone', '2': 'Office phone', '3': 'Cell phone' }
}
這樣杆故，jTable會在添加/編輯表單中為此字段創(chuàng)建一個下拉列表：
‘1’，‘2’溉愁，‘3’分別是下拉列表中的值处铛。
定義一個數(shù)組
你也可以設(shè)置一個數(shù)組饲趋，像這樣：
PhoneType: {
title: 'Phone type',
options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office phone' }, { Value: '2', DisplayText: 'Cell phone' }]
}
當(dāng)然，如果值和顯示的文本是一樣的撤蟆，也可以這樣寫：
ClassYear: {
title: 'Phone type',
options: ['1','2','3','4']
}
定義一個URL
你也可以定義一個URL來下載數(shù)據(jù)：
PhoneType: {
title: 'Class year',
options: '/Demo/GetPhoneTypes.php'
}
服務(wù)器正確返回的格式應(yīng)該是這樣的：
{
"Result":"OK",
"Options":[
{
"DisplayText":"Home phone",
"Value":"1"
},
{
"DisplayText":"Office phone",
"Value":"2"
},
{
"DisplayText":"Cell phone",
"Value":"3"
}
]
}
Result可以是“OK”或者“ERROR”奕塑，但如果是“ERROR”，必須返回一個“Message”屬性家肯。
定義一個函數(shù)
你可以定義函數(shù)來動態(tài)返回object龄砰、array或者URL。這樣對于特殊的記錄你可以使用不同的選項讨衣。
PhoneType: {
title: 'Phone type',
options: function(data) {
if (data.source == 'list') {
//Return url all options for optimization.
return '/Demo/GetPhoneTypes.php?UserType=0';
}
//This code runs when user opens edit/create form to create combobox.
//data.source == 'edit' || data.source == 'create'
return '/Demo/GetPhoneTypes.php?UserType=' + data.record.UserType;
}
}
像上面一樣换棚，如果返回一個URL，jTable會下載數(shù)據(jù)作為選項反镇。
為了優(yōu)化固蚤，jTable將基于URL緩存所有選項列表，如果返回相同的URL則從本地緩存獲取數(shù)據(jù)歹茶。你可以在函數(shù)中調(diào)用 data.clearCache() 方法來清除緩存夕玩。
IMPORTANT: jTable also uses this function to show the related field in the table for each shown record. This is because your record contains Value of the field, not DisplayText and jTable needs to show display text (instead of value) in the table. So, when data.source=='list', returning different URLs causes more than one download to list records in the table. This may be a major performance problem. So, as shown the sample above, return URL of all options while listing (data.source=='list') and return filtered options in edit/create forms (if you need).
你可能想要用ajax請求來從服務(wù)器獲取數(shù)據(jù)。這種情況下惊豺，你應(yīng)該從服務(wù)器同步獲取數(shù)據(jù)风秤，因?yàn)槟銘?yīng)該從函數(shù)返回選項。參考demo和jQuery async 選項扮叨。
這個函數(shù)有一個data參數(shù)，它包含一些可用的字段和方法：
- data.source：這個字段用于知道為什么調(diào)用這個方法领迈〕勾牛可選項：‘list’，‘create’狸捅，‘edit’衷蜓。
- data.clearCache()：此方法用于清除當(dāng)前返回的URL的緩存。所以你可以確保的是你的選項將會被重新下載尘喝。
- data.form：此字段用于獲取添加/編輯表單的引用（jQuery選擇器）磁浇。當(dāng)data.source是‘create’或者‘edit’的時候是有效的。
- data.record：此字段用于通過調(diào)用這個函數(shù)獲取響應(yīng)的記錄朽褪。因此置吓，你可以根據(jù)記錄的字段返回選項。如果data.source是‘list’或者‘edit’則是有效的缔赠。
- data.dependedValues：如果你對這個字段設(shè)置了‘dependsOn’選項衍锚，你可以使用data.dependedValues來獲取當(dāng)前依賴字段的值。參考dependsOn嗤堰。
dependsOn選項和data.dependedValues作為一對戴质，提供了創(chuàng)建級聯(lián)下拉列表。點(diǎn)擊查看完整案例。
<a id="optionsSorting"></a>
optionsSorting string default: none
默認(rèn)告匠，jTable不會對option進(jìn)行排序戈抄。此選項可用于自動排序options。這個選項的有效值：
- value：根據(jù)value對options進(jìn)行排序（ascending）后专。
- value-desc：根據(jù)value對options進(jìn)行排序（descending）划鸽。
- text：根據(jù)display text對options進(jìn)行排序（ascending）。
- text-desc：根據(jù)display text對options進(jìn)行排序（descending）行贪。
<a id="sorting"></a>
sorting boolean default: true
代表是否可以根據(jù)此列對表格進(jìn)行排序（如果表格開啟了排序）漾稀。
<a id="title"></a>
title string default: none
此列在表格中顯示的標(biāo)題，在表單中是作為此字段的label建瘫。如果該字段顯示在表單中那么這個選項是必須的崭捍。
<a id="type"></a>
type string default: text
設(shè)置此字段的數(shù)據(jù)類型。如果此字段是text或者number啰脚，不需要在設(shè)置殷蛇。其它一些類型：
password：在表單中展示一個type=password的文本框。
textarea：在表單中展示一個type=textarea的文本框橄浓。
-
data：時間字段（不包含time部分：2017-04-09）粒梦。在表單中會自動創(chuàng)建一個jQueryUI日期選擇器。如果此字段是date（datetime）類型荸实，可以自定義一些附加選項：
- displayFormat：對時間進(jìn)行格式化匀们。查看 jQueryUI datepicker formats
radiobutton：如果此字段是下拉列表中選擇的值，它可以是combobox（默認(rèn)）或者是radio button list准给。如果是單選按鈕列表泄朴，設(shè)置類型為radiobutton。你必須提供options列表數(shù)據(jù)露氮。
-
checkbox：在編輯這個字段的時候展示一個復(fù)選框祖灰。如果一個字段是checkbox,可以自定義一些附加選項:
- values：這個屬性用來這是選中/未選中狀態(tài)。例如：{ '0' : 'Passive', '1' : 'Active' }畔规。第一個值是未選中狀態(tài)局扶，第二個值是選中狀態(tài)。
- formText：默認(rèn)的叁扫，當(dāng)用戶改變復(fù)選框的狀態(tài)時它的顯示文本會跟著改變三妈。如果你想固定文本不變，你可以為此字段設(shè)置該選項（string類型）莫绣。
- setOnTextClick：默認(rèn)的沈跨，當(dāng)用戶點(diǎn)擊復(fù)選框文本時，復(fù)選框的狀態(tài)會改變兔综。如果你不想做什么饿凛，可以設(shè)置該選項為false狞玛。
hidden：隱藏字段可以用于表單中編輯隱藏字段。它不會顯示在表格上涧窒。你可能會想給隱藏字段設(shè)置默認(rèn)值心肪，可以使用defaultValue選項。查看案例了解簡單的使用纠吴。
<a id="visibility"></a>
visibility string default: 'visible'
該字段對應(yīng)的列可以通過設(shè)置此屬性或者通過用戶操作來展示或者隱藏硬鞍。可選值：
- fixed：該列會一直顯示戴已，但是用戶操作不會影響固该。
- visible：該列默認(rèn)是顯示的，但是可以被用戶隱藏糖儡。
- hidden：該列默認(rèn)是隱藏的伐坏，但是可以被用戶展示。
注意：用戶可以通過右擊列的標(biāo)題來選擇哪些列需要顯示和隱藏握联。
<a id="width"></a>
width percentage default: '10%'
該列在表格中所占的寬桦沉。是一個百分比值（‘30%’）。如果該字段顯示在表格上金闽，那么它是必須的纯露。最好將所有的字段的寬設(shè)置為100%。
注意：jTable的設(shè)計是適合其容器元素代芜，而不是固定的寬度埠褪。所以，所有的列都將是100%挤庇。如果你要修改表的寬度组橄，請設(shè)置它的容器寬度。
