API-操作

Actions(操作)

Action

一个操作定义了从客户端向服务端的沟通方式。这里有四个操作类型:

  • listAction:定义了如何获取列表数据。
  • createAction:定义了如何提交一个创建表单。
  • updateAction:定义了如何提交一个编辑表单。
  • deleteAction:定义了如何删除一条记录。

一个操作必须定义在jTable选项里面的actions中:

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

一个操作可以是字符串类型的URL,也可以是一个function(查看每一个操作的详细介绍)。

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

listAction URL string or function default: none

给listAction设置一个URL

如果你给listAction定义了一个字符串类型的URL,然后,当你使用load方法时,jTable会发送POST AJAX请求来获取列表记录数据。这个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属性必须是一个记录数组。如果是“ERROR”,必须包含一个Message属性,给用户展示一个错误的原因。

特别的,日期字段(在jTable和服务端传输)必须是下面格式中的一个:

  • "/Date(...)/"
    例如:/Date(1320259705710)/ (注意: Date(...)里面的数字是从01.01.1970传递的毫秒数)
  • "YYYY-MM-DD HH:MM:SS"
    例如:2012-01-03 21:40:42
  • "YYYY-MM-DD"
    例如:2012-01-03

下面是 ASP.NET MVC服务端的案例代码,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会在调用listAction的AJAX请求中发送两个参数:

  • jtStartIndex:当前页面的记录开始索引。
  • jtPageSize:预期记录总数的最大值

另外,服务器还需要返回一个附加信息:

  • TotalRecordCount:所有记录的总条数。
Sorting

如果开启了排序,jTable会在调用listAction的AJAX请求中发送一个附加参数:

  • jtSorting:一个字符串代表请求排序。它是由排序字段和排序方向组成的。例如,它可以是 'Name ASC', 'BirtDate DESC', 'Age ASC' ,或者是 'CityId DESC,Name ASC' (如果开启了multiSotring)。

下面是服务端的案例代码,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设置一个function

你可以给这个action设置一个function。你的function可以返回下面中的其中一种:

  • data(数据结果)。原文:The data (result) itself
  • 一个promise来返回数据。原文:A promise (using jQuery.Deferred) to return the data (result)

为了返回数据本身,你可以这么定义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
    };
}

直接返回数据可用于演示, 但这种场景并不常见。你大概想要通过ajax请求来向服务端获取数据。这种情况下,你可以使用 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();
            }
        });
    });
}

这个函数接收一些参数:

  • postData:如果你调用load方法并且传递一个post data,它就是你提供的data。
  • jtParams:用于将jTable特定的参数作为对象传递。这个对象会有下面3个属性:
    • jtStartIndex:如果你使用paging,这是从服务端获取记录的开始索引。
    • jtPageSize:如果你使用paging,这是获取每页记录的最大值。
    • jtSorting:如果你使用sorting,这是排序的信息(排序字段和方向)。

在这个function中,你可以在使用 $dfd.resolve(data) 返回之前修改返回数据的格式。数据必须格式化为jTable预期的格式。所以,在‘设置URL作为listAction’中写入的所有内容在这里也是有效的。

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

createAction URL string or function default: none

设置URL作为createAction

如果你定义一个URL作为createAction,然后,当你创建和保存一条记录的时候,jTable会发送一个POST AJAX请求到服务端来保存这条数据。

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”,返回结果中必须包含Message属性来向用户解释错误的原因。

下面是服务端的案例代码:

[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 });
    }
}
设置function作为createAction

你可以为action设置一个function。你的function可以返回下面中的任何一个:

  • data(数据结果)。原文:The data (result) itself
  • 一个promise来返回数据。原文:A promise (using jQuery.Deferred) to return the data (result)

由于它和listAction非常相似,在这里不在详细介绍。你可以看下案例

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

updateAction URL string or function default: none

设置URL作为updateAction

当你编辑和保存一条记录的时候,jTable会发送一个POST AJAX请求到服务端来更新这条数据。

updateAction是可选的。如果没有定义,编辑(图片)按钮不会显示。这个URL必须返回一个JSON object。像下面一样:

{"Result":"OK"}

Result属性可以是“OK”或者“ERROR”。如果Result是“ERROR”,返回结果中必须包含Message属性来向用户解释错误的原因。

updateAction也可以返回一个Record记录(是可选的)。这条记录会覆盖以更新表中的记录。它并没有完全被覆盖,而是对应的字段被覆盖掉。所以,举个例子,如果你返回只有一个字段的记录,那么只有这个字段会被覆盖。

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

下面是服务端的案例代码,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 });
    }
}
设置function作为updateAction

你可以为action设置一个function。你的function可以返回下面中的任何一个:

  • data(数据结果)。原文:The data (result) itself
  • 一个promise来返回数据。原文:A promise (using jQuery.Deferred) to return the data (result)

由于它和listAction非常相似,在这里不在详细介绍。你可以看下案例

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

deleteAction URL string or function default: none

设置URL作为deleteAction
当你删除一条记录的时候,jTable会发送一个POST AJAX请求到服务端来删除这条数据。

deleteAction是可选的。如果没有定义,删除(图片)按钮不会显示。这个URL必须返回一个JSON object。像下面一样:

{"Result":"OK"}

Result属性可以是“OK”或者“ERROR”。如果Result是“ERROR”,返回结果中必须包含Message属性来向用户解释错误的原因。

下面是服务端的案例代码,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 });
    }
}
设置function作为updateAction

你可以为action设置一个function。你的function可以返回下面中的任何一个:

  • data(数据结果)。原文:The data (result) itself
  • 一个promise来返回数据。原文:A promise (using jQuery.Deferred) to return the data (result)

由于它和listAction非常相似,在这里不在详细介绍。你可以看下案例

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容