API-操作

Actions（操作）

Action

一個操作定義了從客戶端向服務(wù)端的溝通方式。這里有四個操作類型：

  • listAction：定義了如何獲取列表數(shù)據(jù)。
  • createAction：定義了如何提交一個創(chuàng)建表單。
  • updateAction：定義了如何提交一個編輯表單。
  • deleteAction：定義了如何刪除一條記錄。

一個操作必須定義在jTable選項里面的actions中：

...
actions: {
    //Actions definitions come here
}
...

一個操作可以是字符串類型的URL，也可以是一個function（查看每一個操作的詳細介紹）。

<a id="listAction"></a>

listAction URL string or function default: none

給listAction設(shè)置一個URL

如果你給listAction定義了一個字符串類型的URL，然后，當你使用load方法時，jTable會發(fā)送POST AJAX請求來獲取列表記錄數(shù)據(jù)。這個URL必須返回一個JSON object。下面是一個返回值案例：

{
 "Result":"OK",
 "Records":[
  {"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/"},
  {"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"},
  {"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"},
  {"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"}
 ]
}

Result屬性可以是“OK”或者“ERROR”。如果是“OK”，Records屬性必須是一個記錄數(shù)組。如果是“ERROR”，必須包含一個Message屬性，給用戶展示一個錯誤的原因。

特別的，日期字段（在jTable和服務(wù)端傳輸）必須是下面格式中的一個：

  • "/Date(...)/"
    例如：/Date(1320259705710)/ (注意: Date(...)里面的數(shù)字是從01.01.1970傳遞的毫秒數(shù))
  • "YYYY-MM-DD HH:MM:SS"
    例如：2012-01-03 21:40:42
  • "YYYY-MM-DD"
    例如：2012-01-03

下面是 ASP.NET MVC服務(wù)端的案例代碼，listAction：

[HttpPost]
public JsonResult PersonList()
{
    try
    {
        List<Person> persons = _repository.PersonRepository.GetAllPeople();
        return Json(new { Result = "OK", Records = persons });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}

下載所有的案例。

Paging

如果開啟了分頁，jTable會在調(diào)用listAction的AJAX請求中發(fā)送兩個參數(shù)：

  • jtStartIndex：當前頁面的記錄開始索引。
  • jtPageSize：預期記錄總數(shù)的最大值

另外，服務(wù)器還需要返回一個附加信息：

  • TotalRecordCount：所有記錄的總條數(shù)。
Sorting

如果開啟了排序，jTable會在調(diào)用listAction的AJAX請求中發(fā)送一個附加參數(shù)：

  • jtSorting：一個字符串代表請求排序。它是由排序字段和排序方向組成的。例如，它可以是 'Name ASC', 'BirtDate DESC', 'Age ASC' ，或者是 'CityId DESC,Name ASC' （如果開啟了multiSotring）。

下面是服務(wù)端的案例代碼，paged and sorted listAction：

[HttpPost]
public JsonResult StudentList(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
{
    try
    {
        var studentCount = _repository.StudentRepository.GetStudentCount();
        List<Student> students = _repository.StudentRepository.GetStudents(jtStartIndex, jtPageSize, jtSorting);
        return Json(new { Result = "OK", Records = students, TotalRecordCount = studentCount });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}

下載所有的案例。

給listAction設(shè)置一個function

你可以給這個action設(shè)置一個function。你的function可以返回下面中的其中一種：

  • data（數(shù)據(jù)結(jié)果）。原文：The data (result) itself
  • 一個promise來返回數(shù)據(jù)。原文：A promise (using jQuery.Deferred) to return the data (result)

為了返回數(shù)據(jù)本身，你可以這么定義action：

listAction: function (postData, jtParams) {
    return {
        "Result": "OK",
        "Records": [
            { "StudentId": 39, "ContinentalId": 1, "CountryId": 18, "CityId": 55, "Name": "Agatha Garcia", "EmailAddress": "agatha.garcia@jtable.org", "Password": "123", "Gender": "F", "BirthDate": "\/Date(-1125111600000)\/", "About": "", "Education": 2, "IsActive": true, "RecordDate": "\/Date(1369083600000)\/" },
            { "StudentId": 61, "ContinentalId": 4, "CountryId": 1, "CityId": 1, "Name": "Agatha Lafore", "EmailAddress": "agatha.lafore@jtable.org", "Password": "123", "Gender": "F", "BirthDate": "\/Date(1017694800000)\/", "About": "", "Education": 3, "IsActive": true, "RecordDate": "\/Date(1393192800000)\/" }],
        "TotalRecordCount": 2
    };
}

直接返回數(shù)據(jù)可用于演示， 但這種場景并不常見。你大概想要通過ajax請求來向服務(wù)端獲取數(shù)據(jù)。這種情況下，你可以使用 jQuery.Deferred 返回一個promise：

listAction: function (postData, jtParams) {
    return $.Deferred(function ($dfd) {
        $.ajax({
            url: '/Demo/StudentList?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
            type: 'POST',
            dataType: 'json',
            data: postData,
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

這個函數(shù)接收一些參數(shù)：

  • postData：如果你調(diào)用load方法并且傳遞一個post data，它就是你提供的data。
  • jtParams：用于將jTable特定的參數(shù)作為對象傳遞。這個對象會有下面3個屬性：
    • jtStartIndex：如果你使用paging，這是從服務(wù)端獲取記錄的開始索引。
    • jtPageSize：如果你使用paging，這是獲取每頁記錄的最大值。
    • jtSorting：如果你使用sorting，這是排序的信息（排序字段和方向）。

在這個function中，你可以在使用 $dfd.resolve(data) 返回之前修改返回數(shù)據(jù)的格式。數(shù)據(jù)必須格式化為jTable預期的格式。所以，在‘設(shè)置URL作為listAction’中寫入的所有內(nèi)容在這里也是有效的。

<a id="createAction"></a>

createAction URL string or function default: none

設(shè)置URL作為createAction

如果你定義一個URL作為createAction，然后，當你創(chuàng)建和保存一條記錄的時候，jTable會發(fā)送一個POST AJAX請求到服務(wù)端來保存這條數(shù)據(jù)。

createAction是可選的。如果你沒有定義，用戶不能添加新紀錄到表格中（表格中不顯示‘+add new record’按鈕）。這個URL必須返回一個JSON object，像下面一樣：

{
 "Result":"OK",
 "Record":{"PersonId":5,"Name":"Dan Brown","Age":55,"RecordDate":"\/Date(1320262185197)\/"}
}

Result屬性可以是“OK”或者“ERROR”。如果是“OK”，Record屬性必須是新添加的那條記錄。這是jTable需要添加到表格中的記錄。如果Result是“ERROR”，返回結(jié)果中必須包含Message屬性來向用戶解釋錯誤的原因。

下面是服務(wù)端的案例代碼：

[HttpPost]
public JsonResult CreatePerson(Person person)
{
    try
    {
        Person addedPerson = _repository.PersonRepository.AddPerson(person);
        return Json(new { Result = "OK", Record = addedPerson });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}
設(shè)置function作為createAction

你可以為action設(shè)置一個function。你的function可以返回下面中的任何一個：

  • data（數(shù)據(jù)結(jié)果）。原文：The data (result) itself
  • 一個promise來返回數(shù)據(jù)。原文：A promise (using jQuery.Deferred) to return the data (result)

由于它和listAction非常相似，在這里不在詳細介紹。你可以看下案例。

<a id="updateAction"></a>

updateAction URL string or function default: none

設(shè)置URL作為updateAction

當你編輯和保存一條記錄的時候，jTable會發(fā)送一個POST AJAX請求到服務(wù)端來更新這條數(shù)據(jù)。

updateAction是可選的。如果沒有定義，編輯（圖片）按鈕不會顯示。這個URL必須返回一個JSON object。像下面一樣：

{"Result":"OK"}

Result屬性可以是“OK”或者“ERROR”。如果Result是“ERROR”，返回結(jié)果中必須包含Message屬性來向用戶解釋錯誤的原因。

updateAction也可以返回一個Record記錄（是可選的）。這條記錄會覆蓋以更新表中的記錄。它并沒有完全被覆蓋，而是對應(yīng)的字段被覆蓋掉。所以，舉個例子，如果你返回只有一個字段的記錄，那么只有這個字段會被覆蓋。

{
 "Result":"OK",
 "Record":{"Name":"Dan Brown","Age":55,"LastUpdateDate":"\/Date(1320262185197)\/"}
}

下面是服務(wù)端的案例代碼，updateAction：

[HttpPost]
public JsonResult UpdatePerson(Person person)
{
    try
    {
        _repository.PersonRepository.UpdatePerson(person);
        return Json(new { Result = "OK" });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}
設(shè)置function作為updateAction

你可以為action設(shè)置一個function。你的function可以返回下面中的任何一個：

  • data（數(shù)據(jù)結(jié)果）。原文：The data (result) itself
  • 一個promise來返回數(shù)據(jù)。原文：A promise (using jQuery.Deferred) to return the data (result)

由于它和listAction非常相似，在這里不在詳細介紹。你可以看下案例。

<a id="deleteAction"></a>

deleteAction URL string or function default: none

設(shè)置URL作為deleteAction
當你刪除一條記錄的時候，jTable會發(fā)送一個POST AJAX請求到服務(wù)端來刪除這條數(shù)據(jù)。

deleteAction是可選的。如果沒有定義，刪除（圖片）按鈕不會顯示。這個URL必須返回一個JSON object。像下面一樣：

{"Result":"OK"}

Result屬性可以是“OK”或者“ERROR”。如果Result是“ERROR”，返回結(jié)果中必須包含Message屬性來向用戶解釋錯誤的原因。

下面是服務(wù)端的案例代碼，deleteAction：

[HttpPost]
public JsonResult DeletePerson(int personId)
{
    try
    {
        _repository.PersonRepository.DeletePerson(personId);
        return Json(new { Result = "OK" });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}
設(shè)置function作為updateAction

你可以為action設(shè)置一個function。你的function可以返回下面中的任何一個：

  • data（數(shù)據(jù)結(jié)果）。原文：The data (result) itself
  • 一個promise來返回數(shù)據(jù)。原文：A promise (using jQuery.Deferred) to return the data (result)

由于它和listAction非常相似，在這里不在詳細介紹。你可以看下案例。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容